Three.js Shader Glas Effekt mit PNG-Bild-Maske auf einer Video-Textur

Question

vor ein paar Tagen besuchte ich die Seite activetheory.net wieder. Und ich habe diesen umwerfenden schönen Glaseffekt im Homescreen-Logo-Rand gesehen und versucht, ihn zu rekodieren. Basierend auf dem minimierten Code konnte ich sehen, dass sie ein PNG als Maske verwenden.

Ich konnte ein PNG in den Shader laden und es zeigen, auch war es einfach, ein Mesh mit Video Textur arbeiten zu bekommen. Jetzt bin ich auf den kombinierenden Teil (PNG mit Video) in den Shadern fest.

jemand hat Erfahrung damit und kann mir helfen?

Vielen Dank und einen schönen Tag!

hier ist der Shader-Material Teil von:

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

hier die Shadern sind:

<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

Schließlich bekam ich einen ähnlichen Shader arbeiten. Für alle, die interessiert sind.

Die Shadern:

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

Viel Spaß!