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）在你的顶点着色器中，声明一个attribute float，它将获取alpha值。同时在顶点和片段着色器中声明varying 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）使用几何和材质创建网格 -

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

Answer 2

最快的解决方案似乎是使用自定义着色器并根据UV值设置片段不透明度。

three.js不透明度渐变

2 个答案: