ビデオテクスチャ上の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> 

は、お楽しみに！