mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-13 23:16:07 +10:00
alteredq
22bd108ab1
Changed normal map shader to multiply specular component with diffuse weighting as specular highlights were appearing in the dark parts. Changed camera look speed in minecraft and terrain demos, they were too fast - I guess as everything got faster with antialiasing off. Reenabled antialiasing in few demos where it was too ugly without (basically anything with lines and without postprocessing). Fixed again spurious invisible characters in empaempa's code (which are breaking everything and are hard to hunt as they look like spaces).
358 lines
10 KiB
HTML
358 lines
10 KiB
HTML
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - lines - splines</title>
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body {
|
|
background-color: #000000;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
a {
|
|
color:#0078ff;
|
|
}
|
|
|
|
#info {
|
|
position: absolute;
|
|
top: 10px; width: 100%;
|
|
color: #ffffff;
|
|
padding: 5px;
|
|
font-family: Monospace;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
z-index:100;
|
|
}
|
|
|
|
a {
|
|
color: orange;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #0080ff;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="info">
|
|
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - splines WebGL demo
|
|
[<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
|
|
</div>
|
|
|
|
<script type="text/javascript" src="../build/Three.js"></script>
|
|
|
|
<script type="text/javascript" src="js/Detector.js"></script>
|
|
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
|
|
<script type="text/javascript" src="js/Stats.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
var postprocessing = false;
|
|
|
|
var mouseX = 0, mouseY = 0,
|
|
|
|
windowHalfX = window.innerWidth / 2,
|
|
windowHalfY = window.innerHeight / 2,
|
|
|
|
camera, scene, renderer, material;
|
|
|
|
var cameraOrtho, sceneScreen, rtTexture1, rtTexture2, rtTexture3, materialScreen, materialConvolution, blurx, blury, quadScreen;
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
var i, n_sub, container;
|
|
|
|
container = document.createElement('div');
|
|
document.body.appendChild(container);
|
|
|
|
camera = new THREE.Camera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
camera.position.z = 700;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
renderer.autoClear = false;
|
|
container.appendChild( renderer.domElement );
|
|
|
|
var geometry = new THREE.Geometry(),
|
|
geometry2 = new THREE.Geometry(),
|
|
geometry3 = new THREE.Geometry(),
|
|
points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 ),
|
|
colors = [], colors2 = [], colors3 = [];
|
|
|
|
n_sub = 6;
|
|
|
|
var position, index;
|
|
|
|
var spline = new THREE.Spline( points );
|
|
|
|
for ( i = 0; i < points.length * n_sub; i ++ ) {
|
|
|
|
index = i / ( points.length * n_sub );
|
|
position = spline.getPoint( index );
|
|
|
|
geometry.vertices[ i ] = new THREE.Vertex( new THREE.Vector3( position.x, position.y, position.z ) );
|
|
|
|
colors[ i ] = new THREE.Color( 0xffffff );
|
|
colors[ i ].setHSV( 0.6, ( 200 + position.x ) / 400, 1.0 );
|
|
|
|
colors2[ i ] = new THREE.Color( 0xffffff );
|
|
//colors2[ i ].setHSV( 0.1, 1.0, ( 200 + position.x ) / 400 );
|
|
colors2[ i ].setHSV( 0.9, ( 200 + position.y ) / 400, 1.0 );
|
|
|
|
colors3[ i ] = new THREE.Color( 0xffffff );
|
|
colors3[ i ].setHSV( i / ( points.length * n_sub ), 1.0, 1.0 );
|
|
|
|
|
|
}
|
|
|
|
geometry2.vertices = geometry3.vertices = geometry.vertices;
|
|
|
|
geometry.colors = colors;
|
|
geometry2.colors = colors2;
|
|
geometry3.colors = colors3;
|
|
|
|
// lines
|
|
|
|
material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3 } );
|
|
|
|
var line, p, scale = 0.3, d = 225,
|
|
parameters = [ [ material, scale*1.5, [-d,0,0], geometry ],
|
|
[ material, scale*1.5, [0,0,0], geometry2 ],
|
|
[ material, scale*1.5, [d,0,0], geometry3 ] ];
|
|
|
|
material.vertexColors = true;
|
|
|
|
for ( i = 0; i < parameters.length; ++i ) {
|
|
|
|
p = parameters[ i ];
|
|
line = new THREE.Line( p[ 3 ], p[ 0 ] );
|
|
line.scale.x = line.scale.y = line.scale.z = p[ 1 ];
|
|
line.position.x = p[ 2 ][ 0 ];
|
|
line.position.y = p[ 2 ][ 1 ];
|
|
line.position.z = p[ 2 ][ 2 ];
|
|
scene.addObject( line );
|
|
|
|
}
|
|
|
|
// postprocessing
|
|
|
|
cameraOrtho = new THREE.Camera();
|
|
cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
|
|
cameraOrtho.position.z = 100;
|
|
|
|
sceneScreen = new THREE.Scene();
|
|
|
|
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter };
|
|
rtTexture1 = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
|
|
rtTexture2 = new THREE.WebGLRenderTarget( 512, 512, pars );
|
|
rtTexture3 = new THREE.WebGLRenderTarget( 512, 512, pars );
|
|
|
|
var screen_shader = THREE.ShaderUtils.lib["screen"];
|
|
var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );
|
|
|
|
screen_uniforms["tDiffuse"].texture = rtTexture1;
|
|
screen_uniforms["opacity"].value = 1.0;
|
|
|
|
materialScreen = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: screen_uniforms,
|
|
vertexShader: screen_shader.vertexShader,
|
|
fragmentShader: screen_shader.fragmentShader,
|
|
blending: THREE.AdditiveBlending
|
|
|
|
} );
|
|
|
|
var convolution_shader = THREE.ShaderUtils.lib["convolution"];
|
|
var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );
|
|
|
|
blurx = new THREE.Vector2( 0.001953125, 0.0 ),
|
|
blury = new THREE.Vector2( 0.0, 0.001953125 );
|
|
|
|
convolution_uniforms["tDiffuse"].texture = rtTexture1;
|
|
convolution_uniforms["uImageIncrement"].value = blurx;
|
|
convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );
|
|
|
|
materialConvolution = new THREE.MeshShaderMaterial( {
|
|
|
|
uniforms: convolution_uniforms,
|
|
vertexShader: "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
|
|
fragmentShader: "#define KERNEL_SIZE 25\n" + convolution_shader.fragmentShader
|
|
|
|
} );
|
|
|
|
var plane = new THREE.Plane( window.innerWidth, window.innerHeight );
|
|
|
|
quadScreen = new THREE.Mesh( plane, materialConvolution );
|
|
quadScreen.position.z = -100;
|
|
sceneScreen.addObject( quadScreen );
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
//container.appendChild(stats.domElement);
|
|
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
|
|
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
|
|
|
|
}
|
|
|
|
// port of Processing Java code by Thomas Diewald
|
|
// http://www.openprocessing.org/visuals/?visualID=15599
|
|
|
|
function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
|
|
|
|
var half = side/2,
|
|
|
|
vec_s = [
|
|
|
|
new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
|
|
new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
|
|
new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
|
|
new THREE.Vector3( center.x - half, center.y - half, center.z - half ),
|
|
new THREE.Vector3( center.x + half, center.y - half, center.z - half ),
|
|
new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
|
|
new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
|
|
new THREE.Vector3( center.x + half, center.y + half, center.z - half )
|
|
|
|
],
|
|
|
|
vec = [ vec_s[ v0 ], vec_s[ v1 ], vec_s[ v2 ], vec_s[ v3 ], vec_s[ v4 ], vec_s[ v5 ], vec_s[ v6 ], vec_s[ v7 ] ];
|
|
|
|
if( --iterations >= 0 ) {
|
|
|
|
var tmp = [];
|
|
|
|
tmp = tmp.concat( hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
|
|
tmp = tmp.concat( hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
|
|
|
|
return tmp;
|
|
|
|
}
|
|
|
|
return vec;
|
|
}
|
|
|
|
//
|
|
|
|
function onDocumentMouseMove(event) {
|
|
|
|
mouseX = event.clientX - windowHalfX;
|
|
mouseY = event.clientY - windowHalfY;
|
|
}
|
|
|
|
function onDocumentTouchStart( event ) {
|
|
|
|
if ( event.touches.length > 1 ) {
|
|
|
|
event.preventDefault();
|
|
|
|
mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
}
|
|
}
|
|
|
|
function onDocumentTouchMove( event ) {
|
|
|
|
if ( event.touches.length == 1 ) {
|
|
|
|
event.preventDefault();
|
|
|
|
mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
mouseY = event.touches[ 0 ].pageY - windowHalfY;
|
|
}
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
render();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
|
|
camera.updateMatrix();
|
|
|
|
var time = new Date().getTime() * 0.0005;
|
|
|
|
for( var i = 0; i<scene.objects.length; i++ ) {
|
|
|
|
scene.objects[i].rotation.y = time * ( i % 2 ? 1 : -1);
|
|
|
|
}
|
|
|
|
renderer.clear();
|
|
|
|
if ( postprocessing ) {
|
|
|
|
// Render scene into texture
|
|
|
|
renderer.render( scene, camera, rtTexture1 );
|
|
|
|
// Render quad with blured scene into texture (convolution pass 1)
|
|
|
|
quadScreen.materials = [ materialConvolution ];
|
|
|
|
materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
|
|
materialConvolution.uniforms.uImageIncrement.value = blurx;
|
|
|
|
renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
|
|
|
|
// Render quad with blured scene into texture (convolution pass 2)
|
|
|
|
materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
|
|
materialConvolution.uniforms.uImageIncrement.value = blury;
|
|
|
|
renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
|
|
|
|
// Render original scene with superimposed blur to texture
|
|
|
|
quadScreen.materials = [ materialScreen ];
|
|
|
|
materialScreen.uniforms.tDiffuse.texture = rtTexture3;
|
|
materialScreen.uniforms.opacity.value = 1.3;
|
|
|
|
renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );
|
|
|
|
// Render to screen
|
|
|
|
materialScreen.uniforms.tDiffuse.texture = rtTexture1;
|
|
renderer.render( sceneScreen, cameraOrtho );
|
|
|
|
} else {
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|