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

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

Option 1: 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 2: 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 );

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

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);

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).