Question

这是对passing a color array for segments to THREE.LineSegments的跟进，我希望找到并回答这个问题，避免使用我完全陌生的低级着色器（potentially relevant example）。

所以..简单地说：是否可以将不透明度传递给单个THREE.BufferGeometry颜色元素？也许是通过4矢量彩色阵列而不是将脚趾浸入着色水中？

Answer 1

所以我阅读了this针对three.js的着色器的简短介绍，并基于此我将上面提到的potentially relevant example中使用的着色器减少到这些基本版本，

<script id="vertexShader" type="x-shader/x-vertex">

 precision mediump float;
 precision mediump int;

 attribute vec4 color;
 varying vec4 vColor;

 void main()    {

   vColor = color;

   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

 }

</script>

<script id="fragmentShader" type="x-shader/x-fragment">

 precision mediump float;
 precision mediump int;

 varying vec4 vColor;

 void main()    {

   vec4 color = vec4( vColor );
   gl_FragColor = color;

 }

</script>

使用这些着色器，并使用THREE.ShaderMaterial，

 var material = new THREE.ShaderMaterial({
   vertexShader: document.getElementById('vertexShader').textContent,
   fragmentShader: document.getElementById('fragmentShader').textContent,
   transparent: true,
   blending: THREE.AdditiveBlending,
   depthTest: false
 });

然后填充

 var colors = new Float32Array(segments * 4 * 2);

带有颜色+ alpha值的数组（因此数字 4 ）并将其传递给

geometry.addAttribute('color', new THREE.BufferAttribute(colors, 4, true));

我能够获得我想要的效果。对于披露，segments包含我在THREE.LineSegments网格中的细分数量以及我previous question中指出的 WestLangley 我需要传递的颜色向量两次（对于一个段的两端），这解释了 2 的附加因素。有趣的骑;下一站：把lineWidth带回汤里。

将不透明度传递给THREE.LineSegments的各个部分

1 个答案: