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

some days ago I visited the site activetheory.net again. And I saw this stunning nice glass effect in the Homescreen logo border and tried to recode it. Based on the minified code I was able to see they use a PNG as a mask.

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

I was able to load a png inside the shader and show it up, also it was easy to get a mesh with video texture working. Now I'm stuck on the combining part (png with video) inside the shaders.

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

someone got experience with it and can help me?

有人有经验,可以帮助我吗?

Thank you and have a nice Day!

谢谢你,祝你有美好的一天!

here is the shader-material part from:

这是着色器材质部分来自:

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,
});

here are the shaders:

这是着色器:

<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>

1 个解决方案

#1

Finally, I got a similar shader working. For everyone who is interested.

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

The shaders:

<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>

Have fun!

#1