diff --git a/three.js/examples/markercloak.html b/three.js/examples/markercloak.html
index 43b4967c75d656b597f91ab9db0412302212f70b..542fd64489c5e035f1f897863dbcaa0c87ca9acf 100644
--- a/three.js/examples/markercloak.html
+++ b/three.js/examples/markercloak.html
@@ -154,26 +154,29 @@
// TODO to remove if webgl2 - better visual ?
videoTexture.minFilter = THREE.NearestFilter
- var markerCache = new THREEx.ArMarkerCache(videoTexture);
- markerRoot.add(markerCache.object3d)
- function toggleCache(){
- if( markerCache.object3d.parent ){
- markerRoot.remove(markerCache.object3d)
+ var markerCloak = new THREEx.ArMarkerCloak(videoTexture);
+ markerRoot.add(markerCloak.object3d)
+
+ // toggleCloak on click/keypress
+ function toggleCloak(){
+ if( markerCloak.object3d.parent ){
+ markerRoot.remove(markerCloak.object3d)
}else{
- markerRoot.add(markerCache.object3d)
+ markerRoot.add(markerCloak.object3d)
}
}
- document.body.addEventListener('click', toggleCache)
+ document.body.addEventListener('click', toggleCloak)
+ document.body.addEventListener('keypress', toggleCloak)
onRenderFcts.push(function(){
- markerCache.update(markerRoot.matrix, camera.projectionMatrix)
+ markerCloak.update(markerRoot.matrix, camera.projectionMatrix)
})
if( debugEnabled === true ){
- orthoScene.add(markerCache.orthoMesh)
+ orthoScene.add(markerCloak.orthoMesh)
onRenderFcts.push(function(){
- markerCache.orthoMesh.visible = markerRoot.visible
+ markerCloak.orthoMesh.visible = markerRoot.visible
})
}
diff --git a/three.js/threex-armarkercloak.js b/three.js/threex-armarkercloak.js
index d7cd859bbd5daae34235487635116a1eaa824f8b..63009a05628fd8df47380335b47a8fe544df1493 100644
--- a/three.js/threex-armarkercloak.js
+++ b/three.js/threex-armarkercloak.js
@@ -6,15 +6,15 @@ var THREEx = THREEx || {}
* - cloakSegmentsHeight
* - remove all mentions of cache, for cloak
*/
-THREEx.ArMarkerCache = function(videoTexture){
+THREEx.ArMarkerCloak = function(videoTexture){
var updateInShaderEnabled = true
// build cloakMesh
// TODO if webgl2 use repeat warp, and not multi segment, this will reduce the geometry to draw
var geometry = new THREE.PlaneGeometry(1.3+0.25,1.85+0.25, 1, 8).translate(0,-0.3,0)
var material = new THREE.ShaderMaterial( {
- vertexShader: THREEx.ArMarkerCache.vertexShader,
- fragmentShader: THREEx.ArMarkerCache.fragmentShader,
+ vertexShader: THREEx.ArMarkerCloak.vertexShader,
+ fragmentShader: THREEx.ArMarkerCloak.fragmentShader,
uniforms: {
texture: {
value: videoTexture
@@ -167,7 +167,7 @@ THREEx.ArMarkerCache = function(videoTexture){
// Shaders
//////////////////////////////////////////////////////////////////////////////
-THREEx.ArMarkerCache.markerSpaceShaderFunction = `
+THREEx.ArMarkerCloak.markerSpaceShaderFunction = `
vec2 transformUvToMarkerSpace(vec2 originalUv){
vec3 transformedUv;
// set transformedUv - from UV coord to clip coord
@@ -191,7 +191,7 @@ THREEx.ArMarkerCache.markerSpaceShaderFunction = `
}
`
-THREEx.ArMarkerCache.vertexShader = THREEx.ArMarkerCache.markerSpaceShaderFunction + `
+THREEx.ArMarkerCloak.vertexShader = THREEx.ArMarkerCloak.markerSpaceShaderFunction + `
varying vec2 vUv;
void main(){
@@ -208,7 +208,7 @@ THREEx.ArMarkerCache.vertexShader = THREEx.ArMarkerCache.markerSpaceShaderFuncti
}
`;
-THREEx.ArMarkerCache.fragmentShader = `
+THREEx.ArMarkerCloak.fragmentShader = `
varying vec2 vUv;
uniform sampler2D texture;