Home

Helpful links

• shadows http://stackoverflow.com/questions/10742149/how-to-create-directional-light-shadow-in-three-js
• webgl debugging and profiling http://www.realtimerendering.com/blog/webgl-debugging-and-profiling-tools/
• Examples
• General http://threejs.org/examples/#webgl_materials2
• Normal map
  • http://mrdoob.github.io/three.js/examples/webgl_materials_normalmap.html
  • http://mrdoob.github.io/three.js/examples/webgl_materials_normalmap2.html
• Bump map http://threejs.org/examples/#webgl_materials_bumpmap

Export blender to three with morph animations

1. From timeline editor set start and end frames. Frames between them will get exported. If you don't know how many frames to select then open NLA editor to see animation tracks.
2. Export with Blender exporter for Three.js. From export settings select (at least) vertices, faces, normals, UVs, Flip YZ, Embed meshes and Morph animation. If you want to export whole blender scene then also select All meshes, otherwise it will export selected mesh.

Blender to three.js with normal map+diffuse+specular

Option 1: Preset normal map in Blender

https://github.com/playsign/WebTundraGFX/blob/master/BrainDemo/Brains.html

1. Preset a normal map texture to your material. Screenshot from the brain demo: https://github.com/playsign/WebTundraGFX/blob/master/doc/BlenderNormalmap.png Mandatory settings are [v] Normal map and a source file.
2. Export with three.js exporter. Make sure Normals is checked in the export settings.
3. In javascript code include:

---

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "models/Brain_BlendSwap.js", addModelToScene );
function addModelToScene( geometry, materials ) 
{
	var material = new THREE.MeshFaceMaterial( materials );
	model = new THREE.Mesh( geometry, material );
	model.scale.set(10,10,10);
	scene.add( model );
}

Option 2: With THREE material that supports normal map, diffuse and specular e.g. THREE.MeshPhongMaterial https://github.com/playsign/WebTundraGFX/blob/master/DeerDemo/DeerAnimation.html

jsonLoader.load( "models/White_Tail_Deer_all.js", addModelToScene);

json callback -->

 var phongMaterial = new THREE.MeshPhongMaterial( { ambient: 0x050505, specular: 0xffffff, shininess: 10, shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture( "models/MAP_deer_G-03.png" ), normalMap: THREE.ImageUtils.loadTexture( "models/MAP_deer_G-03_NRM.png" ), specularMap: THREE.ImageUtils.loadTexture( "models/MAP_deer_G-03_SPEC.png" ) } );
 phongMaterial.morphTargets = true;
 var deer = new THREE.Mesh( geometry, phongMaterial );

Option 3: With THREE.ShaderMaterial (couldn't get animations work with this method, there is no ShaderChunk["morphtarget_vertex"] in normalmap shader) https://github.com/playsign/WebTundraGFX/blob/master/DeerDemo/ShaderMaterial.html

1. Create a normalmap shader with THREE.ShaderLib
2. Modify uniforms

• normal map needs following uniforms[ "tNormal" ].value = THREE.ImageUtils.loadTexture( "models/MAP_deer_G-03_NRM.png" );
• specular needs following uniforms[ "enableSpecular" ].value = true;
• set texture to "tSpecular" and color to "specular" uniforms[ "tSpecular" ].value = THREE.ImageUtils.loadTexture( "models/MAP_deer_G-03_SPEC.png" ); uniforms[ "specular" ].value.setHex( specular ); // specular = 0xffffff
• If your model is black or texture is not visible then "uniforms[ "enableAO" ].value = true;" might cause it

3. Apply material to Three.Mesh

• If youre using single texture (+diffuse, specular) or single material (check from blender) then you're fine by just directly applying the material to a mesh jsonLoader.load( "models/White_Tail_Deer_all.js", function( geometry ) { addModelToScene(geometry, material)} ) --> new THREE.Mesh( geometry, material );
• If you're model uses multiple textures then you may use MeshFaceMaterial var material = new THREE.MeshFaceMaterial( materials ); // parameter should be an array of materials deer = new THREE.Mesh( geometry, material );

Animation

• Morph targets
• http://threejs.org/examples/webgl_morphtargets.html
• Morph targets are sets of geometry vertices positions for automatic interpolation between them. You can change geometry appearance in real time, using different vertices positions written in morphTargetInfluences[0], morphTargetInfluences[1], morphTargetInfluences[nSet]. You can mix many appearances (morphTargetInfluences) of geometry at the same time. Best way is JSONLoader format, wchich you can export from 3DSMax for example: frame0 as morphTargetInfluences[0], frame1 as morphTargetInfluences[1], ect.
• Update morph targets https://github.com/playsign/WebTundraGFX/blob/master/DeerDemo/DeerAnimation.html#L166-L180

The original geometry vertices are untouched, which you can check using geometry.computeBoundingBox();geometry.boundingBox);

Obj

• use converter three.js\utils\converters\obj\convert_obj_three.py
• help included in the py file. Blender section talks about export settings that do not exist anymore. That's a problem
• you probably need to use python26

Collada

• Bones might cause errors

DDS

Override source jpg textures with dds textures example https://github.com/playsign/OuluThreeJS/blob/master/Oulu.js#L179-L207 In nutshell geometry.dispose()/texture.dispose()/material.dispose()

CTM

Loader example https://github.com/playsign/OuluThreeJS/blob/ctm/Grid.js#L166-L203

Memory management

By disposing textures and geometry: https://github.com/playsign/OuluThreeJS/blob/cull/Oulu.js#L328-L350 But it's pointless if we are using CTM? https://github.com/playsign/OuluThreeJS/blob/ctm/Oulu.js#L328-L350

Errors

• gl error invalid operation
• solution: geometry.computeTangets() in the beginning of your loader callback
• WebGL: INVALID_OPERATION: useProgram: object not from this context
• You can share geometry along different Scenes.
• You can't share meshes along different Scenes.
• You can't share geometry/meshes/scenes along different Renderers (yet).