Three.js: RawShaderMaterial अस्पष्टता का उपयोग नहीं करता है

समस्या का विवरण

पारदर्शिता ध्वज सेट होने पर भी, RawShaderMaterial अस्पष्टता का उपयोग नहीं किया जाता है। मैंने इस मुद्दे को r84 और संस्करणों में r78 तक देखा है। मैं मुख्य रूप से क्रोम संस्करण 56.0.2924.87 (64-बिट) का उपयोग कर रहा हूं, लेकिन इसे फ़ायरफ़ॉक्स में r84 के लिए भी देखा। अगर RawShaderMaterial में अस्पष्टता सेट है, तो मुझे उम्मीद है कि मेरी वस्तुएं 50% अस्पष्टता का उपयोग करेंगी।

मेरे पास एक परीक्षण HTML पृष्ठ है जो समस्या दिखाता है। ध्यान दें कि अस्पष्टता और पारदर्शिता को RawShaderMaterial में पारित किया जाता है, फिर भी बिंदु ठोस नीले रंग के रूप में प्रस्तुत होते हैं:

https://jsfiddle.net/jg4ta1po/

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js"></script>
<style>
body { background-color: grey; }
#render canvas {border: 1px solid black; }
</style>

<div id="render"></div>

<script type="text/javascript">
    function drawDots(scene) {
        var vertices = new Float32Array( [-32, 0, 0, 32, 0, 0] );
        var geometry = new THREE.BufferGeometry();
        geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
        var shaders = {
            vertex: document.getElementById('rasterVertexShader').textContent,
            fragment: document.getElementById('rasterFragmentShader').textContent,
        };
        var material = new THREE.RawShaderMaterial({
            uniforms:       {},
            vertexShader:   shaders.vertex,
            fragmentShader: shaders.fragment,
            transparent:    true,
            depthTest:      false,
            opacity:         0.5,
        });
        material.side = THREE.DoubleSide;
        var mesh = new THREE.Points(geometry, material);
        mesh.frustumCulled = false;
        //TODO: Use groups
        scene.add(mesh);
    }

    function initRenderer() {
        var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
        var div = document.getElementById('render');
        div.appendChild(renderer.domElement);
        var camera = new THREE.PerspectiveCamera(90, 1, 1, 1000);
        camera.position.z = 256;
        var scene = new THREE.Scene();
        //var dpr = window.devicePixelRatio ? window.devicePixelRatio : 1;
        //renderer.setPixelRatio(dpr);
        renderer.setSize(256, 256)
        camera.aspect = 1.0;
        camera.updateProjectionMatrix();
        return {
            renderer: renderer,
            scene: scene,
            camera: camera,
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        var renderer, scene, camera;
        var r = initRenderer();
        drawDots(r.scene);
        r.renderer.render(r.scene, r.camera);
    });

</script>

<script type="x-shader/x-vertex" id="rasterVertexShader">

attribute vec3 position;

uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;

void main() {
  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
  gl_Position = projectionMatrix * mvPosition;;
  gl_PointSize = 64.0;
}
</script>

<script type="x-shader/x-fragment" id="rasterFragmentShader">
void main() {
  gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
</script>

तीन.जेएस संस्करण

• [एक्स] आर 84

पहली बार r78 में देखा गया, उस बिंदु से पहले कोई डेटा नहीं।

ब्राउज़र

• [एक्स] क्रोम
• [एक्स] फायरफॉक्स

शायद अधिक

ओएस

• [एक्स] मैकोज़

मेरा मानना ​​है कि मैंने इसे लिनक्स (फेडोरा) पर भी देखा है, लेकिन वह कुछ समय पहले था और मेरा कंप्यूटर नहीं था।

हार्डवेयर आवश्यकताएं (ग्राफिक्स कार्ड, वीआर डिवाइस, ...)

मुझे विश्वास नहीं है कि यह महत्वपूर्ण है, लेकिन मैं केवल असतत ग्राफिक्स NVIDIA GeForce GT 750M का उपयोग करते हुए मैकबुक प्रो (रेटिना, 15-इंच, देर से 2013) पर चल रहा हूं।