Спящие: создание атмосферного опыта работы с WebGL с помощью облегченных методов | Кодропс

Спящие — это небольшой опыт работы с WebGL, который я создал в качестве заявки на конкурс Бруно Саймона Three.js.

Работа над такой задачей означает работу в свободное время, бесплатно и в сжатые сроки. Это естественным образом подталкивает вас к одному: эффективности.

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

Давайте разберем некоторые методы, лежащие в основе этого.

Введение: вихревой переход

Чтобы создать этот переход, нам сначала понадобится черно-белая текстура, такая как эта:

Затем мы используем эту текстуру в качестве однородной формы в шейдере постобработки, чтобы контролировать, как сцена постепенно переходит от темно-серой версии к исходным цветам.

Красный канал текстуры действует как порог для каждого пикселя: каждый фрагмент переходит, когда прогресс равномерен (uProgress) превышает соответствующее пороговое значение в текстуре.

Вот упрощенная версия шейдера, который я использовал:

uniform float uProgress;
uniform sampler2D uTransitionTexture;

vec3 greyscale(vec3 color, float str) {
    float g = dot(color, vec3(0.1));
    return mix(color, vec3(g), str);
}

void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
    vec3 greyScaledColor = greyscale(inputColor.rgb, 1.);
    greyScaledColor = mix(greyScaledColor, vec3(0.1, 0.1, .9), pow(uProgress, 5.));

    vec4 textureColor = texture2D(uTransitionTexture, vUv);
    float mixer = step(textureColor.r, uProgress);

    outputColor = vec4(mix(greyScaledColor, inputColor.rgb, mixer), 1.);
}

Как uProgress увеличивается от 0 до 1, разные части экрана отображаются в разное время в зависимости от значений текстуры. Сначала появляются темные области, а позже появляются более светлые области, создавая впечатление, что изображение раскрывается за счет закрученного узора. Эта простая техника позволяет создавать насыщенные и органичные переходы, сохраняя при этом простую логику шейдера! 👌

Туман

Этот туман явно не объемный, это просто своего рода цветовой трюк, примененный к материалам сцены.

Шаг 1: Линейный вертикальный туман

Сначала нам нужно настроить модификацию шейдера (используя onBeforeCompile), и позже мы применим его ко всем материалам сцены.

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

const fogOnBeforeCompile = (shader) => {
    // 1. Retrieve the worldPosition and pass it as a varying
    shader.vertexShader = shader.vertexShader.replace(
        'void main() {',
        `
        varying vec3 vWorldPosition;
        void main() {
            vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;
    `)

    // 2. Define the uniforms and the varying in the fragment shader
    shader.fragmentShader = shader.fragmentShader.replace(
        'void main() {',
        `
        uniform float fogPositionY;
        uniform float fogSmoothness;
        varying vec3 vWorldPosition;
        void main() {
    `)

    3. Use them to create a basic fog
    shader.fragmentShader = shader.fragmentShader.replace(
        'vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;',
        `
        vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;

        // vertical gradient
        float verticalMixer = smoothstep(vWorldPosition.y - fogSmoothness, vWorldPosition.y + fogSmoothness, fogPositionY);

        float mixer = clamp(verticalMixer, 0., 1.);

        vec3 fogColor = vec3(1.);
        
        outgoingLight = mix(outgoingLight, fogColor, mixer);
    `);
    
    shader.uniforms.fogPositionY = { value: fogSettings.height };
    shader.uniforms.fogSmoothness = { value: fogSettings.smoothness };
}

Затем мы можем применить это переопределение шейдера к нашим материалам (обратите внимание, что он предназначен для работы с экземплярами MeshStandardMaterial, вам может потребоваться настроить его, если вы работаете с разными материалами).

gltf.scene.traverse(child => {
    if (child.isMesh) {
        child.material.onBeforeCompile = (shader) => {
            fogOnBeforeCompile(shader);
        };
    }
});

При такой логике результат уже должен выглядеть так: