Three.js: RawShaderMaterial tidak menggunakan opacity

Deskripsi masalah

Opasitas RawShaderMaterial tidak digunakan, bahkan ketika bendera transparansi disetel. Saya telah melihat masalah ini di r84 & versi sejauh r78. Saya terutama menggunakan Chrome Versi 56.0.2924.87 (64-bit), tetapi melihat ini di Firefox untuk r84 juga. Saya berharap objek saya menggunakan opacity 50% jika opacity di RawShaderMaterial diatur.

Saya memiliki halaman html pengujian yang menunjukkan masalah tersebut. Perhatikan bahwa opacity & transparansi diteruskan ke RawShaderMaterial namun poinnya menjadi biru solid:

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>

Versi Three.js

• [x] r84

Pertama kali diperhatikan di r78, tidak ada data sebelum titik itu.

Peramban

• [x] Chrome
• [x] Firefox

Mungkin lebih

OS

• [X] macOS

Saya yakin saya telah melihat ini di Linux (Fedora) juga, tapi itu beberapa waktu yang lalu dan bukan di komputer saya.

Persyaratan Perangkat Keras (kartu grafis, Perangkat VR, ...)

Saya tidak percaya itu signifikan, tetapi saya menjalankan MacBook Pro (Retina, 15-inci, Akhir 2013) saat menggunakan grafis diskrit NVIDIA GeForce GT 750M saja.