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

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

1 голос
/ 10 марта 2019

Документы для 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 - это uniform vec2 со значениями window.innerWidth, window.innerHeight

1 Ответ

1 голос
/ 11 марта 2019

Вам нужно будет вручную создать два прохода рендеринга. Тот, который визуализирует плоскость фона с простым 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(); вам придется очищать его вручную в начале каждого кадра.

...