CODEWITHSUNDEEP
three.js
Dimitrios Ververidis
Dimitrios Ververidis

Reputation: 1215

Three.js transform controls too thin lines

I am trying to make transform controls gizmo lines to be more thick because it is difficult to grasp them with linewidth of 1. However, by changing the this.linewidth = 1 nothing happens. According to https://threejs.org/docs/#api/materials/LineBasicMaterial the linewidth parameter is not working in Windows. Any Help ?

Upvotes: 2

Views: 1276

Answers (3)

TheJim01
TheJim01

Reputation: 8896

Regarding Line Thickness:

Unless your browser allows you--and you opt-in--to draw in native OpenGL, browser in Windows will use an application layer called ANGLE. Because Direct3D doesn't support line width, neither does ANGLE, and so neither does three.js (again, on Windows in non-native GL mode). Here's a discussion on the root topic, unfortunately the accepted solution is to use a geometry shader, which is not supported by WebGL.

Solutions:

You've already discovered one: Use cylinders.

There are clever ways of creating quads from you line definitions and using shaders to manipulate them into appearing to be lines, but discussing that approach is currently out of my depth.

Finally, you can upgrade your version of three.js to r91+. "Fat" line support was added in r91, and you can find an example here.

Upvotes: 2

Ian Paschal
Ian Paschal

Reputation: 823

Your answer is a good work around but the reason for this is because WebGL doesn't really support different line widths. From MDN web docs:

The webgl spec, based on the OpenGL ES 2.0/3.0 specs points out that the minimum and maximum width for a line is implementation defined. The maximum minimum width is allowed to be 1.0. The minimum maximum width is also allowed to be 1.0. Because of these implementation defined limits it is not recommended to use line widths other than 1.0 since there is no guarantee any user's browser will display any other width.

As of January 2017 most implementations of WebGL only support a minimum of 1 and a maximum of 1 as the technology they are based on has these same limits.

Source

This is the answer why you don't see a difference, and why creating "fat" lines in WebGL requires the creation of actual thicker geometry.

Upvotes: 1

Dimitrios Ververidis
Dimitrios Ververidis

Reputation: 1215

After a while it was not so difficult to change the Lines into Cylinders. So

After my changes

Below is the updated TransformControls.js

https://www.dropbox.com/s/y52ra0antdvo0ht/TransformControls.js?dl=0

Upvotes: 0

Related Questions