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;