Three.js: RawShaderMaterial n'utilise pas l'opacité

description du problème

L'opacité RawShaderMaterial n'est pas utilisée, même lorsque l'indicateur de transparence est défini. J'ai vu ce problème dans r84 et des versions aussi loin que r78. J'ai principalement utilisé la version 56.0.2924.87 de Chrome (64 bits), mais j'ai également vu cela dans Firefox pour r84. Je m'attends à ce que mes objets utilisent une opacité de 50% si l'opacité dans le RawShaderMaterial est définie.

J'ai une page html de test qui montre le problème. Notez que l'opacité et la transparence sont transmises au RawShaderMaterial, mais les points s'affichent en bleu uni :

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>

Version trois.js

• [x] r84

Remarqué pour la première fois dans r78, aucune donnée avant ce point.

Navigateur

• [x] Chrome
• [x] Firefox

Probablement plus

Système d'exploitation

• [X] macOS

Je crois que j'ai également vu cela sur Linux (Fedora), mais c'était il y a quelque temps et pas sur mon ordinateur.

Configuration matérielle requise (carte graphique, périphérique VR, ...)

Je ne pense pas que ce soit significatif, mais je fonctionne sur MacBook Pro (Retina, 15 pouces, fin 2013) tout en utilisant uniquement des graphiques discrets NVIDIA GeForce GT 750M.