Three.js: RawShaderMaterial не использует непрозрачность

Созданный на 23 мар. 2017  ·  3Комментарии  ·  Источник: mrdoob/three.js

Описание проблемы

Непрозрачность 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] r84

Впервые заметил в r78, до этого момента нет данных.

Браузер
  • [x] Chrome
  • [x] Firefox

Наверное, больше

Операционные системы
  • [X] macOS

Я думаю, что видел это и в Linux (Fedora), но это было давно, а не на моем компьютере.

Требования к оборудованию (видеокарта, устройство VR, ...)

Не думаю, что это важно, но я работаю на MacBook Pro (Retina, 15 дюймов, конец 2013 г.), используя только дискретную графику NVIDIA GeForce GT 750M.

Самый полезный комментарий

Да, с RawShaderMaterial ты сам по себе.

Все 3 Комментарий

@clawconduce Я думаю, это просто для использования, когда вы включаете части ShaderChunk / ShaderLib . Это правда, в RawShaderMaterial & ShaderMaterial нет ссылки. Но он используется в Mater

Что я нашел:

Если вы хотите настроить непрозрачность с помощью RawShaderMaterial вы должны изменить альфа-канал в gl_FragColor внутри вашего фрагментного шейдера.

Ясно спасибо!

Я думаю, что в документах можно было бы внести некоторые пояснения. Например, «RawShaderMaterial (параметры)

параметры - (необязательно) объект с одним или несколькими свойствами, определяющими внешний вид материала. Здесь можно передать любое свойство материала (включая любое свойство, унаследованное от Material и ShaderMaterial) ".

Я не уверен, как лучше их обновить, я бы, наверное, просто добавил исключение. Я мог бы устроить пиар, если это звучит нормально.

Я немного новичок в WebGL, так что вам придется извинить за мою терминологию. Означает ли это также, что непрозрачность материала применяется к каждой вершине? Если я наложу на материал непрозрачность 50% и у меня будет 2 точки перекрытия, то там, где они будут перекрываться, будет ли у цвета непрозрачность> 50%?

Да, с RawShaderMaterial ты сам по себе.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги