Friends link: exam 70-450 cert 9a0-125 Adobe 9A0-127 exam Apple 9l0-410 Certification a00-202 Exam dumps IBM a2010-570 Exam dumps Pass A2160-669 Exam asc-029 Exam Dumps BCP-240 Actual Exam ISEB bh0-006 exam
GLOW » Hello Three.js
Parajumpers sale Parajumpers sale http://www.unifem.ch canada goose sale http://www.canadagooseoutlets.be https://www.gasinc.nl Canada Goose jas
2011+06+08

Hello Three.js

GLOW can be used in conjunction with other WebGL libraries that we all know and love. This tutorial shows how you can write your own GLOW renderer for Three.js

(It’s a good idea to go through the Hello Cube tutorial first)

You can see the result here. Please view the source and have it at hand when reading this tutorial. We won’t go through every line here, just the specific parts.

First, as we’re going to use Three.js we only need to load the GLOW core and the Three.js compatibility library:

...src="GLOWCore.js"...
...src="GLOWThreeCompatibility.js"...

First we need to tell GLOW to use Three.js…

GLOW.ThreeJS.init();

Then we create a THREE camera and position it…

var camera = new THREE.Camera( 80, 16/9, 0.1, 10000 );
camera.position.z = 1500;
camera.update();

Then we define the shader, as usual, but for some uniform and attributes we don’t put any data but strings that describes what data to hook from Three.js…

var shaderMaterial = {
  vertexShader = "...vertex shader code...",
  fragmentShader = "...fragment shader code...",
  data = {
    transform: "matrixWorld",
    cameraInverse: camera.matrixWorldInverse,
    cameraProjection: camera.projectionMatrix,
    vertices: "vertices",
    colors: "colors"
  }
}

Note that you don’t have to define the elements property – it’ll be automatically added later. When we’ve defined our shader material, we load a model, create a context and then we create…

mesh = new GLOW.ThreeJS.Mesh( geometry, shaderMaterial );

If you’re familiar with Three.js you recognize the parameters – geometry and material. The only difference is that the material is the object we created above. The geometry is parsed and the result is matched with the strings in your material object – ”vertices” is exchanged with the parsed vertex data and so on. The element property is automatically set.

At the moment these attributes are matched:

  • ”vertices”
  • ”normals”
  • ”colors”

And these uniforms:

  • ”matrix”
  • ”matrixWorld”
  • ”matrixRotationWorld”
  • ”position”
  • ”rotation”
  • ”scale”

The GLOW.ThreeJS.Mesh inherits from THREE.Object3D so you have all the usual properties and functions like .position and .addChild()

As you see, we clone our mesh by…

mesh2 = mesh.clone( { transform: "matrixWorld" } );

…where the parameter is the except concept we talked about in the Hello Clone tutorial. Basically we say that we clone everything except the transform, which should be set to matrixWorld of the clone.

To draw the mesh, you simply call…

mesh.draw();

…which is a shortcut wrapper for…

mesh.shader.draw();

This is the basics and you can easily expand on this to create your own custom Three.js renderer.

In ROME we ended up writing our own shaders for almost every material and we might have benefited from using GLOW instead of the THREE.WebGLRenderer. We’ll never know ;)