在视频纹理上带有PNG图像蒙版的Three.js着色器玻璃效果

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>

玩得开心！