Tips for Environment Mapping CS 418 Exercise 6

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

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

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

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

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

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

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

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

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

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

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 1.38137 2.45469 -9.07128e-006 v 1.4 2.4 -8.86918e-006 v 1.35074 2.4 0.375917 f 1 2 3

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: https://webglfundamentals.org/webgl/lessons/webgl-2-textures.html

Today’s Task: Start Creating a Skybox Grab the example texture mapping code https://courses.engr.illinois.edu/cs418/fa2017/HelloTexture.js …and the other necessary files Change the code load the six textures for the MP http://aerotwist.com/static/tutorials/create-your-own-environment-maps/sample.zip 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