- Drag left mouse: Rotate camera
- Drag middle mouse: Pan camera
- Draw right mouse: Zoom
- [C] Center camera
- [G] Draw grid
- [L] Toggle light

I used the same base code I developed for the HTML5 pointcloud viewer for the raytracer however much simplified. The whole ray tracer is implemented in the fragments shader. The vertex shader creates the primary rays. The result is displayed using a full-screen quad which acts as the input primitive. I still use my camera class that provides me with the OpenGL matrices to set up the ray tracing. That way I can easily support different projection methods, etc and maintain some kind of compatibility to other WebGL code.

The vertex shader sets up all primary rays that intersect the scene. I am drawing a fullscreen quad with 2D vertices in [0--1]. These vertices are first transformed into full clipspace coordinates and from there to world coordinates (don't forget to divide by w!), giving both the near and far plane coordinates for each corner vertex. The ray origin is alway the nearplane pixel, the ray direction the vector from the near plane to the far plane position. We are doing this in the vertex shader for all 4 corner vertices and the result will be interpolated for the fragment shader.

Here is the full code of the shader:

// input position in [0..1] attribute vec2 positionIn; // output ray origin and direction varying vec3 rayOrigin; varying vec3 rayDirection; // the inverse ModelViewProjectionMatrix from our OpenGL cameras uniform mat4 inverseMVP; void main() { // expand the vertex to [-1..1] vec2 vertex = positionIn * 2.0 - vec2(1.0); // Calculate the farplane vertex position. // Input is clipspace, output is worldspace vec4 farPlane = inverseMVP * vec4(vertex, 1.0, 1.0); farPlane /= farPlane.w; // Same as above for the near plane. // Remember the near plane in OpenGL is at z=-1 vec4 nearPlane = inverseMVP * vec4(vertex, -1.0, 1.0); nearPlane /= nearPlane.w; // No need to normalize ray direction here, as it might get // interpolated (and become non-unit) before going to the fragment // shader. rayDirection = (farPlane.xyz - nearPlane.xyz); rayOrigin = nearPlane.xyz; // output the actual clipspace position for OpenGL gl_Position = vec4(vertex, 0.0, 1.0); }

The actual ray tracing happens here. To keep it super-simple, I packed the full source of a simple ray tracer into the shader. A ray is created from the inputs of the vertex shader and used to intersect a couple of spheres and the ground floor. The spheres have a simple material system: a diffuse color and a 'reflectance' value that determines if a secondary ray is spawned and how much the new hit contributes. Usually, this would run recursively until a threshold value is reached, however in GLSL we are stuck with for loops with static initialization so we have to go through N iterations anyway.

If a hit is recorded and the current hit is closer to the ray origin than any previous hit (lower line parameter t), we can calculate its shading based on the material, position and normal. A secondary ray is spawned towards the (only) light source to see if the the pixel is lit or not.

Here is (most) of the source from the fragment shader:

varying vec3 rayDirection; varying vec3 rayOrigin; // point light uniform vec3 light0; struct Ray { vec3 origin; vec3 direction; }; struct Material { vec3 diffuse; float reflectance; }; struct Hit { vec3 position; vec3 normal; float t; Material material; }; struct Sphere { // coords + radius vec3 center; float radius; Material material; }; // a small epsilon to work around the biggest problems with floats const float EPS = 0.0001; // 'clear value' for the ray const float START_T = 100000.0; // maximum recursion depth for rays const int MAX_DEPTH = 3; Ray initRay() { Ray r; r.origin = rayOrigin; r.direction = normalize(rayDirection); return r; } // intersects the ray with a sphere and returns the line parameter t for // a hit or -1 if not hit occured float intersectRaySphere(in Ray ray, in Sphere sphere) { ... } // simplified ray-sphere hit test, returns true on a hit bool intersectRaySphereOcclusion(in Ray ray, in Sphere sphere) { ... } // intersects the ray with the ground plane at Y=0 and returns the line // parameter t where it hit float intersectRayYPlane(in Ray ray) { return -ray.origin.y / ray.direction.y; } // the scene consists of 7 spheres, a ground plane an a light Sphere spheres[7]; // initializes the scene void initScene() { // set the center, radius and material of the first sphere spheres[0].center = vec3(0.0, 4.0, 0.0); spheres[0].radius = 2.0; spheres[0].material.diffuse = vec3(0.7, 0.0, 0.0); spheres[0].material.reflectance = 0.1; // and so on ... } // traces the scene and reports the closest hit bool traceScene(in Ray ray, inout Hit hit) { hit.t = START_T; // first intersect the ground float t = intersectRayYPlane(ray); if (t >= 0.0 && t <= hit.t) { hit.t = t; hit.position = ray.origin + ray.direction * t; hit.normal = vec3(0,1,0); hit.material.diffuse = vec3(0.6); hit.material.reflectance = 0.0;//05; } // then check each of the seven sphers for (int i = 0; i < 7; ++i) { t = intersectRaySphere(ray, spheres[i]); // only keep this hit if it's closer (smaller t) if (t >= 0.0 && t <= hit.t) { vec3 pos = ray.origin + ray.direction * t;; vec3 N = normalize(pos - spheres[i].center); hit.t = t; hit.normal = N; hit.material = spheres[i].material; hit.position = pos; } } return hit.t < START_T; } // shades a given hit and returns the final color vec3 shadeHit(in Hit hit) { vec3 color = hit.material.diffuse; // ray to the light vec3 L = normalize(light0 - hit.position); // test for shadows Ray r; r.origin = hit.position + hit.normal * EPS; r.direction = L; // Phong shading with 0.2 min. ambient contribution. float s = max(0.2, dot(L,hit.normal)); for (int i = 0; i < 7; ++i) if (intersectRaySphereOcclusion(r, spheres[i])) { s = 0.2; break; } color *= s; return color; } void main() { // create the primary ray Ray ray = initRay(); // create the scene initScene(); // the 'clear color' is the ray direction (useful for debugging) vec3 color = ray.direction; Hit hit; // trace the scene and see if we hit something if (traceScene(ray, hit)) { // if we do, shade the hit color = shadeHit(hit); // cannot use a while loop in glsl :( -- iterate for N recursions for (int i =0 ; i < MAX_DEPTH; ++i) { // add reflections if the material is reflective float r = hit.material.reflectance; if (r > 0.0) { vec3 R = reflect(ray.direction, hit.normal); ray.origin = hit.position + hit.normal * EPS; ray.direction = R; ray.depth += 1; vec3 color2; // again, trace the scene and shade the hit if successful if (traceScene(ray, hit)) color2 = shadeHit(hit); else color2 = ray.direction; // add the color based on the reflection value color = mix(color, color2, r); } } } gl_FragColor = vec4(color, 1.0); }