three.js Opazitätsgradient

Question

Ich frage mich, wie die rgba nicht in three.js unterstützt wird (die Alpha wird nicht verwendet), gibt es eine Möglichkeit, ein Gesicht mit einem Opazitätsgradienten zu machen?

Ich sah, es ist wahrscheinlich möglich mit einem ShaderMaterial, mit benutzerdefinierten Attributen, aber wie ich neu in WebGL bin, verstehe ich noch nicht wirklich.

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(); 
    // ... 
} 

Ich mag so etwas tun, sondern mit Transparenz: http://jsfiddle.net/FtML5/3/

Answer 1

Die schnellste Lösung scheint wie ein benutzerdefinierten Shader verwenden und Einstellung Opazität Fragment basierend auf UV-Werten.

Answer 2

Sie können THREE.ShaderMaterial mit einem benutzerdefinierten Vertex-Attribut für den Alpha-Wert verwenden. Hier ist eine Schritt-für-Schritt-Anleitung -

1) In Ihrem Vertex-Shader, deklarieren Sie eine attribute float, die den Alpha-Wert übernehmen wird. Deklarieren Sie auch einen varying float im Vertex- und im Fragment-Shader.

Vertex-Shader:

attribute float alphaValue; 
varying float vAlphaValue; 

Fragment-Shader:

varying float vAlphaValue; 

2) Zuweisen des alpha-Attributwert zu dem variierenden Wert in Vertex-Shader.

Vertex-Shader:

vAlphaValue = alphaValue; 

3) Schließlich die Berechnung durchgeführt wurde, weisen die alpha unterschiedlichen Wert auf den Alpha-Wert von gl_FragColor.

Fragment-Shader:

gl_FragColor.a = vAlphaValue; 

4) Aus der Host-Seite, ein Array mit der Länge des gesamten Scheitel hinzuzufügen. Hier ist der Code-Beispiel -

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) Fügen Sie ein benutzerdefiniertes Attribut für Alpha-Wert in der Geometrie und aktualisieren Sie es mit dem Array erstellt -

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

6) Erstellen Sie ein 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) erstellen Sie die Masche mit der Geometrie und Material -

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