How could I reflect the environment in webgl without using a library like three.js?

Question

I am trying to figure out how to map the environment to an object. Here's the setting:

How would I make the surface of the kettle a reflection of the environment? Therefore, I mean that instead of the kettle being a dark shade of gray, its surface should reflect the environment, so a chessboard should be displayed on it.

This is an example of what I'm trying to accomplish, but using Three.js and I want to do it on my own (this is for the class).

http://aerotwist.com/tutorials/create-your-own-environment-maps/demo/

It makes sense? How do i get started?

---

Follow-up

I answered this question after the end of my homework: https://stackoverflow.com/a/412960/ See Answer for links and code :)

Answer 1

I found a good example of this teapot here ...

https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/google/shiny-teapot/index.html

Looking through the source code, I found what I was looking for:

function loadCubeMap(base, suffix) { var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR); var faces = [["posx.png", gl.TEXTURE_CUBE_MAP_POSITIVE_X], ["negx.png", gl.TEXTURE_CUBE_MAP_NEGATIVE_X], ["posy.png", gl.TEXTURE_CUBE_MAP_POSITIVE_Y], ["negy.png", gl.TEXTURE_CUBE_MAP_NEGATIVE_Y], ["posz.png", gl.TEXTURE_CUBE_MAP_POSITIVE_Z], ["negz.png", gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]]; for (var i = 0; i < faces.length; i++) { var face = faces[i][1]; var image = new Image(); image.onload = function(texture, face, image) { return function() { gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); gl.texImage2D(face, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); } } (texture, face, image); image.src = faces[i][0]; } return texture; } 

... and an example fragment shader (which has more than I need to display the reflection of the environment) ...

 precision mediump float; const float bumpHeight = 0.2; uniform sampler2D normalSampler; uniform samplerCube envSampler; varying vec2 texCoord; varying vec3 worldEyeVec; varying vec3 worldNormal; varying vec3 worldTangent; varying vec3 worldBinorm; void main() { vec2 bump = (texture2D(normalSampler texCoord.xy).xy * 2.0 - 1.0) * bumpHeight; vec3 normal = normalize(worldNormal); vec3 tangent = normalize(worldTangent); vec3 binormal = normalize(worldBinorm); vec3 nb = normal + bump.x * tangent + bump.y * binormal; nb = normalize(nb); vec3 worldEye = normalize(worldEyeVec); vec3 lookup = reflect(worldEye nb); vec4 color = textureCube(envSampler, lookup); // <--- this was the aha! line gl_FragColor = color; } 

The result was cool ...

Feel free to check it out at http://hristo.oskov.com/projects/cs418/mp3/ . The source code is all that is in its glory ... the code sucks, please do not judge me :) This is the main JS file: http://hristo.oskov.com/projects/cs418/mp3/js/mp3.js . The shaders are on the index.html page, so just browse the source.

Answer 2

The basic approach for displaying a reflective object:

• Placing the camera in the center of the object, visualizing the scene on six textures, representing a view of the six faces of the cube around this object.
• Write a fragment shader that reflects the line of sight along the normal surface and traces to the point where it intersects the cube to find the color visible in the reflection.

(I never did this myself, but I saw textbooks like this one ).