topical media & game development

talk show tell print

mobile-query-three-plugins-pproc-examples-tmp-webgl-lines-colors.htm / htm



  <!doctype html>
  <html lang="en">
          <head>
                  <title>three.js webgl - lines - cubes - colors</title>
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
                  <style>
                          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> - color lines 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 src="../build/Three.js"></script>
  
                  <script src="js/ShaderExtras.js"></script>
  
                  <script src="js/postprocessing/EffectComposer.js"></script>
                  <script src="js/postprocessing/MaskPass.js"></script>
                  <script src="js/postprocessing/RenderPass.js"></script>
                  <script src="js/postprocessing/ShaderPass.js"></script>
                  <script src="js/postprocessing/BloomPass.js"></script>
  
                  <script src="js/Detector.js"></script>
                  <script src="js/RequestAnimationFrame.js"></script>
                  <script src="js/Stats.js"></script>
  
                  <script>
  
                          if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  
                          var mouseX = 0, mouseY = 0,
  
                          windowHalfX = window.innerWidth / 2,
                          windowHalfY = window.innerHeight / 2,
  
                          camera, scene, renderer, material, composer;
  
                          init();
                          animate();
  
                          function init() {
  
                                  var i, container;
  
                                  container = document.createElement( 'div' );
                                  document.body.appendChild( container );
  
                                  camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
                                  camera.position.z = 700;
  
                                  scene = new THREE.Scene();
  
                                  renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
                                  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, 2, 0, 1, 2, 3, 4, 5, 6, 7 ),
                                          colors = [], colors2 = [], colors3 = [];
  
                                  for ( i = 0; i < points.length; i ++ ) {
  
                                          geometry.vertices.push( new THREE.Vertex( points[ i ] ) );
  
                                          colors[ i ] = new THREE.Color( 0xffffff );
                                          colors[ i ].setHSV( 0.6, ( 200 + points[ i ].x ) / 400, 1.0 );
  
                                          colors2[ i ] = new THREE.Color( 0xffffff );
                                          colors2[ i ].setHSV( 0.3, 1.0, ( 200 + points[ i ].x ) / 400 );
  
                                          colors3[ i ] = new THREE.Color( 0xffffff );
                                          colors3[ i ].setHSV( i / points.length, 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.add( line );
  
                                  }
  
                                  //
  
                                  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 );
  
                                  //
  
                                  var renderModel = new THREE.RenderPass( scene, camera );
                                  var effectBloom = new THREE.BloomPass( 1.3 );
                                  var effectScreen = new THREE.ShaderPass( THREE.ShaderExtras[ "screen" ] );
                                  var effectFXAA = new THREE.ShaderPass( THREE.ShaderExtras[ "fxaa" ] );
  
                                  effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
  
                                  effectScreen.renderToScreen = true;
  
                                  composer = new THREE.EffectComposer( renderer );
  
                                  composer.addPass( renderModel );
                                  composer.addPass( effectFXAA );
                                  composer.addPass( effectBloom );
                                  composer.addPass( effectScreen );
  
                          }
  
                          // 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 = [];
  
                                          Array.prototype.push.apply( tmp, hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
                                          Array.prototype.push.apply( tmp, hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
                                          Array.prototype.push.apply( tmp, hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
                                          Array.prototype.push.apply( tmp, hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
                                          Array.prototype.push.apply( tmp, hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
                                          Array.prototype.push.apply( tmp, hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
                                          Array.prototype.push.apply( tmp, hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
                                          Array.prototype.push.apply( tmp, 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();
  
                                  stats.update();
  
                          }
  
                          function render() {
  
                                  camera.position.x += ( mouseX - camera.position.x ) * .05;
                                  camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
  
                                  camera.lookAt( scene.position );
  
                                  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();
                                  composer.render();
  
                          }
  
                  </script>
          </body>
  </html>
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.