1. Tips for Environment Mapping
CS 418 Exercise 6

2. Objectives for Today Go over basics of environment mapping in WebGL
Go over some stuff needed for MP3 part 1
Running a server
Parsing an obj file
Rendering a skybox
This week we’ll do a texture mapping exercise
Next week we’ll do cube mapping

3. Environment Maps Environment Maps let us render mirrors
allow rasterization engines to render reflective surfaces
Environment maps require an image(s) of the environment
Specifically images that show the environment around an object
From the objects point of view
There are generally two approaches to doing this:
Sphere mapping
Cube mapping

4. Cube Map
Uses 6 images
Forms a sort of virtual box around object

5. Indexing a Cube Map
Index into the cube map using a reflection vector

6. WebGL Implementation WebGL only supports cube maps (not sphere)
Example:
Consider a cube that reflects the color of the “walls”
Each wall is a solid color (red, green, blue, cyan, magenta, yellow)
Each face of room can be a texture of one texel
var red = new Uint8Array([255, 0, 0, 255]);
var green = new Uint8Array([0, 255, 0, 255]);
var blue = new Uint8Array([0, 0, 255, 255]);
var cyan = new Uint8Array([0, 255, 255, 255]);
var magenta = new Uint8Array([255, 0, 255, 255]);
var yellow = new Uint8Array([255, 255, 0, 255]);

7. Create the Texture Object
cubeMap = gl.createTexture();
gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeMap);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X, 0, gl.RGBA,
1, 1, 0, gl.RGBA,gl.UNSIGNED_BYTE, red);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 0, gl.RGBA,
1, 1, 0, gl.RGBA,gl.UNSIGNED_BYTE, green);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 0, gl.RGBA,
1, 1, 0, gl.RGBA,gl.UNSIGNED_BYTE, blue);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 0, gl.RGBA,
1, 1, 0, gl.RGBA,gl.UNSIGNED_BYTE, cyan);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 0, gl.RGBA,
1, 1, 0, gl.RGBA,gl.UNSIGNED_BYTE, yellow);
gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, 0, gl.RGBA,
1, 1, 0, gl.RGBA,gl.UNSIGNED_BYTE, magenta);
gl.activeTexture( gl.TEXTURE0 );
gl.uniform1i(gl.getUniformLocation(program, "texMap"),0);

8. Vertex Shader Code varying vec3 R; attribute vec4 vPosition;
attribute vec4 vNormal;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec3 theta;
void main(){
vec3 angles = radians( theta );
gl_Position = projectionMatrix*ModelViewMatrix*vPosition;
vec4 eyePos = ModelViewMatrix*vPosition;
vec4 N = ModelViewMatrix*vNormal;
R = reflect(eyePos.xyz, N.xyz); }

9. Fragment Shader Code precision mediump float; varying vec3 R;
uniform samplerCube texMap;
void main() {
vec4 texColor = textureCube(texMap, R);
gl_FragColor = texColor; }

10. Other Useful MP3 Tips You won’t need to cube map till part 2
But there are some things you need for part 1
Running a server locally
To be able to read the obj file
Understand the obj file
To be able to parse it
Load multiple textures
To implement a skybox

11. Running a Server
Some options…assume you have file named demo.html you want to serve
Use the Brackets editor, the live preview function will start up a server (and browser)
Just have Chrome open, and the open your html file in Brackets 
Click the lightning bolt icon in the top right of the Brackets window
Or, you can install node.js 
Then install and run httpserver to serve the directory that it is run from.
Navigate browser to localhost:8000/demo.html
The port number may vary…depends on your installation
Or, you can use python
First install Python
Open cmd window, terminal, or cygwin session
Navigate to demo directory
Run “>> python –m SimpleHTTPServer 8000”
Or if it’s python 3+ run “>> python3 -m http.server 8000”
Open demo in browser at URL = localhost:8000/demo.html

12. OBJ Files The teapot file is a text file listing vertices and faces
It will look something like this
Note that the indexing for vertices starts at 1
You will need to read the text file and parse it in your js code
Load your buffers with the info from the file
And calculate normal…
#This is a comment
v e-006
v e-006 v f

13. Loading Multiple Textures
Create texture holders
tex0 = gl.createTexture;
tex1 = gl.createTexture;
...
Set active textures
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, tex0);
gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler0"), 0);
…draw
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, tex1);
In shader add:
uniform sampler2D uSampler0; …
texture2D(uSampler0,texCoord);
If you need more info:

14. Today’s Task: Start Creating a Skybox
Grab the example texture mapping code
…and the other necessary files
Change the code
load the six textures for the MP
texture each side of the cube with one of the six
Once that works
Get rid of the annoying rotation of the cube
Change your viewpoint (in the code) to be inside the box
If necessary, change the texture coordinates to make things look correct