Visualizing Shading Algorithms


Visualizing shading algorithms require specialized hardware and software support. Direct-X and OpenGL lack portability and often require specialized libraries. Modern browsers provide limited support for 3D visualization. SVG is a booming technology that is interactive and portable. Combined with JavaScript, a program can visualize 3D shading algorithms. The proposed program implements two Shading algorithms in SVG. The purpose of this paper is the implement a portable method to test shading algorithms. Scalable Vector Graphics renders 2D graphics efficiently, but there is a strong lack of support for 3D visualization. Java, X3D, VRML support 3D visualization, but each requires plug-in or specialized browsers. The solution is a 3D engine developed with JavaScript and SVG. JavaScript is supported by most modern browsers and SVG is an open standard fully/partially supported by the latest versions of Firefox, Opera, Safari and Chrome. JavaScript enables programmers to directly modify the DOM (Document Object Model) with SVG. JavaScript provides flexibility with organizing logic models into objects. 3D graphics implementation in SVG and JavaScript display in most modern browsers, and enable users to modify JavaScript code to enhance functionality. This mechanism enables a 3D shading application to dynamically change shading algorithms. The proposed project provides orthogonal view of mesh models affected by a single point light source. Transformations are outside the scope of this project because the purpose of the project is to show the portability and modifiability of 3D application written in SVG and JavaScript. The mesh loader uses AJAX (Asynchronous JavaScript and XML) to load x, y, z, coordinate points and three point faces. The program implements interactive controls to dynamically change material properties of the model. The project implements two shading algorithms that both rely on the Phong Light Model. The flat shading algorithm uses illumination values calculated from the Phong Light Model to color mesh faces. Cartoon shading algorithm contains a two part algorithm consisting of silhouette and illumination values based on a threshold system.

Table of Contents

SVG, JavaScript, and AJAX
Shading Algorithms
Flat Shading
Cartoon Shading
Known Issues
Moving Forward

Shader Algorithms are often visualized using OpenGL and Direct-X. The problem with these APIs is the lack portability between different operating systems and hardware. Changes to code require recompilation and management of library files. Java, X3D, VRML support 3D visualization, but each require plug-ins or specialized browsers. So what’s the solution? How about SVG! Sure it’s not designed for 3D graphics, but it’s highly portable. Combined with JavaScript and DOM(Document Object Model) programming, SVG can be dynamic. This project will implement a mesh model viewer. Mesh models are viewed through orthogonal view with a single point light source. Transformations are outside the scope of this project because the purpose of the project is to show the portability and modifiability of SVG. The mesh loader uses AJAX (Asynchronous JavaScript and XML) to load x, y, z, coordinate points and three point faces. Models were borrowed from The Stanford 3D Scanning Repository. The model viewer will enable users to modify the models material properties as well as the light source position and illumination properties. The shading algorithms implemented are flat shading and cartoon shading. The goal of this project is to implement a mechanism in SVG to quickly switch between the two shading algorithms.

SVG is open source, easy to learn, and compatible with most modern browsers. Unlike the OpenGL and Direct-X, SVG will work on any operating system that supports a modern browser. JavaScript is another tool well known for its dynamic capabilities. By combining SVG and JavaScript, we can control how graphics are rendered, thus enabling us to control our shading models and more. JavaScript and SVG enable direct modification of the DOM with SVG elements. AJAX is used to load mesh models from a local source.

The project implements two shading algorithms that both rely on the Phong Light Model. Note with SVG we do not have direct control over each pixel. The Phong Light Model requires each model to have ambient, specular, and material properties. These values ranging from 0 to 255 determine how light reacts to an objects surface. Likewise, the Phong Light Model also requires ambient, diffuse, specular light properties. These values are set by default, but can be changed using the control panel. Changing material and light properties will affect the models shading.

I = ka x ia + kd x (L dot N) x id + ks x (R dot V)^a x is

Phong Lighting Equation for single light source.

  • I: color value of a given face ranging from 0 to 255.

  • ka, kd, ks: ambient, diffuse, specular coefficients determined by material properties of the model valued from 0 to 255.

  • ia, id, is: ambient, diffuse, specular intensities of the light source valued from 0 to 1.

  • a: determines how shininess of the mesh valued from 0 to 1.

  • L: unit vector from the mesh to the light source.

  • N: unit normal vector of the current face.

  • R: reflection vector mirroring the light vector.

  • V: unit vector from mesh to the viewer.

  • dot: dot product.

Converting 2D graphics into 3D graphics requires maneuvering. The project is greatly simplified by using orthogonal perspective. With orthogonal view, objects closer to the camera are the same size as objects far from the camera. In terms of implementation, the program simply drops the Z-coordinate when drawing a mesh triangle. A major difference between 3D languages and SVG is the lack of support for Z-index. Z-index determines depth order of faces and which faces are drawn on top. To mimic Z-index, the mesh faces are sorted in order of average depth of the three points representing the face. Shapes drawn last are displayed on top. Note the implementation simplifies mesh intersection by allowing the closer mesh to be viewed on top. Once sorted, each face is added to the DOM tree by inserting SVG Polygons. Each polygon contains a fill attribute equal to color values determined by the current shading algorithm. Silhouette for Cartoon Shading is drawn with SVG lines added after the mesh model. This ensures the silhouette is visible above the mesh model. When line weights are increased, artifacts are noticeable where line edges meet.

There are certain restrictions to SVG vector graphics. SVG uses vector graphics as opposed to raster graphics. The lack of control over pixels prevents us from implementing complex pixel shaders. There are alternatives such as using filters to mimic effects on mesh faces, but this process is expensive computationally. Tessellation can improve the visual look of your model, but performance is greatly reduced as more mesh faces are broken down. OpenGL and Direct-X do have portability issues, but in contrast to SVG they were designed to optimize 3D rendering through hardware. There will always be overhead when implementing 3D over a browser, but there are currently developments to utilize graphics hardware in browsers.

More research is going into support for GPU processing and JavaScript. Research in GPU support by browser may open the way for an efficient, yet portable shader tool. It is well in our capability to integrate the support for vertex shading, and even geometry shading. Because SVG is vector graphics, there will always be limited ability to mimic raster graphics and an inability to produce a true pixel shader. By applying filters to mesh faces, SVG gives a limited ability to fake pixel shading. Through future implementations, it seems logical to create a framework which organizes JavaScript code and how shading algorithms are applied. Other projects such as “3D Animation Using SVG and XSLT” by Peter Gould, Prof Bob Hopgood, and Prof David A. Duce have shown SVG can create animated 3D graphics in perspective view. By integrating methods learned in that paper, the project can incorporate transforms, perspective view, and animation.