diff --git a/dist/aframe-transparent-video-shader.cjs b/dist/aframe-transparent-video-shader.cjs index 783bd34..1b8f8ca 100644 --- a/dist/aframe-transparent-video-shader.cjs +++ b/dist/aframe-transparent-video-shader.cjs @@ -1,2 +1,2 @@ -AFRAME.registerShader("transparent-video",{schema:{src:{type:"map"}},init:function(e){var r=new THREE.VideoTexture(e.src),a=new THREE.VideoTexture(e.src);r.format=THREE.RGBAFormat,a.format=THREE.AlphaFormat,e.transparent=!0,this.material=new THREE.ShaderMaterial({vertexShader:"\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n ",fragmentShader:"\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n ",uniforms:{videoTexture:{type:"t",value:r},alphaTexture:{type:"t",value:a}},transparent:!0})}}); +AFRAME.registerShader("transparent-video",{schema:{src:{type:"map"}},applyWebmShader:function(e){var a=new THREE.VideoTexture(e);a.format=THREE.RGBAFormat,this.material=new THREE.MeshBasicMaterial({map:a,transparent:!0})},applyHEVCShader:function(e){var a=new THREE.VideoTexture(e),r=new THREE.VideoTexture(e);a.format=THREE.RGBAFormat,r.format=THREE.AlphaFormat,this.material=new THREE.ShaderMaterial({vertexShader:"\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n ",fragmentShader:"\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n ",uniforms:{videoTexture:{type:"t",value:a},alphaTexture:{type:"t",value:r}},transparent:!0})},init:function(e){var a,r=e.src,t=new URL(r.currentSrc).pathname.split("."),n=null==(a=t[t.length-1])?void 0:a.toLowerCase();e.transparent=!0,"webm"===n?this.applyWebmShader(r):this.applyHEVCShader(r)}}); //# sourceMappingURL=aframe-transparent-video-shader.cjs.map diff --git a/dist/aframe-transparent-video-shader.cjs.map b/dist/aframe-transparent-video-shader.cjs.map index 69a702a..15d6f58 100644 --- a/dist/aframe-transparent-video-shader.cjs.map +++ b/dist/aframe-transparent-video-shader.cjs.map @@ -1 +1 @@ -{"version":3,"file":"aframe-transparent-video-shader.cjs","sources":["../index.js"],"sourcesContent":["AFRAME.registerShader('transparent-video', {\n schema: {\n src: { type: 'map' },\n },\n\n init: function (data) {\n const videoTexture = new THREE.VideoTexture(data.src);\n const alphaTexture = new THREE.VideoTexture(data.src);\n\n videoTexture.format = THREE.RGBAFormat;\n alphaTexture.format = THREE.AlphaFormat;\n data.transparent = true;\n\n this.material = new THREE.ShaderMaterial({\n vertexShader: `\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n `,\n uniforms: {\n videoTexture: { type: 't', value: videoTexture },\n alphaTexture: { type: 't', value: alphaTexture },\n },\n transparent: true,\n });\n },\n});"],"names":["AFRAME","registerShader","schema","src","type","init","data","videoTexture","THREE","VideoTexture","alphaTexture","format","RGBAFormat","AlphaFormat","transparent","this","material","ShaderMaterial","vertexShader","fragmentShader","uniforms","value"],"mappings":"AAAAA,OAAOC,eAAe,oBAAqB,CACzCC,OAAQ,CACNC,IAAK,CAAEC,KAAM,QAGfC,KAAM,SAAUC,GACd,IAAMC,EAAe,IAAIC,MAAMC,aAAaH,EAAKH,KAC3CO,EAAe,IAAIF,MAAMC,aAAaH,EAAKH,KAEjDI,EAAaI,OAASH,MAAMI,WAC5BF,EAAaC,OAASH,MAAMK,YAC5BP,EAAKQ,aAAc,EAEnBC,KAAKC,SAAW,IAAIR,MAAMS,eAAe,CACvCC,aAAY,0LAQZC,eAWC,kVACDC,SAAU,CACRb,aAAc,CAAEH,KAAM,IAAKiB,MAAOd,GAClCG,aAAc,CAAEN,KAAM,IAAKiB,MAAOX,IAEpCI,aAAa,GAEjB"} \ No newline at end of file +{"version":3,"file":"aframe-transparent-video-shader.cjs","sources":["../index.js"],"sourcesContent":["AFRAME.registerShader('transparent-video', {\n schema: {\n src: { type: 'map' },\n },\n\n applyWebmShader: function(videoEl) {\n const videoTexture = new THREE.VideoTexture(videoEl);\n\n videoTexture.format = THREE.RGBAFormat;\n\n this.material = new THREE.MeshBasicMaterial({\n map: videoTexture, transparent: true,\n });\n },\n \n applyHEVCShader: function(videoEl) {\n const videoTexture = new THREE.VideoTexture(videoEl);\n const alphaTexture = new THREE.VideoTexture(videoEl);\n\n videoTexture.format = THREE.RGBAFormat;\n alphaTexture.format = THREE.AlphaFormat;\n \n this.material = new THREE.ShaderMaterial({\n vertexShader: `\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n `,\n uniforms: {\n videoTexture: { type: 't', value: videoTexture },\n alphaTexture: { type: 't', value: alphaTexture }\n },\n transparent: true\n });\n },\n \n init: function (data) {\n const videoEl = data.src;\n const videoUrl = new URL(videoEl.currentSrc);\n const splitedUrl = videoUrl.pathname.split('.');\n const videoType = splitedUrl[splitedUrl.length - 1]?.toLowerCase();\n\n data.transparent = true;\n \n if (videoType === 'webm') {\n this.applyWebmShader(videoEl);\n } else {\n this.applyHEVCShader(videoEl);\n }\n },\n});"],"names":["AFRAME","registerShader","schema","src","type","applyWebmShader","videoEl","videoTexture","THREE","VideoTexture","format","RGBAFormat","this","material","MeshBasicMaterial","map","transparent","applyHEVCShader","alphaTexture","AlphaFormat","ShaderMaterial","vertexShader","fragmentShader","uniforms","value","init","data","_splitedUrl","splitedUrl","URL","currentSrc","pathname","split","videoType","length","toLowerCase"],"mappings":"AAAAA,OAAOC,eAAe,oBAAqB,CACzCC,OAAQ,CACNC,IAAK,CAAEC,KAAM,QAGfC,gBAAiB,SAASC,GACxB,IAAMC,EAAe,IAAIC,MAAMC,aAAaH,GAE5CC,EAAaG,OAASF,MAAMG,WAE5BC,KAAKC,SAAW,IAAIL,MAAMM,kBAAkB,CAC1CC,IAAKR,EAAcS,aAAa,GAEpC,EAEAC,gBAAiB,SAASX,GACxB,IAAMC,EAAe,IAAIC,MAAMC,aAAaH,GACtCY,EAAe,IAAIV,MAAMC,aAAaH,GAE5CC,EAAaG,OAASF,MAAMG,WAC5BO,EAAaR,OAASF,MAAMW,YAE5BP,KAAKC,SAAW,IAAIL,MAAMY,eAAe,CACvCC,aAOC,0LACDC,eAAc,kVAYdC,SAAU,CACRhB,aAAc,CAAEH,KAAM,IAAKoB,MAAOjB,GAClCW,aAAc,CAAEd,KAAM,IAAKoB,MAAON,IAEpCF,aAAa,GAEjB,EAEAS,KAAM,SAAUC,GAAM,IAAAC,EACdrB,EAAUoB,EAAKvB,IAEfyB,EADW,IAAIC,IAAIvB,EAAQwB,YACLC,SAASC,MAAM,KACrCC,EAAYN,OAAHA,EAAGC,EAAWA,EAAWM,OAAS,SAA/BP,EAAAA,EAAmCQ,cAErDT,EAAKV,aAAc,EAED,SAAdiB,EACFrB,KAAKP,gBAAgBC,GAErBM,KAAKK,gBAAgBX,EAEzB"} \ No newline at end of file diff --git a/dist/aframe-transparent-video-shader.esm.js b/dist/aframe-transparent-video-shader.esm.js deleted file mode 100644 index 27cb87e..0000000 --- a/dist/aframe-transparent-video-shader.esm.js +++ /dev/null @@ -1,2 +0,0 @@ -AFRAME.registerShader("transparent-video",{schema:{src:{type:"map"}},init:function(e){var r=new THREE.VideoTexture(e.src),a=new THREE.VideoTexture(e.src);r.format=THREE.RGBAFormat,a.format=THREE.AlphaFormat,e.transparent=!0,this.material=new THREE.ShaderMaterial({vertexShader:"\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n ",fragmentShader:"\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n ",uniforms:{videoTexture:{type:"t",value:r},alphaTexture:{type:"t",value:a}},transparent:!0})}}); -//# sourceMappingURL=aframe-transparent-video-shader.esm.js.map diff --git a/dist/aframe-transparent-video-shader.esm.js.map b/dist/aframe-transparent-video-shader.esm.js.map deleted file mode 100644 index b6c1925..0000000 --- a/dist/aframe-transparent-video-shader.esm.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"aframe-transparent-video-shader.esm.js","sources":["../index.js"],"sourcesContent":["AFRAME.registerShader('transparent-video', {\n schema: {\n src: { type: 'map' },\n },\n\n init: function (data) {\n const videoTexture = new THREE.VideoTexture(data.src);\n const alphaTexture = new THREE.VideoTexture(data.src);\n\n videoTexture.format = THREE.RGBAFormat;\n alphaTexture.format = THREE.AlphaFormat;\n data.transparent = true;\n\n this.material = new THREE.ShaderMaterial({\n vertexShader: `\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n `,\n uniforms: {\n videoTexture: { type: 't', value: videoTexture },\n alphaTexture: { type: 't', value: alphaTexture },\n },\n transparent: true,\n });\n },\n});"],"names":["AFRAME","registerShader","schema","src","type","init","data","videoTexture","THREE","VideoTexture","alphaTexture","format","RGBAFormat","AlphaFormat","transparent","this","material","ShaderMaterial","vertexShader","fragmentShader","uniforms","value"],"mappings":"AAAAA,OAAOC,eAAe,oBAAqB,CACzCC,OAAQ,CACNC,IAAK,CAAEC,KAAM,QAGfC,KAAM,SAAUC,GACd,IAAMC,EAAe,IAAIC,MAAMC,aAAaH,EAAKH,KAC3CO,EAAe,IAAIF,MAAMC,aAAaH,EAAKH,KAEjDI,EAAaI,OAASH,MAAMI,WAC5BF,EAAaC,OAASH,MAAMK,YAC5BP,EAAKQ,aAAc,EAEnBC,KAAKC,SAAW,IAAIR,MAAMS,eAAe,CACvCC,aAAY,0LAQZC,eAWC,kVACDC,SAAU,CACRb,aAAc,CAAEH,KAAM,IAAKiB,MAAOd,GAClCG,aAAc,CAAEN,KAAM,IAAKiB,MAAOX,IAEpCI,aAAa,GAEjB"} \ No newline at end of file diff --git a/dist/aframe-transparent-video-shader.modern.js b/dist/aframe-transparent-video-shader.modern.js index b552f50..da92321 100644 --- a/dist/aframe-transparent-video-shader.modern.js +++ b/dist/aframe-transparent-video-shader.modern.js @@ -1,2 +1,2 @@ -AFRAME.registerShader("transparent-video",{schema:{src:{type:"map"}},init:function(e){const r=new THREE.VideoTexture(e.src),a=new THREE.VideoTexture(e.src);r.format=THREE.RGBAFormat,a.format=THREE.AlphaFormat,e.transparent=!0,this.material=new THREE.ShaderMaterial({vertexShader:"\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n ",fragmentShader:"\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n ",uniforms:{videoTexture:{type:"t",value:r},alphaTexture:{type:"t",value:a}},transparent:!0})}}); +AFRAME.registerShader("transparent-video",{schema:{src:{type:"map"}},applyWebmShader:function(e){const a=new THREE.VideoTexture(e);a.format=THREE.RGBAFormat,this.material=new THREE.MeshBasicMaterial({map:a,transparent:!0})},applyHEVCShader:function(e){const a=new THREE.VideoTexture(e),r=new THREE.VideoTexture(e);a.format=THREE.RGBAFormat,r.format=THREE.AlphaFormat,this.material=new THREE.ShaderMaterial({vertexShader:"\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n ",fragmentShader:"\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n ",uniforms:{videoTexture:{type:"t",value:a},alphaTexture:{type:"t",value:r}},transparent:!0})},init:function(e){var a;const r=e.src,t=new URL(r.currentSrc).pathname.split("."),n=null==(a=t[t.length-1])?void 0:a.toLowerCase();e.transparent=!0,"webm"===n?this.applyWebmShader(r):this.applyHEVCShader(r)}}); //# sourceMappingURL=aframe-transparent-video-shader.modern.js.map diff --git a/dist/aframe-transparent-video-shader.modern.js.map b/dist/aframe-transparent-video-shader.modern.js.map index 89eba69..4809323 100644 --- a/dist/aframe-transparent-video-shader.modern.js.map +++ b/dist/aframe-transparent-video-shader.modern.js.map @@ -1 +1 @@ -{"version":3,"file":"aframe-transparent-video-shader.modern.js","sources":["../index.js"],"sourcesContent":["AFRAME.registerShader('transparent-video', {\n schema: {\n src: { type: 'map' },\n },\n\n init: function (data) {\n const videoTexture = new THREE.VideoTexture(data.src);\n const alphaTexture = new THREE.VideoTexture(data.src);\n\n videoTexture.format = THREE.RGBAFormat;\n alphaTexture.format = THREE.AlphaFormat;\n data.transparent = true;\n\n this.material = new THREE.ShaderMaterial({\n vertexShader: `\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n `,\n uniforms: {\n videoTexture: { type: 't', value: videoTexture },\n alphaTexture: { type: 't', value: alphaTexture },\n },\n transparent: true,\n });\n },\n});"],"names":["AFRAME","registerShader","schema","src","type","init","data","videoTexture","THREE","VideoTexture","alphaTexture","format","RGBAFormat","AlphaFormat","transparent","this","material","ShaderMaterial","vertexShader","fragmentShader","uniforms","value"],"mappings":"AAAAA,OAAOC,eAAe,oBAAqB,CACzCC,OAAQ,CACNC,IAAK,CAAEC,KAAM,QAGfC,KAAM,SAAUC,GACd,MAAMC,EAAe,IAAIC,MAAMC,aAAaH,EAAKH,KAC3CO,EAAe,IAAIF,MAAMC,aAAaH,EAAKH,KAEjDI,EAAaI,OAASH,MAAMI,WAC5BF,EAAaC,OAASH,MAAMK,YAC5BP,EAAKQ,aAAc,EAEnBC,KAAKC,SAAW,IAAIR,MAAMS,eAAe,CACvCC,aAAe,0LAQfC,eAAiB,kVAYjBC,SAAU,CACRb,aAAc,CAAEH,KAAM,IAAKiB,MAAOd,GAClCG,aAAc,CAAEN,KAAM,IAAKiB,MAAOX,IAEpCI,aAAa,GAEjB"} \ No newline at end of file +{"version":3,"file":"aframe-transparent-video-shader.modern.js","sources":["../index.js"],"sourcesContent":["AFRAME.registerShader('transparent-video', {\n schema: {\n src: { type: 'map' },\n },\n\n applyWebmShader: function(videoEl) {\n const videoTexture = new THREE.VideoTexture(videoEl);\n\n videoTexture.format = THREE.RGBAFormat;\n\n this.material = new THREE.MeshBasicMaterial({\n map: videoTexture, transparent: true,\n });\n },\n \n applyHEVCShader: function(videoEl) {\n const videoTexture = new THREE.VideoTexture(videoEl);\n const alphaTexture = new THREE.VideoTexture(videoEl);\n\n videoTexture.format = THREE.RGBAFormat;\n alphaTexture.format = THREE.AlphaFormat;\n \n this.material = new THREE.ShaderMaterial({\n vertexShader: `\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n `,\n uniforms: {\n videoTexture: { type: 't', value: videoTexture },\n alphaTexture: { type: 't', value: alphaTexture }\n },\n transparent: true\n });\n },\n \n init: function (data) {\n const videoEl = data.src;\n const videoUrl = new URL(videoEl.currentSrc);\n const splitedUrl = videoUrl.pathname.split('.');\n const videoType = splitedUrl[splitedUrl.length - 1]?.toLowerCase();\n\n data.transparent = true;\n \n if (videoType === 'webm') {\n this.applyWebmShader(videoEl);\n } else {\n this.applyHEVCShader(videoEl);\n }\n },\n});"],"names":["AFRAME","registerShader","schema","src","type","applyWebmShader","videoEl","videoTexture","THREE","VideoTexture","format","RGBAFormat","this","material","MeshBasicMaterial","map","transparent","applyHEVCShader","alphaTexture","AlphaFormat","ShaderMaterial","vertexShader","fragmentShader","uniforms","value","init","data","_splitedUrl","splitedUrl","URL","currentSrc","pathname","split","videoType","length","toLowerCase"],"mappings":"AAAAA,OAAOC,eAAe,oBAAqB,CACzCC,OAAQ,CACNC,IAAK,CAAEC,KAAM,QAGfC,gBAAiB,SAASC,GACxB,MAAMC,EAAe,IAAIC,MAAMC,aAAaH,GAE5CC,EAAaG,OAASF,MAAMG,WAE5BC,KAAKC,SAAW,IAAIL,MAAMM,kBAAkB,CAC1CC,IAAKR,EAAcS,aAAa,GAEpC,EAEAC,gBAAiB,SAASX,GACxB,MAAMC,EAAe,IAAIC,MAAMC,aAAaH,GACtCY,EAAe,IAAIV,MAAMC,aAAaH,GAE5CC,EAAaG,OAASF,MAAMG,WAC5BO,EAAaR,OAASF,MAAMW,YAE5BP,KAAKC,SAAW,IAAIL,MAAMY,eAAe,CACvCC,aAAe,0LAQfC,eAAiB,kVAYjBC,SAAU,CACRhB,aAAc,CAAEH,KAAM,IAAKoB,MAAOjB,GAClCW,aAAc,CAAEd,KAAM,IAAKoB,MAAON,IAEpCF,aAAa,GAEjB,EAEAS,KAAM,SAAUC,GAAM,IAAAC,EACpB,MAAMrB,EAAUoB,EAAKvB,IAEfyB,EADW,IAAIC,IAAIvB,EAAQwB,YACLC,SAASC,MAAM,KACrCC,EAAYN,OAAHA,EAAGC,EAAWA,EAAWM,OAAS,SAA/BP,EAAAA,EAAmCQ,cAErDT,EAAKV,aAAc,EAED,SAAdiB,EACFrB,KAAKP,gBAAgBC,GAErBM,KAAKK,gBAAgBX,EAEzB"} \ No newline at end of file diff --git a/dist/aframe-transparent-video-shader.module.js b/dist/aframe-transparent-video-shader.module.js index ca3a479..d36c468 100644 --- a/dist/aframe-transparent-video-shader.module.js +++ b/dist/aframe-transparent-video-shader.module.js @@ -1,2 +1,2 @@ -AFRAME.registerShader("transparent-video",{schema:{src:{type:"map"}},init:function(e){var r=new THREE.VideoTexture(e.src),a=new THREE.VideoTexture(e.src);r.format=THREE.RGBAFormat,a.format=THREE.AlphaFormat,e.transparent=!0,this.material=new THREE.ShaderMaterial({vertexShader:"\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n ",fragmentShader:"\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n ",uniforms:{videoTexture:{type:"t",value:r},alphaTexture:{type:"t",value:a}},transparent:!0})}}); +AFRAME.registerShader("transparent-video",{schema:{src:{type:"map"}},applyWebmShader:function(e){var a=new THREE.VideoTexture(e);a.format=THREE.RGBAFormat,this.material=new THREE.MeshBasicMaterial({map:a,transparent:!0})},applyHEVCShader:function(e){var a=new THREE.VideoTexture(e),r=new THREE.VideoTexture(e);a.format=THREE.RGBAFormat,r.format=THREE.AlphaFormat,this.material=new THREE.ShaderMaterial({vertexShader:"\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n ",fragmentShader:"\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n ",uniforms:{videoTexture:{type:"t",value:a},alphaTexture:{type:"t",value:r}},transparent:!0})},init:function(e){var a,r=e.src,t=new URL(r.currentSrc).pathname.split("."),n=null==(a=t[t.length-1])?void 0:a.toLowerCase();e.transparent=!0,"webm"===n?this.applyWebmShader(r):this.applyHEVCShader(r)}}); //# sourceMappingURL=aframe-transparent-video-shader.module.js.map diff --git a/dist/aframe-transparent-video-shader.module.js.map b/dist/aframe-transparent-video-shader.module.js.map index 5b5b4a8..7f462ff 100644 --- a/dist/aframe-transparent-video-shader.module.js.map +++ b/dist/aframe-transparent-video-shader.module.js.map @@ -1 +1 @@ -{"version":3,"file":"aframe-transparent-video-shader.module.js","sources":["../index.js"],"sourcesContent":["AFRAME.registerShader('transparent-video', {\n schema: {\n src: { type: 'map' },\n },\n\n init: function (data) {\n const videoTexture = new THREE.VideoTexture(data.src);\n const alphaTexture = new THREE.VideoTexture(data.src);\n\n videoTexture.format = THREE.RGBAFormat;\n alphaTexture.format = THREE.AlphaFormat;\n data.transparent = true;\n\n this.material = new THREE.ShaderMaterial({\n vertexShader: `\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n `,\n uniforms: {\n videoTexture: { type: 't', value: videoTexture },\n alphaTexture: { type: 't', value: alphaTexture },\n },\n transparent: true,\n });\n },\n});"],"names":["AFRAME","registerShader","schema","src","type","init","data","videoTexture","THREE","VideoTexture","alphaTexture","format","RGBAFormat","AlphaFormat","transparent","this","material","ShaderMaterial","vertexShader","fragmentShader","uniforms","value"],"mappings":"AAAAA,OAAOC,eAAe,oBAAqB,CACzCC,OAAQ,CACNC,IAAK,CAAEC,KAAM,QAGfC,KAAM,SAAUC,GACd,IAAMC,EAAe,IAAIC,MAAMC,aAAaH,EAAKH,KAC3CO,EAAe,IAAIF,MAAMC,aAAaH,EAAKH,KAEjDI,EAAaI,OAASH,MAAMI,WAC5BF,EAAaC,OAASH,MAAMK,YAC5BP,EAAKQ,aAAc,EAEnBC,KAAKC,SAAW,IAAIR,MAAMS,eAAe,CACvCC,aAAY,0LAQZC,eAWC,kVACDC,SAAU,CACRb,aAAc,CAAEH,KAAM,IAAKiB,MAAOd,GAClCG,aAAc,CAAEN,KAAM,IAAKiB,MAAOX,IAEpCI,aAAa,GAEjB"} \ No newline at end of file +{"version":3,"file":"aframe-transparent-video-shader.module.js","sources":["../index.js"],"sourcesContent":["AFRAME.registerShader('transparent-video', {\n schema: {\n src: { type: 'map' },\n },\n\n applyWebmShader: function(videoEl) {\n const videoTexture = new THREE.VideoTexture(videoEl);\n\n videoTexture.format = THREE.RGBAFormat;\n\n this.material = new THREE.MeshBasicMaterial({\n map: videoTexture, transparent: true,\n });\n },\n \n applyHEVCShader: function(videoEl) {\n const videoTexture = new THREE.VideoTexture(videoEl);\n const alphaTexture = new THREE.VideoTexture(videoEl);\n\n videoTexture.format = THREE.RGBAFormat;\n alphaTexture.format = THREE.AlphaFormat;\n \n this.material = new THREE.ShaderMaterial({\n vertexShader: `\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n `,\n uniforms: {\n videoTexture: { type: 't', value: videoTexture },\n alphaTexture: { type: 't', value: alphaTexture }\n },\n transparent: true\n });\n },\n \n init: function (data) {\n const videoEl = data.src;\n const videoUrl = new URL(videoEl.currentSrc);\n const splitedUrl = videoUrl.pathname.split('.');\n const videoType = splitedUrl[splitedUrl.length - 1]?.toLowerCase();\n\n data.transparent = true;\n \n if (videoType === 'webm') {\n this.applyWebmShader(videoEl);\n } else {\n this.applyHEVCShader(videoEl);\n }\n },\n});"],"names":["AFRAME","registerShader","schema","src","type","applyWebmShader","videoEl","videoTexture","THREE","VideoTexture","format","RGBAFormat","this","material","MeshBasicMaterial","map","transparent","applyHEVCShader","alphaTexture","AlphaFormat","ShaderMaterial","vertexShader","fragmentShader","uniforms","value","init","data","_splitedUrl","splitedUrl","URL","currentSrc","pathname","split","videoType","length","toLowerCase"],"mappings":"AAAAA,OAAOC,eAAe,oBAAqB,CACzCC,OAAQ,CACNC,IAAK,CAAEC,KAAM,QAGfC,gBAAiB,SAASC,GACxB,IAAMC,EAAe,IAAIC,MAAMC,aAAaH,GAE5CC,EAAaG,OAASF,MAAMG,WAE5BC,KAAKC,SAAW,IAAIL,MAAMM,kBAAkB,CAC1CC,IAAKR,EAAcS,aAAa,GAEpC,EAEAC,gBAAiB,SAASX,GACxB,IAAMC,EAAe,IAAIC,MAAMC,aAAaH,GACtCY,EAAe,IAAIV,MAAMC,aAAaH,GAE5CC,EAAaG,OAASF,MAAMG,WAC5BO,EAAaR,OAASF,MAAMW,YAE5BP,KAAKC,SAAW,IAAIL,MAAMY,eAAe,CACvCC,aAOC,0LACDC,eAAc,kVAYdC,SAAU,CACRhB,aAAc,CAAEH,KAAM,IAAKoB,MAAOjB,GAClCW,aAAc,CAAEd,KAAM,IAAKoB,MAAON,IAEpCF,aAAa,GAEjB,EAEAS,KAAM,SAAUC,GAAM,IAAAC,EACdrB,EAAUoB,EAAKvB,IAEfyB,EADW,IAAIC,IAAIvB,EAAQwB,YACLC,SAASC,MAAM,KACrCC,EAAYN,OAAHA,EAAGC,EAAWA,EAAWM,OAAS,SAA/BP,EAAAA,EAAmCQ,cAErDT,EAAKV,aAAc,EAED,SAAdiB,EACFrB,KAAKP,gBAAgBC,GAErBM,KAAKK,gBAAgBX,EAEzB"} \ No newline at end of file diff --git a/dist/aframe-transparent-video-shader.umd.js b/dist/aframe-transparent-video-shader.umd.js index 65a1ccc..8fd3777 100644 --- a/dist/aframe-transparent-video-shader.umd.js +++ b/dist/aframe-transparent-video-shader.umd.js @@ -1,2 +1,2 @@ -!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){AFRAME.registerShader("transparent-video",{schema:{src:{type:"map"}},init:function(e){var r=new THREE.VideoTexture(e.src),n=new THREE.VideoTexture(e.src);r.format=THREE.RGBAFormat,n.format=THREE.AlphaFormat,e.transparent=!0,this.material=new THREE.ShaderMaterial({vertexShader:"\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n ",fragmentShader:"\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n ",uniforms:{videoTexture:{type:"t",value:r},alphaTexture:{type:"t",value:n}},transparent:!0})}})}); +!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){AFRAME.registerShader("transparent-video",{schema:{src:{type:"map"}},applyWebmShader:function(e){var a=new THREE.VideoTexture(e);a.format=THREE.RGBAFormat,this.material=new THREE.MeshBasicMaterial({map:a,transparent:!0})},applyHEVCShader:function(e){var a=new THREE.VideoTexture(e),r=new THREE.VideoTexture(e);a.format=THREE.RGBAFormat,r.format=THREE.AlphaFormat,this.material=new THREE.ShaderMaterial({vertexShader:"\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n ",fragmentShader:"\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n ",uniforms:{videoTexture:{type:"t",value:a},alphaTexture:{type:"t",value:r}},transparent:!0})},init:function(e){var a,r=e.src,n=new URL(r.currentSrc).pathname.split("."),t=null==(a=n[n.length-1])?void 0:a.toLowerCase();e.transparent=!0,"webm"===t?this.applyWebmShader(r):this.applyHEVCShader(r)}})}); //# sourceMappingURL=aframe-transparent-video-shader.umd.js.map diff --git a/dist/aframe-transparent-video-shader.umd.js.map b/dist/aframe-transparent-video-shader.umd.js.map index 24106ef..bfe0044 100644 --- a/dist/aframe-transparent-video-shader.umd.js.map +++ b/dist/aframe-transparent-video-shader.umd.js.map @@ -1 +1 @@ -{"version":3,"file":"aframe-transparent-video-shader.umd.js","sources":["../index.js"],"sourcesContent":["AFRAME.registerShader('transparent-video', {\n schema: {\n src: { type: 'map' },\n },\n\n init: function (data) {\n const videoTexture = new THREE.VideoTexture(data.src);\n const alphaTexture = new THREE.VideoTexture(data.src);\n\n videoTexture.format = THREE.RGBAFormat;\n alphaTexture.format = THREE.AlphaFormat;\n data.transparent = true;\n\n this.material = new THREE.ShaderMaterial({\n vertexShader: `\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n `,\n uniforms: {\n videoTexture: { type: 't', value: videoTexture },\n alphaTexture: { type: 't', value: alphaTexture },\n },\n transparent: true,\n });\n },\n});"],"names":["AFRAME","registerShader","schema","src","type","init","data","videoTexture","THREE","VideoTexture","alphaTexture","format","RGBAFormat","AlphaFormat","transparent","this","material","ShaderMaterial","vertexShader","fragmentShader","uniforms","value"],"mappings":"6EAAAA,OAAOC,eAAe,oBAAqB,CACzCC,OAAQ,CACNC,IAAK,CAAEC,KAAM,QAGfC,KAAM,SAAUC,GACd,IAAMC,EAAe,IAAIC,MAAMC,aAAaH,EAAKH,KAC3CO,EAAe,IAAIF,MAAMC,aAAaH,EAAKH,KAEjDI,EAAaI,OAASH,MAAMI,WAC5BF,EAAaC,OAASH,MAAMK,YAC5BP,EAAKQ,aAAc,EAEnBC,KAAKC,SAAW,IAAIR,MAAMS,eAAe,CACvCC,aAAY,0LAQZC,eAWC,kVACDC,SAAU,CACRb,aAAc,CAAEH,KAAM,IAAKiB,MAAOd,GAClCG,aAAc,CAAEN,KAAM,IAAKiB,MAAOX,IAEpCI,aAAa,GAEjB"} \ No newline at end of file +{"version":3,"file":"aframe-transparent-video-shader.umd.js","sources":["../index.js"],"sourcesContent":["AFRAME.registerShader('transparent-video', {\n schema: {\n src: { type: 'map' },\n },\n\n applyWebmShader: function(videoEl) {\n const videoTexture = new THREE.VideoTexture(videoEl);\n\n videoTexture.format = THREE.RGBAFormat;\n\n this.material = new THREE.MeshBasicMaterial({\n map: videoTexture, transparent: true,\n });\n },\n \n applyHEVCShader: function(videoEl) {\n const videoTexture = new THREE.VideoTexture(videoEl);\n const alphaTexture = new THREE.VideoTexture(videoEl);\n\n videoTexture.format = THREE.RGBAFormat;\n alphaTexture.format = THREE.AlphaFormat;\n \n this.material = new THREE.ShaderMaterial({\n vertexShader: `\n varying vec2 vUv;\n \n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n `,\n fragmentShader: `\n varying vec2 vUv;\n uniform sampler2D videoTexture;\n uniform sampler2D alphaTexture;\n\n void main() {\n vec4 videoColor = texture2D(videoTexture, vUv);\n vec4 alphaColor = texture2D(alphaTexture, vUv);\n\n gl_FragColor = vec4(videoColor.rgb, alphaColor.a);\n }\n `,\n uniforms: {\n videoTexture: { type: 't', value: videoTexture },\n alphaTexture: { type: 't', value: alphaTexture }\n },\n transparent: true\n });\n },\n \n init: function (data) {\n const videoEl = data.src;\n const videoUrl = new URL(videoEl.currentSrc);\n const splitedUrl = videoUrl.pathname.split('.');\n const videoType = splitedUrl[splitedUrl.length - 1]?.toLowerCase();\n\n data.transparent = true;\n \n if (videoType === 'webm') {\n this.applyWebmShader(videoEl);\n } else {\n this.applyHEVCShader(videoEl);\n }\n },\n});"],"names":["AFRAME","registerShader","schema","src","type","applyWebmShader","videoEl","videoTexture","THREE","VideoTexture","format","RGBAFormat","this","material","MeshBasicMaterial","map","transparent","applyHEVCShader","alphaTexture","AlphaFormat","ShaderMaterial","vertexShader","fragmentShader","uniforms","value","init","data","_splitedUrl","splitedUrl","URL","currentSrc","pathname","split","videoType","length","toLowerCase"],"mappings":"6EAAAA,OAAOC,eAAe,oBAAqB,CACzCC,OAAQ,CACNC,IAAK,CAAEC,KAAM,QAGfC,gBAAiB,SAASC,GACxB,IAAMC,EAAe,IAAIC,MAAMC,aAAaH,GAE5CC,EAAaG,OAASF,MAAMG,WAE5BC,KAAKC,SAAW,IAAIL,MAAMM,kBAAkB,CAC1CC,IAAKR,EAAcS,aAAa,GAEpC,EAEAC,gBAAiB,SAASX,GACxB,IAAMC,EAAe,IAAIC,MAAMC,aAAaH,GACtCY,EAAe,IAAIV,MAAMC,aAAaH,GAE5CC,EAAaG,OAASF,MAAMG,WAC5BO,EAAaR,OAASF,MAAMW,YAE5BP,KAAKC,SAAW,IAAIL,MAAMY,eAAe,CACvCC,aAOC,0LACDC,eAAc,kVAYdC,SAAU,CACRhB,aAAc,CAAEH,KAAM,IAAKoB,MAAOjB,GAClCW,aAAc,CAAEd,KAAM,IAAKoB,MAAON,IAEpCF,aAAa,GAEjB,EAEAS,KAAM,SAAUC,GAAM,IAAAC,EACdrB,EAAUoB,EAAKvB,IAEfyB,EADW,IAAIC,IAAIvB,EAAQwB,YACLC,SAASC,MAAM,KACrCC,EAAYN,OAAHA,EAAGC,EAAWA,EAAWM,OAAS,SAA/BP,EAAAA,EAAmCQ,cAErDT,EAAKV,aAAc,EAED,SAAdiB,EACFrB,KAAKP,gBAAgBC,GAErBM,KAAKK,gBAAgBX,EAEzB"} \ No newline at end of file diff --git a/index.js b/index.js index 6c5e623..a70ca72 100644 --- a/index.js +++ b/index.js @@ -3,14 +3,23 @@ AFRAME.registerShader('transparent-video', { src: { type: 'map' }, }, - init: function (data) { - const videoTexture = new THREE.VideoTexture(data.src); - const alphaTexture = new THREE.VideoTexture(data.src); + applyWebmShader: function(videoEl) { + const videoTexture = new THREE.VideoTexture(videoEl); videoTexture.format = THREE.RGBAFormat; - alphaTexture.format = THREE.AlphaFormat; - data.transparent = true; + this.material = new THREE.MeshBasicMaterial({ + map: videoTexture, transparent: true, + }); + }, + + applyHEVCShader: function(videoEl) { + const videoTexture = new THREE.VideoTexture(videoEl); + const alphaTexture = new THREE.VideoTexture(videoEl); + + videoTexture.format = THREE.RGBAFormat; + alphaTexture.format = THREE.AlphaFormat; + this.material = new THREE.ShaderMaterial({ vertexShader: ` varying vec2 vUv; @@ -34,9 +43,24 @@ AFRAME.registerShader('transparent-video', { `, uniforms: { videoTexture: { type: 't', value: videoTexture }, - alphaTexture: { type: 't', value: alphaTexture }, + alphaTexture: { type: 't', value: alphaTexture } }, - transparent: true, + transparent: true }); }, + + init: function (data) { + const videoEl = data.src; + const videoUrl = new URL(videoEl.currentSrc); + const splitedUrl = videoUrl.pathname.split('.'); + const videoType = splitedUrl[splitedUrl.length - 1]?.toLowerCase(); + + data.transparent = true; + + if (videoType === 'webm') { + this.applyWebmShader(videoEl); + } else { + this.applyHEVCShader(videoEl); + } + }, }); \ No newline at end of file diff --git a/package.json b/package.json index ee3eb1c..749c62d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aframe-transparent-video-shader", - "version": "1.0.5", + "version": "1.0.6", "description": "A shader to display videos with transparency (alpha channel) for A-Frame.", "type": "module", "source": "index.js",