Три прозрачности JS с ShaderMaterial

Question

Я рисую две геометрии рядом друг с другом и поворачиваю их. Проблема в том, что первая обратная сторона препятствует второму, где прозрачность должна вступить в силу. Эти два объекта должны иметь одинаковую прозрачность, независимо от того, кто был нарисован первым. Вот почему смешение включено, и проверка глубины отключена. Вот изображения:

обе геометрии облако точек с помощью THREE.ShaderMaterial как следует:

var shaderMaterial = new THREE.ShaderMaterial({ 
       uniforms: uniforms, 
       attributes: attributes, 
       vertexShader: document.getElementById('vertexshader').textContent, 
       fragmentShader: document.getElementById('fragmentshader').textContent, 
       blending: THREE.NormalBlending, 
       depthTest: false, 
       transparent: true 
      }); 

где

// attributes 
attributes = { 
       size: { type: 'f', value: null }, 
       alpha: { type: 'f', value: [] }, 
       customColor: { type: 'c', value: null } 
      }; 

// uniforms 
uniforms = { 
      color: { type: "c", value: new THREE.Color(0x00ff00) }, 
      texture: { type: "t", value: THREE.ImageUtils.loadTexture("../textures/sprites/circle.png") } 
      }; 

и

<script type="x-shader/x-vertex" id="vertexshader"> 
     attribute float alpha; 
     attribute float size; 
     attribute vec3 customColor;   
     varying float vAlpha; 
     varying vec3 vColor; 
     void main() { 
     vAlpha = alpha; 
     vColor = customColor; 
     vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
     gl_PointSize = size * (120.0/length(mvPosition.xyz)); 
     gl_Position = projectionMatrix * mvPosition; 
     } 
    </script> 
<script type="x-shader/x-fragment" id="fragmentshader"> 
     uniform vec3 color; 
     uniform sampler2D texture; 
     varying float vAlpha; 
     varying vec3 vColor; 
     void main() { 
     gl_FragColor = vec4(vColor, vAlpha); 
     gl_FragColor = gl_FragColor * texture2D(texture, gl_PointCoord); 
     } 
    </script> 

Answer 1

Пример кода с 2 текстур , но можно также работать с ним:

<script id="fragmentShaderLoader" type="x-shader/x-fragment"> 
     uniform float percent; 

     uniform sampler2D texture1; 
     uniform sampler2D texture2; 

     varying vec2 vUv; 

     void main() { 
      gl_FragColor = texture2D(texture1, vUv); 
      vec4 tex2 = texture2D(texture2, vUv); 
      if(tex2.a - percent < 0.0) { 
       gl_FragColor.a = 0.0; 
       //or without transparent = true use 
       //discard; 
      } 

     } 

    </script> 

    <script id="vertexShaderLoader" type="x-shader/x-vertex"> 
     varying vec2 vUv; 

     void main() 
     { 
      vUv = uv; 

      vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
      gl_Position = projectionMatrix * mvPosition; 
     } 
    </script> 

Тогда для инициализации:

uniformsMove = { 
        percent: { type: "f", value: 1.0 }, 
        texture1: { type: "t", value: (new THREE.TextureLoader()).load("govr/loader-test.png") }, 
        texture2: { type: "t", value: (new THREE.TextureLoader()).load("govr/loader-mask2.png") } 
       }; 

      material = new THREE.ShaderMaterial({ 
       uniforms: uniformsMove, 
       vertexShader: document.getElementById('vertexShaderLoader').textContent, 
       fragmentShader: document.getElementById('fragmentShaderLoader').textContent 

      }); 
material.transparent = true;