Three.js. Как использовать пользовательский материал для фона сцены, а не цвет или текстуру?

Question

Документы для scene скажем, цвет или текстуру можно использовать для scene.background, Я хотел бы использовать ShaderMaterial с моими собственными шейдерами. Как я могу это сделать?

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

uniform vec2 uXYPixel;
void main() {
    vec2 xy = vec2(gl_FragCoord.x/uXYPixel.x, gl_FragCoord.y/uXYPixel.y);
    gl_FragColor.rgb = vec3(xy.x, xy.y, 0);
    gl_FragColor.a = 1.0;
}

uXYPixel это uniformvec2 со значениями window.innerWidth, window.innerHeight

Answer 1

Вам нужно будет вручную создать два прохода рендеринга. Тот, который визуализирует плоскость фона с простым Cameraи второй, который отображает остальную часть сцены. Вы можете использовать самый базовый класс Camera, поскольку вы не будете использовать матрицы преобразования или проекции:

// Set renderer with no autoclear
var renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
document.body.append(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);

// Set up background scene
var bgScene = new THREE.Scene();
var bgCam = new THREE.Camera();
var bgGeom = new THREE.PlaneBufferGeometry(2, 2);
var bgMat = new THREE.ShaderMaterial({
    // Add shader stuff in here
    // ..
    // Disable depth so it doesn't interfere with foreground scene
    depthTest: false,
    depthWrite: false
});
var bgMesh = new THREE.Mesh(bgGeom, bgMat);
bgScene.add(bgMesh);

// Set up regular scene
var scene = new THREE.Scene();
var cam = new THREE.PerspectiveCamera(45, w/h, 1, 100);

function update() {
    // Clear previous frame
    renderer.clear();

    // Background render pass
    renderer.render(bgScene, bgCam);

    // Foreground render pass
    renderer.render(scene, cam);

    requestAnimationFrame(update);
}

update();

Здесь вы можете увидеть рабочий пример.

Обратите внимание, что рендер autoClear = false Атрибут гарантирует, что он не очищает буфер между каждым render() вызов; вам придется очистить его вручную в начале каждого кадра.