mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 13:06:01 +10:00
alteredq
cff95a119c
That was much tougher than expected. No wonder other WebGL video demos around the web are broken. Firefox OpenGL / ANGLE and Chrome OpenGL were ok, getting it to work in Chrome ANGLE was rather tricky. Please report if something got broken. I tried to go through all textured examples but I may have missed something. If you want to refresh texture on WebGL side, you just set "texture.needsUpdate" flag (if you use Loader or ImageUtils.loadTexture / loadTextureCube everything is taken care of). Flag has to be set also for canvas-based textures, sorry no escaping this :(. I tried and it lead to ugly problems (e.g. AO minecraft demo mixes several asynchronously loaded and generated images into one texture, with autodetect always something was broken). "needsUpdate" should work also on cube textures, though it's not tested yet (also there I didn't put hack for Chrome ANGLE).
292 lines
12 KiB
HTML
292 lines
12 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js - webgl</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
background:#fff;
|
|
padding:0;
|
|
margin:0;
|
|
font-weight: bold;
|
|
overflow:hidden;
|
|
}
|
|
|
|
#info {
|
|
position: absolute;
|
|
top: 0px; width: 100%;
|
|
color: #ffffff;
|
|
padding: 5px;
|
|
font-family:Monospace;
|
|
font-size:13px;
|
|
text-align:center;
|
|
z-index:1000;
|
|
}
|
|
|
|
a {
|
|
color: #ffffff;
|
|
}
|
|
#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<pre id="log"></pre>
|
|
|
|
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl cube Fresnel shader demo.</div>
|
|
|
|
<!--
|
|
<script type="text/javascript" src="../build/Three.js"></script>
|
|
-->
|
|
|
|
<script type="text/javascript" src="../src/Three.js"></script>
|
|
<script type="text/javascript" src="../src/core/Color.js"></script>
|
|
<script type="text/javascript" src="../src/core/Vector2.js"></script>
|
|
<script type="text/javascript" src="../src/core/Vector3.js"></script>
|
|
<script type="text/javascript" src="../src/core/Vector4.js"></script>
|
|
<script type="text/javascript" src="../src/core/Ray.js"></script>
|
|
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
|
|
<script type="text/javascript" src="../src/core/Matrix3.js"></script>
|
|
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
|
|
<script type="text/javascript" src="../src/core/Quaternion.js"></script>
|
|
<script type="text/javascript" src="../src/core/Vertex.js"></script>
|
|
<script type="text/javascript" src="../src/core/Face3.js"></script>
|
|
<script type="text/javascript" src="../src/core/Face4.js"></script>
|
|
<script type="text/javascript" src="../src/core/UV.js"></script>
|
|
<script type="text/javascript" src="../src/core/Geometry.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Object3D.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Particle.js"></script>
|
|
<script type="text/javascript" src="../src/objects/ParticleSystem.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Line.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Bone.js"></script>
|
|
<script type="text/javascript" src="../src/objects/SkinnedMesh.js"></script>
|
|
<script type="text/javascript" src="../src/objects/Ribbon.js"></script>
|
|
<script type="text/javascript" src="../src/animation/AnimationHandler.js"></script>
|
|
<script type="text/javascript" src="../src/animation/Animation.js"></script>
|
|
<script type="text/javascript" src="../src/cameras/Camera.js"></script>
|
|
<script type="text/javascript" src="../src/lights/Light.js"></script>
|
|
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
|
|
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
|
|
<script type="text/javascript" src="../src/lights/PointLight.js"></script>
|
|
<script type="text/javascript" src="../src/materials/Material.js"></script>
|
|
<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/MeshShaderMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
|
|
<script type="text/javascript" src="../src/materials/Texture.js"></script>
|
|
<script type="text/javascript" src="../src/materials/RenderTarget.js"></script>
|
|
<script type="text/javascript" src="../src/materials/Uniforms.js"></script>
|
|
<script type="text/javascript" src="../src/materials/mappings/CubeReflectionMapping.js"></script>
|
|
<script type="text/javascript" src="../src/materials/mappings/CubeRefractionMapping.js"></script>
|
|
<script type="text/javascript" src="../src/materials/mappings/LatitudeReflectionMapping.js"></script>
|
|
<script type="text/javascript" src="../src/materials/mappings/LatitudeRefractionMapping.js"></script>
|
|
<script type="text/javascript" src="../src/materials/mappings/SphericalReflectionMapping.js"></script>
|
|
<script type="text/javascript" src="../src/materials/mappings/SphericalRefractionMapping.js"></script>
|
|
<script type="text/javascript" src="../src/materials/mappings/UVMapping.js"></script>
|
|
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
|
|
<script type="text/javascript" src="../src/scenes/Fog.js"></script>
|
|
<script type="text/javascript" src="../src/scenes/FogExp2.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/Projector.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/DOMRenderer.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/WebGLRenderer2.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
|
|
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
|
|
|
|
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
|
|
<script type="text/javascript" src="../src/extras/ImageUtils.js"></script>
|
|
<script type="text/javascript" src="../src/extras/ShaderUtils.js"></script>
|
|
|
|
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var statsEnabled = true;
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer;
|
|
|
|
var mesh, zmesh, lightMesh, geometry;
|
|
|
|
var mouseX = 0, mouseY = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
container = document.createElement( 'div' );
|
|
document.body.appendChild( container );
|
|
|
|
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
camera.position.z = 3200;
|
|
|
|
scene = new THREE.Scene();
|
|
scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
|
|
|
|
var geometry = new Sphere( 50, 32, 16 );
|
|
|
|
var uniforms = ShaderUtils.lib[ 'basic' ].uniforms;
|
|
var vertex_shader = ShaderUtils.lib[ 'basic' ].vertex_shader;
|
|
var fragment_shader = ShaderUtils.lib[ 'basic' ].fragment_shader;
|
|
|
|
var texture = new THREE.Texture( generateTexture( 0, 0.5, 1 ), new THREE.UVMapping() );
|
|
var texture2 = new THREE.Texture( generateTexture( 0, 1, 0 ), new THREE.SphericalReflectionMapping() );
|
|
|
|
var materials = [
|
|
|
|
new THREE.MeshNormalMaterial(),
|
|
new THREE.MeshDepthMaterial(),
|
|
new THREE.MeshBasicMaterial( { color: 0x0066ff, blending: THREE.AdditiveBlending } ),
|
|
new THREE.MeshBasicMaterial( { map: texture, fog: false } ),
|
|
new THREE.MeshBasicMaterial( { map: ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ),
|
|
new THREE.MeshBasicMaterial( { map: texture2, env_map: ImageUtils.loadTexture( 'textures/envmap.png', new THREE.SphericalReflectionMapping() ) } ),
|
|
new THREE.MeshShaderMaterial( { uniforms: uniforms, vertex_shader: vertex_shader, fragment_shader: fragment_shader } )
|
|
|
|
/*
|
|
new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ),
|
|
new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ),
|
|
new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.SmoothShading } ),
|
|
new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading } ),
|
|
new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } ),
|
|
new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ),
|
|
new THREE.MeshBasicMaterial( { map: texture, fog: false } ),
|
|
new THREE.MeshBasicMaterial( { env_map: texture2, fog: false } ),
|
|
new THREE.MeshLambertMaterial( { map: ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ),
|
|
new THREE.MeshLambertMaterial( { map: texture2, env_map: ImageUtils.loadTexture( 'textures/envmap.png', new THREE.SphericalReflectionMapping() ) } ),
|
|
new THREE.MeshShaderMaterial( { uniforms: uniforms, vertex_shader: vertex_shader, fragment_shader: fragment_shader } )
|
|
*/
|
|
|
|
];
|
|
|
|
for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
|
|
|
|
var face = geometry.faces[ i ];
|
|
if ( Math.random() > 0.5 ) face.material = [ materials[ Math.floor( Math.random() * materials.length ) ] ];
|
|
|
|
}
|
|
|
|
materials.push( new THREE.MeshFaceMaterial() );
|
|
|
|
// materials = [ new THREE.MeshBasicMaterial( { map: texture, env_map: texture2 } ) ];
|
|
|
|
for ( var i = 0; i < 5000; i ++ ) {
|
|
|
|
var mesh = new THREE.Mesh( geometry, materials[ Math.floor( Math.random() * materials.length ) ] );
|
|
mesh.position.x = Math.random() * 10000 - 5000;
|
|
mesh.position.y = Math.random() * 10000 - 5000;
|
|
mesh.position.z = Math.random() * 10000 - 5000;
|
|
mesh.rotation.x = Math.random() * 360 * ( Math.PI / 180 );
|
|
mesh.rotation.y = Math.random() * 360 * ( Math.PI / 180 );
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 1;
|
|
mesh.matrixAutoUpdate = false;
|
|
mesh.updateMatrix();
|
|
scene.addObject( mesh );
|
|
|
|
}
|
|
|
|
renderer = new THREE.WebGLRenderer2();
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
// renderer.sortObjects = false;
|
|
container.appendChild( renderer.domElement );
|
|
|
|
if ( statsEnabled ) {
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
stats.domElement.style.zIndex = 100;
|
|
container.appendChild( stats.domElement );
|
|
|
|
}
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
|
}
|
|
|
|
function generateTexture( r, g, b ) {
|
|
|
|
var canvas = document.createElement( 'canvas' );
|
|
canvas.width = 256;
|
|
canvas.height = 256;
|
|
|
|
var context = canvas.getContext( '2d' );
|
|
var image = context.getImageData( 0, 0, 256, 256 );
|
|
|
|
var x = 0, y = 0, p;
|
|
|
|
for ( var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
|
|
|
|
x = j % 256;
|
|
y = x == 0 ? y + 1 : y;
|
|
p = Math.floor( x ^ y );
|
|
|
|
image.data[ i ] = ~~ p * r;
|
|
image.data[ i + 1 ] = ~~ p * g;
|
|
image.data[ i + 2 ] = ~~ p * b;
|
|
image.data[ i + 3 ] = 255;
|
|
|
|
}
|
|
|
|
context.putImageData( image, 0, 0 );
|
|
|
|
return canvas;
|
|
|
|
}
|
|
|
|
function onDocumentMouseMove(event) {
|
|
|
|
mouseX = ( event.clientX - windowHalfX ) * 10;
|
|
mouseY = ( event.clientY - windowHalfY ) * 10;
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
if ( statsEnabled ) stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
camera.position.y += ( - mouseY - camera.position.y ) * .05;
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
function log( text ) {
|
|
|
|
var e = document.getElementById("log");
|
|
e.innerHTML = text + "<br/>" + e.innerHTML;
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|