Three.js: RawShaderMaterial은 불투명도를 사용하지 않습니다.

문제에 대한 설명

투명도 플래그가 설정되어 있어도 RawShaderMaterial 불투명도는 사용되지 않습니다. r84 및 r78까지 버전에서 이 문제를 보았습니다. 저는 주로 Chrome 버전 56.0.2924.87(64비트)을 사용했지만 r84용 Firefox에서도 이것을 보았습니다. 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>

Three.js 버전

• [x] r84

r78에서 처음 발견되었으며 그 시점 이전에는 데이터가 없습니다.

브라우저

• [x] 크롬
• [x] 파이어폭스

아마 더

OS

• [X] 맥OS

나는 이것을 Linux(Fedora)에서도 본 적이 있다고 생각하지만 그것은 얼마 전의 일이며 내 컴퓨터가 아닙니다.

하드웨어 요구 사항(그래픽 카드, VR 장치, ...)

나는 그것이 중요하다고 생각하지 않지만 개별 그래픽 NVIDIA GeForce GT 750M을 사용하면서 MacBook Pro(Retina, 15-inch, Late 2013)에서 실행하고 있습니다.