three.js不透明度勾配

Question

rgbaはthree.jsでサポートされていないので（アルファは使用されません）、不透明度勾配のある面を作成する方法はありますか？

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

最速のソリューションは、UV値に基づいて、フラグメントの不透明度をカスタムシェーダを使用して設定するように思えます。

Answer 2

THREE.ShaderMaterialには、アルファ値のカスタム頂点属性を使用できます。ここでは、ステップバイステップガイドです。

1）頂点シェーダでアルファ値を取るattribute floatと宣言します。また、頂点シェーダとフラグメントシェーダの両方にvarying floatと宣言します。

頂点シェーダ：

attribute float alphaValue; 
varying float vAlphaValue; 

フラグメントシェーダ：

varying float vAlphaValue; 

2）頂点シェーダで変化する値にアルファ属性値を割り当てます。

頂点シェーダ：すべての計算が行われている

vAlphaValue = alphaValue; 

3）後、gl_FragColorのアルファ値にアルファ変化する値を割り当てます。

フラグメントシェーダ：

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）ジオメトリのアルファ値のカスタム属性を追加し、作成された配列で更新 -

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

6）THREE.ShaderMaterialの作成 -

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

-

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）の形状および材料を有するメッシュを作成します