threex
Version:
Game Extensions for three.js http://www.threejsgames.com/extensions/
197 lines (160 loc) • 6.49 kB
HTML
<script src="../../../vendor/three.js/build/three.min.js"></script>
<!-- includes for THREE.EffectComposer -->
<script src="../../../vendor/three.js/examples/js/postprocessing/EffectComposer.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/RenderPass.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/ShaderPass.js"></script>
<script src="../../../vendor/three.js/examples/js/postprocessing/MaskPass.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/CopyShader.js"></script>
<!-- includes for threex.glow -->
<script src="../../../vendor/three.js/examples/js/shaders/HorizontalBlurShader.js"></script>
<script src="../../../vendor/three.js/examples/js/shaders/VerticalBlurShader.js"></script>
<script src="../threex.glow.js"></script>
<script src="./BlendShader2.js"></script>
<!-- include for threex.glowdatgui -->
<script src='../../../vendor/three.js/examples/js/libs/dat.gui.min.js'></script>
<script src="../threex.glowdatgui.js"></script>
<!-- includes for the examples to blend the output of threex.glow -->
<script src="../../../vendor/three.js/examples/js/shaders/BlendShader.js"></script>
<script>
/**
* @author alteredq / http://alteredqualia.com/
*
* Blend two textures
*/
THREE.BlendShader2 = {
uniforms: {
'tDiffuse1': { type: 't', value: null },
'tDiffuse2': { type: 't', value: null },
"srcColor": { type: "v3", value: new THREE.Vector3(1,1,1 ) },
},
vertexShader: [
'varying vec2 vUv;',
'void main() {',
'vUv = uv;',
'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
'}'
].join('\n'),
fragmentShader: [
'uniform sampler2D tDiffuse1;',
'uniform sampler2D tDiffuse2;',
'// Colour (tint) applied to source texture ',
'uniform vec4 srcColor; ',
'// Colour (tint) applied to destination texture. ',
'uniform vec4 dstColor; ',
'varying vec2 vUv;',
'#define SCREEN',
'vec3 blend (vec3 src, vec3 dst) {',
'#ifdef ADD ',
' return src + dst; ',
'#endif',
'#ifdef SCREEN',
'return (src + dst) - (src * dst);',
'#endif',
'}',
'void main() {',
'// Get samples from both layers',
'vec4 dst = texture2D(tDiffuse1, vUv);',
'vec4 src = texture2D(tDiffuse2, vUv) * vec4(0.5,0.5,0.5,0.5);',
'// Apply blend operation',
'vec3 colour = clamp(blend(src.xyz, dst.xyz), 0.0, 1.0);',
'// Set fragment',
'gl_FragColor.xyz = colour;',
'gl_FragColor.w = 1.0;',
'}'
].join('\n')
};
</script>
<!-- Start the code itself -->
<body style='margin: 0px; background-color: #bbbbbb;overflow: hidden;'><script>
// init renderer
var renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )
// init scene
var scene = new THREE.Scene()
// init camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
camera.position.z = 3
var updateFcts = []
var geometry = new THREE.TorusGeometry( 0.5-0.15, 0.15)
var material = new THREE.MeshNormalMaterial()
var material = new THREE.MeshBasicMaterial()
material.map = THREE.ImageUtils.loadTexture('../../marbletable/game/images/jupitermap.jpg');
var mesh = new THREE.Mesh( geometry, material )
mesh.scale.set(1,1,1).multiplyScalar(2)
scene.add( mesh )
mesh.userData.domClasses += ' glowing'
var geometry = new THREE.CubeGeometry( 1, 1, 1)
var material = new THREE.MeshNormalMaterial()
var cube1 = new THREE.Mesh( geometry, material )
cube1.position.x = 0.5
cube1.scale.set(1,1,1).multiplyScalar(1/2)
mesh.add( cube1 )
updateFcts.push(function(){
mesh.rotation.x += 0.005
mesh.rotation.y += 0.01
})
var geometry = new THREE.CubeGeometry( 1, 1, 1)
var material = new THREE.MeshNormalMaterial()
var cube2 = new THREE.Mesh( geometry, material )
cube2.position.x = -0.5
cube2.scale.set(1,1,1).multiplyScalar(1/2)
scene.add( cube2 )
//////////////////////////////////////////////////////////////////////////////////
// init glow //
//////////////////////////////////////////////////////////////////////////////////
// create the glow itself
var glow = new THREEx.Glow(renderer, camera)
// you can add a dat.gui on it if you want, it helps fine tune your parameters
new THREEx.addGlow2DatGui(glow)
// prepare the scene for the glow rendering.
// You are free to build it the way you want.
// THREEx.glow doesn't care much.
var materialOn = new THREE.MeshBasicMaterial({ color: 0x88ccff })
var materialOff = new THREE.MeshBasicMaterial({ color: 'black' })
glow.copyScene(scene, function(srcObject){
var domClasses = srcObject.userData.domClasses
var glowing = domClasses && domClasses.match(/glowing/)
var material = glowing ? materialOn : materialOff
return material
})
//////////////////////////////////////////////////////////////////////////////////
// blend main scene with glow.renderTexture //
//////////////////////////////////////////////////////////////////////////////////
var composer = new THREE.EffectComposer(renderer)
// add Render Pass
var effect = new THREE.RenderPass(scene, camera)
composer.addPass( effect )
// add Blend Pass - to blend with glow.renderTarget
var effect = new THREE.ShaderPass( THREE.BlendShader, 'tDiffuse1')
effect.uniforms['tDiffuse2' ].value = glow.renderTarget
effect.uniforms['mixRatio' ].value = 0.5
effect.uniforms['opacity' ].value = 2
var effect = new THREE.ShaderPass( THREE.BlendShader2, 'tDiffuse1')
effect.uniforms['tDiffuse2' ].value = glow.renderTarget
effect.uniforms['tDiffuse2' ].value = glow.renderTarget
composer.addPass( effect )
// mark the last pass as ```renderToScreen```
composer.passes[composer.passes.length-1].renderToScreen = true;
updateFcts.push(function(delta, now){
glow.update(delta)
composer.render(delta);
})
//////////////////////////////////////////////////////////////////////////////////
// loop runner //
//////////////////////////////////////////////////////////////////////////////////
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
updateFcts.forEach(function(updateFn){
updateFn(deltaMsec/1000, nowMsec/1000)
})
})
</script></body>