Три. js Проблема масштабирования текстуры при использовании THREE.ShaderMaterial для отображения renderTarget.texture в квад - PullRequest
Новая
       5

Три. js Проблема масштабирования текстуры при использовании THREE.ShaderMaterial для отображения renderTarget.texture в квад

2 голосов
/ 22 апреля 2020

Кодовое окно, демонстрирующее эту проблему, находится здесь: https://codepen.io/lilrooness/pen/QWjdjgP

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

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

Работает нормально, если я использую new THREE.MeshBasicMaterial({ map: renderTarget.texture })

enter image description here

но когда я использую свой собственный материал 

        var renderMaterial = new THREE.ShaderMaterial({
            uniforms: {
                tex: { type: 'sampler2D', value: renderTarget.texture }
            },
            fragmentShader: pixelateFragmentShader(),
            vertexShader: standardVertexShader()
        })

, я получаю очень маленькую текстуру, которая зажата enter image description here

Это вершинный шейдер, который я использую для обоих рендеров: 

                varying lowp vec3 vUv;

                void main() {
                    vUv = position;
                    vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
                    gl_Position = projectionMatrix * modelViewPosition; 
                }

это функция рендеринга (я использую одну и ту же камеру для рендеринга оба раза) 

        function animate() {
            time += 0.1;
            quad.material.uniforms.time.value = time;
            requestAnimationFrame(animate);
            renderer.setRenderTarget(renderTarget);
            renderer.render(bufferScene, camera);
            renderer.setRenderTarget(null);
            renderer.render(scene, camera);
        }

Опять же, это работает нормально, если я использую MeshBasicMaterial. Что я делаю не так?

1 Ответ

1 голос
/ 22 апреля 2020

Проблема заключалась в том, что в моем вершинном шейдере я устанавливал vUv = position

Хотя это было желаемое поведение для эффекта перлин-шума, я повторно использовал тот же вершинный шейдер для рендеринга целевой текстуры рендеринга.

Я изменил его на: vUv = uv;

...