javascript - Espesor de líneas usando THREE.LineBasicMaterial




webgl three.js (6)

Esto ocurre en Windows Chrome y Firefox, ambos usando ANGLE (WebGL a DirectX wrapper).

El problema aún no está resuelto por el proyecto ANGLE. Puede destacar el problema aquí para obtener una mayor prioridad y recibir una notificación si se va a implementar:

https://code.google.com/p/angleproject/issues/detail?id=119

Estoy usando el siguiente código para crear cientos de líneas en mi escena three.js

edgeGeometry[i] = new THREE.Geometry();
edgeGeometry[i].vertices[0] = v(x1,y1,z1);
edgeGeometry[i].vertices[1] = v(x2,y2,z2);
edgesMat[i] = new THREE.LineBasicMaterial({
    color: 0x6699FF, linewidth: 1, fog:true});
edge[i] = new THREE.Line(edgeGeometry[i], edgesMat[i]);
edge[i].type = THREE.Lines;
scene2.add(edge[i]);

Funciona muy bien, pero cuando cambio el valor de "linewidth" a un valor más grande O más pequeño, no veo ninguna diferencia en la escena.
¿Cómo debo cambiar el grosor de las líneas? ¿Algunas ideas?
Gracias, Dimitris


¿Estás usando Windows?
Recuerdo que esto no funciona en Windows porque no se implementó en ANGLE .


Esto ya no es un problema solo en ANGLE, es un problema en todas las plataformas. Los navegadores deben cambiar al perfil central de OpenGL 4+ para admitir WebGL2 y el perfil de núcleo OpenGL 4+ no admite anchos de línea superiores a 1. De la especificación de OpenGL 4.0+, sección E.2.1

E.2.1 Características obsoletas pero aún compatibles

Las siguientes características están en desuso, pero aún están presentes en el perfil central. Se pueden eliminar de una versión futura de OpenGL y se eliminan en un contexto compatible con versiones posteriores que implementa el perfil central.

  • Líneas anchas: valores de LineWidth superiores a 1.0 generarán un error INVALID_VALUE.

Para dibujar líneas más gruesas, necesitas generar geometría. Para three.js hay esta biblioteca (señalada por Wilt también)

https://github.com/spite/THREE.MeshLine


Puede utilizar CanvasRenderer en lugar de Webglrenderer. Consulte la documentación oficial here donde cada forma tiene un borde de ancho de línea = 10;


1) Utilice OpenGL nativo

Puede lograr la representación del grosor de línea con una solución al configurar su navegador para usar OpenGL nativo en lugar de ANGLE. Puedes leer aquí sobre cómo hacer esto en Chrome . Tenga en cuenta que experimentará diferencias de rendimiento si cambia a OpenGL nativo.

EDITAR:

El maestro MrDoob mismo publicó aquí cómo hacer esto tanto para Chrome como para Firefox .

Nota: Esta primera opción ya no es una solución válida, ya que las últimas versiones de OpenGL ya no admiten el grosor de línea. Verifique también @gman su respuesta . Esto significa que si quieres usar el grosor de la línea, la segunda opción es el camino a seguir.

2) Utiliza la clase THREE.MeshLine

También hay otra solución; esta clase THREE.MeshLine en github es una buena solución. Viene con un THREE.MeshLineMaterial especial. De acuerdo con los documentos, es tan simple como:

  • Crear y poblar una geometría
  • Crea un THREE.MeshLine y asigna la geometría
  • Crear un THREE.MeshLineMaterial
  • Utilice THREE.MeshLine y THREE.MeshLineMaterial para crear un THREE.Mesh

¿Intentó agregar esto?

geometry.computeTangents();




javascript webgl three.js