Three.js: RawShaderMaterial لا يستخدم العتامة

وصف المشكلة

لا يتم استخدام عتامة RawShaderMaterial ، حتى عند تعيين علامة الشفافية. لقد رأيت هذه المشكلة في إصدارات r84 بقدر ما يعود إلى r78. لقد كنت أستخدم إصدار Chrome 56.0.2924.87 (64 بت) بشكل أساسي ، لكنني رأيت ذلك في Firefox لـ r84 أيضًا. أتوقع أن تستخدم كائناتي عتامة بنسبة 50٪ إذا تم تعيين التعتيم في RawShaderMaterial.

لدي صفحة اختبار 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>

إصدار Three.js

• [x] ص 84

لوحظ لأول مرة في R78 ، لا توجد بيانات قبل تلك النقطة.

المستعرض

• [x] كروم
• [x] فايرفوكس

ربما أكثر

نظام التشغيل

• [X] macOS

أعتقد أنني رأيت هذا على Linux (Fedora) أيضًا ، لكن ذلك كان منذ فترة وليس جهاز الكمبيوتر الخاص بي.

متطلبات الأجهزة (بطاقة الرسومات ، جهاز VR ، ...)

لا أعتقد أنها مهمة ، لكني أعمل على MacBook Pro (Retina ، 15 بوصة ، أواخر 2013) أثناء استخدام الرسومات المنفصلة فقط NVIDIA GeForce GT 750M.