| Server IP : 162.214.74.102 / Your IP : 216.73.217.114 Web Server : Apache System : Linux dedi-4363141.lrsys.com.br 3.10.0-1160.119.1.el7.tuxcare.els25.x86_64 #1 SMP Wed Oct 1 17:37:27 UTC 2025 x86_64 User : lrsys ( 1015) PHP Version : 5.6.40 Disable Function : exec,passthru,shell_exec,system MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/lrsys/www/lrsys_apps/marisol/AR/three.js/demos/liquid-marker/ |
Upload File : |
<!DOCTYPE html>
<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
<!-- three.js library -->
<script src='../vendor/three.js/build/three.js'></script>
<script src='../vendor/three.js/examples/js/libs/stats.min.js'></script>
<!-- jsartookit -->
<script src='../../vendor/jsartoolkit5/build/artoolkit.min.js'></script>
<script src='../../vendor/jsartoolkit5/js/artoolkit.api.js'></script>
<!-- include threex.artoolkit -->
<script src='../../src/threex/threex-artoolkitsource.js'></script>
<script src='../../src/threex/threex-artoolkitcontext.js'></script>
<script src='../../src/threex/threex-artoolkitprofile.js'></script>
<script src='../../src/threex/threex-arbasecontrols.js'></script>
<script src='../../src/threex/threex-armarkercontrols.js'></script>
<script src='../../src/threex/threex-armarkercloak.js'></script>
<script src='./threex-arliquiqmarker.js'></script>
<script>THREEx.ArToolkitContext.baseURL = '../../'</script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace; user-select: none;'><div style='position: absolute; top: 10px; width:100%; text-align: center;z-index:1';>
<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - Liquid Marker - Click to touch the liquid.
<br/>
Code by <a href='https://twitter.com/snigelpaogat' target='_blank'>Fredrik Blomqvist</a> and
<a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
<style>
#controls {
position: fixed;
top: 0px;
right: 0px;
width:400px;
margin:10px auto;
z-index: 2;
}
#controls > div {
border-bottom:1px solid #EEE;
padding:5px 0;
}
#controls label {
width:200px;
display:inline-block;
}
#controls input {
vertical-align:middle;
}
</style>
<div id="controls" style='display:none'>
<div>
<label>Stiffness (<span id="k_slider_label">-20</span> kg / s<sup>2</sup>)</label>
<input id="k_slider" type="range" min=0 max=100 value=20></input>
</div>
<div>
<label>Damping (<span id="b_slider_label">-0.5</span> kg / s)</label>
<input id="b_slider" type="range" min=0 max=10 value=0.5 step=0.1></input>
</div>
<div>
<label>Frequency (<span id="f_slider_label">0</span>) Hz</label>
<input id="f_slider" type="range" min=0 max=10 value=0 step=0.1></input>
</div>
<div>
<label>Mass (<span id="m_slider_label">0.5</span>) kg</label>
<input id="m_slider" type="range" min=0.1 max=5 value=0.5 step=0.1></input>
</div>
</div>
<script>
//////////////////////////////////////////////////////////////////////////////////
// Init
//////////////////////////////////////////////////////////////////////////////////
// init renderer
var renderer = new THREE.WebGLRenderer({
// antialias : true,
alpha: true
});
renderer.setClearColor(new THREE.Color('lightgrey'), 0)
// renderer.setPixelRatio( 2 );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.style.position = 'absolute'
renderer.domElement.style.top = '0px'
renderer.domElement.style.left = '0px'
document.body.appendChild( renderer.domElement );
renderer.autoClear = false;
// array of functions for the rendering loop
var onRenderFcts= [];
// init scene and camera
var scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x666666 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0x887766 );
directionalLight.position.set( -1, 1, 1 ).normalize();
scene.add( directionalLight );
//////////////////////////////////////////////////////////////////////////////////
// Initialize a basic camera
//////////////////////////////////////////////////////////////////////////////////
// Create a camera
var camera = new THREE.Camera();
scene.add(camera);
var listener = new THREE.AudioListener();
camera.add( listener );
var boingSound = new THREE.Audio( listener );
var audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/140867__juskiddink__boing.wav', function( buffer ) {
boingSound.setBuffer( buffer );
// boingSound.setLoop(true);
boingSound.setVolume(0.5);
});
////////////////////////////////////////////////////////////////////////////////
// handle arToolkitSource
////////////////////////////////////////////////////////////////////////////////
var arToolkitSource = new THREEx.ArToolkitSource({
// to read from the webcam
sourceType : 'webcam',
//
// to read from an image
// sourceType : 'image',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/images/img.jpg',
// to read from a video
// sourceType : 'video',
// sourceUrl : THREEx.ArToolkitContext.baseURL + '../data/videos/headtracking.mp4',
})
arToolkitSource.init(function onReady(){
// handle resize of renderer
arToolkitSource.onResize(renderer.domElement)
})
// handle resize
window.addEventListener('resize', function(){
// handle arToolkitSource resize
arToolkitSource.onResize(renderer.domElement)
})
////////////////////////////////////////////////////////////////////////////////
// initialize arToolkitContext
////////////////////////////////////////////////////////////////////////////////
// create atToolkitContext
var arToolkitContext = new THREEx.ArToolkitContext({
cameraParametersUrl: THREEx.ArToolkitContext.baseURL + '../data/data/camera_para.dat',
detectionMode: 'mono',
imageSmoothingEnabled: false,
maxDetectionRate: 15,
canvasWidth: 80*4,
canvasHeight: 60*4,
})
// initialize it
arToolkitContext.init(function onCompleted(){
// copy projection matrix to camera
camera.projectionMatrix.copy( arToolkitContext.getProjectionMatrix() );
})
// update artoolkit on every frame
onRenderFcts.push(function(){
if( arToolkitSource.ready === false ) return
arToolkitContext.update( arToolkitSource.domElement )
})
////////////////////////////////////////////////////////////////////////////////
// Create a ArMarkerControls
////////////////////////////////////////////////////////////////////////////////
var markerRoot = new THREE.Group
scene.add(markerRoot)
var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
type : 'pattern',
patternUrl : THREEx.ArToolkitContext.baseURL+'../data/data/patt.hiro',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
})
//////////////////////////////////////////////////////////////////////////////////
// build videoTexture
//////////////////////////////////////////////////////////////////////////////////
// get videoTexture
if( arToolkitSource.domElement.nodeName === 'VIDEO' ){
var videoTexture = new THREE.VideoTexture(arToolkitSource.domElement)
// arToolkitSource.domElement.pause()
}else if( arToolkitSource.domElement.nodeName === 'IMG' ){
var videoTexture = new THREE.Texture(arToolkitSource.domElement)
videoTexture.needsUpdate = true
}else console.assert(false)
// TODO to remove if webgl2 - better visual ?
videoTexture.minFilter = THREE.NearestFilter
//////////////////////////////////////////////////////////////////////////////
// add liquidMarker
//////////////////////////////////////////////////////////////////////////////
var liquidMarker = new THREEx.ArLiquidMarker(videoTexture);
markerRoot.add(liquidMarker.object3d)
// liquidMarker.object3d.visible = false
onRenderFcts.push(function(){
liquidMarker.update()
})
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
;(function(){
var globalIntensity = liquidMarker.object3d.material.uniforms.globalIntensity
// mass spring system by the great @bkanber - standalone - a few line in a jsfiddle 😍 https://jsfiddle.net/bkanber/pDngH/
/* Spring stiffness, in kg / s^2 */
var k = -70;
var spring_length = 180;
/* Damping constant, in kg / s */
var b = -1.1;
/* Block position and velocity. */
var block = {x: 0, v: 0, mass: 0.2};
var wall = {x: 30, lx: 30, v: 0, t: 0, frequency: 0};
var period = 1/60
setInterval(function(){
/* Move the wall. */
wall.t += period;
wall.lx = wall.x;
wall.x = 30 + 70 * Math.sin(2 * Math.PI * wall.frequency * wall.t);
wall.v = (wall.x - wall.lx) / period;
var outsideControls = false
if ( outsideControls === false ){
var F_spring = k * ( (block.x - wall.x) - spring_length );
var F_damper = b * ( block.v - wall.v );
var a = ( F_spring + F_damper ) / block.mass;
block.v += a * period;
block.x += block.v * period;
}
var globalIntensity = liquidMarker.object3d.material.uniforms.globalIntensity
globalIntensity.value = (block.x - 210)/210
}, 1000*period)
function triggerBoing(){
block.x -= 200
boingSound.play()
}
document.body.addEventListener('click', triggerBoing)
document.body.addEventListener('keypress', triggerBoing)
// bind event for parameters tuning
// document.querySelector('#controls').style.display = ''
document.getElementById('k_slider').onchange = function() {
this.innerHTML = this.value;
k = -1 * parseInt(this.value);
document.getElementById('k_slider_label').innerHTML = k;
};
document.getElementById('b_slider').onchange = function() {
this.innerHTML = this.value;
b = -1 * parseFloat(this.value);
document.getElementById('b_slider_label').innerHTML = b;
};
document.getElementById('f_slider').onchange = function() {
this.innerHTML = this.value;
wall.frequency = parseFloat(this.value);
document.getElementById('f_slider_label').innerHTML = wall.frequency;
};
document.getElementById('m_slider').onchange = function() {
this.innerHTML = this.value;
block.mass = parseFloat(this.value);
document.getElementById('m_slider_label').innerHTML = block.mass;
};
})()
;(function(){
return
var geometryParameters = liquidMarker.object3d.geometry.parameters
var geometry = new THREE.PlaneGeometry(2,2,16*4-1,32*4-1)
var geometry = new THREE.PlaneGeometry(geometryParameters.width, geometryParameters.height, geometryParameters.widthSegments, geometryParameters.heightSegments)
var texture = new THREE.TextureLoader().load(THREEx.ArToolkitContext.baseURL+'../data/images/25P1geh.png')
texture.anisotropy = renderer.getMaxAnisotropy()
texture.repeat.set(50,50)
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// var material = new THREE.MeshBasicMaterial({
// map: texture,
// color: 0x01BE00,
// opacity: 4,
// transparent: true,
// side: THREE.DoubleSide,
// })
var material = new THREE.ShaderMaterial( {
vertexShader: THREEx.ArLiquidMarker.vertexShader,
fragmentShader: `
varying vec2 vUv;
varying vec3 vPosition;
uniform sampler2D texture;
uniform float opacity;
uniform float globalIntensity;
uniform float time;
void main(void){
vec2 repeat = vec2(30.0);
vec4 color = texture2D( texture, vUv*repeat ).rgba;
color.a += 0.5;
color.a = globalIntensity;
// vec4 color = vec4(1.0);
float radius = length(vPosition);
color *= 1.0-radius*1.6;
color.rgb *= 5.0;
//
// // float circleWidth
// if( mod(radius-time/5.0, 0.1) < 0.01 ){
// color *= 10.0 * intensity + 1.0;
// }else{
// color.rgb *= 1.0;
// }
gl_FragColor = color;
}
`,
uniforms: {
texture: {
value: texture
},
globalIntensity: {
value: 1.0
},
time: {
value: 0
},
},
defines: {
uvToMarkerSpaceEnabled: 0,
},
transparent: true,
side: THREE.FrontSide,
});
// animate the material
var startedAt = performance.now()/1000
onRenderFcts.push(function(){
mesh.material.uniforms.globalIntensity.value = liquidMarker.object3d.material.uniforms.globalIntensity.value
mesh.material.uniforms.time.value = performance.now()/1000 - startedAt
})
// create the mesh
var mesh = new THREE.Mesh( geometry, material );
mesh.rotation.x = -Math.PI/2
// mesh.position.y = 0.08
// mesh.position.y = 0.2
markerRoot.add(mesh)
})()
//////////////////////////////////////////////////////////////////////////////
// opacity animation
//////////////////////////////////////////////////////////////////////////////
// // animation opacity
// var targetWaveHeight = 1.0
// onRenderFcts.push(function(delta){
// var globalIntensity = liquidMarker.object3d.material.uniforms.globalIntensity
// var speed = delta * 2
// if( globalIntensity.value > targetWaveHeight ){
// globalIntensity.value -= speed
// if( globalIntensity.value < targetWaveHeight ){
// globalIntensity.value = targetWaveHeight
// }
// }
//
// if( globalIntensity.value < targetWaveHeight ){
// globalIntensity.value += speed
// if( globalIntensity.value > targetWaveHeight ){
// globalIntensity.value = targetWaveHeight
// }
// }
// // console.log(intensity.value)
// })
//
// // toggleCloak on click/keypress
// function toggleCloak(){
// if( targetWaveHeight === 1.0 ){
// targetWaveHeight = 0.0
// }else{
// targetWaveHeight = 1.0
// }
// }
// document.body.addEventListener('click', toggleCloak)
// document.body.addEventListener('keypress', toggleCloak)
//////////////////////////////////////////////////////////////////////////////////
// render the whole thing on the page
//////////////////////////////////////////////////////////////////////////////////
var stats = new Stats();
// document.body.appendChild( stats.dom );
// render the scene
onRenderFcts.push(function(){
renderer.clear();
renderer.render( scene, camera );
// stats.update();
})
// run the rendering loop
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
// keep looping
requestAnimationFrame( animate );
// measure time
lastTimeMsec = lastTimeMsec || nowMsec-1000/60
var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)
lastTimeMsec = nowMsec
// call each update function
onRenderFcts.forEach(function(onRenderFct){
onRenderFct(deltaMsec/1000, nowMsec/1000)
})
})
</script></body>