javascript - 三.js不透明度渐变

Question

我想知道，由于 Three.js 不支持 rgba(不使用 alpha)，有没有办法制作具有不透明度渐变的面孔？

我看到使用自定义属性的 ShaderMaterial 可能是可能的，但由于我是 WebGL 的新手，我还不太明白。

attributes = {
   // ...
   customColor: { type: 'v4', value: [] }
   // ...
};

var values_color = attributes.customColor.value;

for( var v = 0; v < vertices.length; v++ ) {
   // ...
   values_color[ v ] = new THREE.Vector4();
   // ...
}

我想做这样的事情，但要透明:http://jsfiddle.net/FtML5/3/

Answer 1

您可以将 THREE.ShaderMaterial 与 alpha 值的自定义顶点属性结合使用。这是分步指南 -

1) 在顶点着色器中，声明一个将采用 alpha 值的属性 float。还要在顶点着色器和片段着色器中声明一个变化的 float 。

顶点着色器:

attribute float alphaValue;
varying float vAlphaValue;

片段着色器:

varying float vAlphaValue;

2) 将 alpha 属性值分配给顶点着色器中的变化值。

顶点着色器:

vAlphaValue = alphaValue;

3)所有计算完成后，将alpha变化值赋给gl_FragColor的alpha值。

片段着色器:

gl_FragColor.a = vAlphaValue;

4) 从主机端，添加一个包含总顶点长度的数组。这是代码示例 -

var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
var alphaArray = [];
var alphaArrayLength = vertices.length / 3;
for(var i = 0; i < alphaArrayLength; i++) {
      alphaArray.push(0.5);
}

5) 为几何图形中的 alpha 值添加自定义属性，并使用创建的数组更新它 -

geometry.addAttribute('alphaValue', new THREE.BufferAttribute(new Float32Array(alphaArray), 1));

6) 创建一个 THREE.ShaderMaterial -

var material = new THREE.ShaderMaterial({

            vertexColors: THREE.VertexColors,
            side: THREE.DoubleSide,
            transparent: true,
            vertexShader: document.
                getElementById('vertex_shader_for_face').text,
            fragmentShader: document.
                getElementById('fragment_shader_for_face').text
        });

7) 使用几何体和 Material 创建网格 -

var mesh = new THREE.Mesh(geometry, material);