Question

前几天我再次访问了网站activetheory.net。我在Homescreen徽标边框中看到了这种令人惊叹的漂亮玻璃效果并尝试重新编码。基于缩小的代码，我能够看到他们使用PNG作为掩码。

我能够在着色器中加载一个png并显示它，也很容易得到一个视频纹理工作的网格。现在我停留在着色器内的组合部分（带视频的png）。

有人有经验，可以帮助我吗？

谢谢你，祝你有愉快的一天！

这里是着色器材质部分：

var g = new THREE.PlaneGeometry(128.0, 72.0);
var outline = THREE.ImageUtils
    .loadTexture('outline.png');
outline.magFilter = THREE.NearestFilter;
var mat = new THREE.ShaderMaterial({
    uniforms: {
            map: {type: "t", value: movieScreen.texture},
            outline: {type: "t", outline},
            aspect: {type: "fv1", value: []},
            res: {type: "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight)}
        },
    vertexShader: document.
    getElementById('vertShader').text,
    fragmentShader: document.
    getElementById('fragShader').text,
    transparent: true,
});

这是着色器：

<script id="vertShader" type="shader">
    varying vec2 vUv;
    varying vec2 nUv;

    void main() {
        vUv = uv;
        nUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
</script>
<script id="fragShader" type="shader">

    varying vec2 vUv;
    varying vec2 nUv;

    uniform float color;
    uniform sampler2D outline;
    uniform sampler2D map;


    void main(void) {

        float alpha = step(0.9, texture2D(outline, vUv).a);

        gl_FragColor = texture2D(outline, nUv);
        gl_FragColor *= alpha;
    }
</script>

Answer 1

最后，我有一个类似的着色器工作。对于每个有兴趣的人。

着色器：

<script id="vertShader" type="shader">
    varying vec2 vUv;
    varying vec2 nUv;

    void main() {
        vUv = uv;
        nUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.05);
    }
</script>
<script id="fragShader" type="shader">

    varying vec2 vUv;
    varying vec2 nUv;

    uniform float color;
    uniform sampler2D outline;
    uniform sampler2D map;


    void main(void) {

        float alpha = step(0.9, texture2D(outline, vUv).a);

        gl_FragColor = texture2D(map, nUv);
        gl_FragColor *= alpha;
        gl_FragColor += 0.08 * alpha;
    }
</script>

玩得开心！

在视频纹理上使用PNG图像蒙版的Three.js Shader玻璃效果

1 个答案: