js不透明度梯度

three.js opacity gradient

本文关键字：不透明度 js      更新时间：2023-09-26

我想知道，由于rgba在three.js中不支持(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/

您可以使用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)创建一个3。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);

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

相关文章：