OpenJSGL Web 3D Rendering Without Plug-Ins Andrés Buriticá Loyola Marymount University Faculty Mentor: John David N. Dionisio

Transcription

1 OpenJSGL Web 3D Rendering Without Plug-Ins Andrés Buriticá Loyola Marymount University Faculty Mentor: John David N. Dionisio Southern California Conference for Undergraduate Research November 17, 2007 Introduction 3D graphics Applications The Worldwide Web

2 Concept OpenGL JavaScript OpenJSGL Previous Work: 3D In A Browser Java applets Flash JavaScript VRML, later called X3D Java Web Start Other platform-specific Web plug-ins

3 OpenJSGL Pipeline Flow Modelview transform [Lighting disabled] Calculate vertex color Set vertex color to current color Projection transform Clip [Clipping disabled] Cull [HSR disabled] HSR Viewport transform Shade Source Code Comparison OpenJSGL jsgl.jsglcolor3f(1.0, 0.0, 0.0); jsgl.jsglmatrixmode(jsgl.jsgl_projection); jsgl.jsglloadidentity(); jsgl.jsglfrustum(-1, 1, -1, 1, 2, 6); jsgl.jsglmatrixmode(jsgl.jsgl_modelview); jsgl.jsgltranslatef(0.0, 0.0, -3.0); jsgl.jsglrotatef(45.0, 1, 0, 0); jsgl.jsglshademodel(jsgl.jsgl_smooth); jsgl.jsglmaterialfv(jsgl.jsgl_front, JSGL.JSGL_AMBIENT,matAmb); jsgl.jsglenable(jsgl.jsgl_lighting); jsgl.jsglenable(jsgl.jsgl_light0); OpenGL glcolor3f(1.0, 0.0, 0.0); glmatrixmode(gl_projection); glloadidentity(); glfrustum(-1, 1, -1, 1, 2, 6); glmatrixmode(gl_modelview); gltranslatef(0.0, 0.0, -3.0); glrotatef(45.0, 1, 0, 0); glshademodel(gl_smooth); glmaterialfv(gl_front, GL_AMBIENT, matamb); glenable(gl_lighting); glenable(gl_light0);

4 Geometry Package Vertex3D x: float y: float z: float Vector3D add(vertex3d, Vertex3D): Vertex3D dot(vertex3d, Vertex3D): float minus(vertex3d, Vertex3D): Vertex3D multiply(vertex3d, Vertex3D): Vertex3D divide(vertex3d, Vertex3D): Vertex3D len(vertex3d): float normalize(vertex3d): Vertex3D project(vertex3d): Vertex3D cross(vertex3d): Vertex3D Matrix4x4 cells[4][4] add(matrix4x4): Matrix4x4 minus(matrix4x4): Matrix4x4 multiplyscalar(float): Matrix4x4 multiplymatrix(matrix4x4): Matrix4x4 multiplyvector(vertex3d): Matrix4x4 loadindentity(): void ortho(...): void perspective(...): void frustum(...): void lookat(...): void rotate(...): void scale(...): void translate(...): void viewport(...): void Graphics Package PrimitiveVertex vertex: Vertex3D normal: Vertex3D color: Color Material ambient: Color diffuse: Color specular: Color emission: Color shininess: float Color r: float g: float b: float a: float Light ambient: Color diffuse: Color specular: Color directional: bool position: Vertex3D h: Vertex3D l: Vertex3D enabled: bool spotdirection: Vertex3D spotexponent: float spotcutoff: float constantattenuation: float linearattenuation: float quadraticattenuation: float

5 OpenJSGL Class OpenJSGL JSGL_FALSE JSGL_TRUE JSGL_POINT JSGL_LINE_STRIP JSGL_LINE_LOOP JSGL_POLYGON JSGL_QUAD_STRIP JSGL_TRIANGLE_STRIP JSGL_FLAT JSGL_SMOOTH JSGL_MODELVIEW JSGL_PROJECTION JSGL_AMBIENT JSGL_DIFFUSE JSGL_SPECULAR JSGL_SHININESS JSGL_EMISSION JSGL_POSITION OpenJSGL (cont!d) JSGL_LIGHTING JSGL_LIGHT0..7 JSGL_LIGHT_MODEL_AMBIENT JSGL_LIGHT_MODEL_LOCAL_VIEWER JSGL_CONSTANT_ATTENUATION JSGL_LINEAR_ATTENUATION JSGL_QUADRATIC_ATTENUATION JSGL_SPOT_DIRECTION JSGL_SPOT_EXPONENT JSGL_SPOT_CUTOFF JSGL_NORMALIZE JSGL_CULL_FACE JSGL_DEPTH_TEST JSGL_CLIP JSGL_COLOR_BUFFER_BIT JSGL_DEPTH_BUFFER_BIT OpenJSGL (cont!d) jsglmatrixmode(int): void jsglloadidentity(): void jsglrotatef(float, float, float, float): void jsglscalef(float, float, float): void jsgltranslatef(float, float, float): void jsgllookat(...): void jsglfrustum(...): void jsglperspective(...): void jsglortho(...): void jsglviewport(...): void jsglpushmatrix(): void jsglpopmatrix(): void jsglshademodel(int): void jsgkmaterial[fv](...): void jsgllightmodel[ifv](...): void jsgllight[fv](...): void jsglenable(int): void jsgldisable(int): void jsglclear(bit): void jsglvertex3[fv](...): void jsglnormal3[fv](...): void jsglcolor3[fv](...): void jsglcolor4[fv](...): void jsglclearcolor(float, float, float): void jsglbegin(int):void jsglend(): void Demos Sphere Animated cubes

6 Performance Comparison Algorithms Hardware vs. software Polygon count & clipping Target applications Optimization Anti-aliasing Processor Data Bus Speed Chipset Type Cache RAM 1.5 GHz Intel Celeron M MHz Mobile Intel 910GML Express 1 MB L2 512 MB DDR PC MHz Performance Data Frames Per Second OpenGL* OpenJSGL Cubes Triangle Spotlights Sphere * Anti-aliased; aliased OpenGL yields thousands of frames per second

7 Side by Side Smooth-shaded triangle Spotlights What Does This Mean? Moore s Law Shading Desktop applications Web applications

8 Conclusion & Future Work OpenJSGL is slower, but still potentially useful for certain 3D applications Disable anti-aliasing in canvas tag Preserve OpenJSGL interface, but provide native implementation via a new 3D tag Acknowledgments LMU professors Friends & family

9 Thank You