1 / 41

WebGL - use JavaScript for 3D visualization

WebGL - use JavaScript for 3D visualization. By Christo Tsvetanov. Who am I?. An Infragistics friend A long term enthusiast of 3D Fascinates of mobile perspectives . Web Graphics Library. A Khronos group standard JavaScript meets the GPU Fast programmable drawing

cale
Download Presentation

WebGL - use JavaScript for 3D visualization

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WebGL - use JavaScript for 3D visualization By Christo Tsvetanov

  2. Who am I? • An Infragistics friend • A long term enthusiast of 3D • Fascinates of mobile perspectives

  3. Web Graphics Library • A Khronos group standard • JavaScript meets the GPU • Fast programmable drawing • OpenGL ES 2.0 for HTML5 Canvas

  4. Desktop Browsers • Google Chrome – WebGL has been enabled on all platforms that have a capable graphics card • Mozilla Firefox • Safari – disabled by default • Opera • Internet Explorer -  using third-party plugins such as  using third-party plugins such as IEWebGL

  5. Mobile Browsers • Nokia N900 • BlackBerry PlayBook • Google Chrome for Android • Firefox for mobile for Android • The Sony Ericsson Xperia range of Android • Opera Mobile 12 final for Android • Tizen 1.0

  6. 3D Theory • 3D Objects • Meshes, Vertices, Faces and Normals • Colors and Textures • Phong reflection model • UV Mapping • Transformations • Matrices • Shader-based drawing

  7. A polygon mesh is a collection of vertices, edges and faces that defines the shape of a polyhedral object in 3D computer graphics and solid modeling Meshes

  8. Vertex (vertices)

  9. Face

  10. Normal vector

  11. Faces visibility

  12. Phong reflection model • Ambient • Ambient color is the color of an object where it is in shadow. This color is what the object reflects when illuminated by ambient light rather than direct light. • Diffuse • Diffuse color is the most instinctive meaning of the color of an object. It is that essential color that the object reveals under pure white light. It is perceived as the color of the object itself rather than a reflection of the light. 

  13. Phong reflection model • Emissive • This is the self-illumination color an object has. • Specular • Specular color is the color of the light of a specular reflection (specular reflection is the type of reflection that is characteristic of light reflected from a shiny surface) 

  14. Phong reflection model

  15. UV mapping

  16. World (Model – View) Matrix

  17. World (Model – View) Matrix • worldMatrix =  rotateMatrix * translateMatrix * scaleMatrix • rotateMatrix = rotateX * rotateY *rotateZ • WebGL (glMatrix) • varmvMatrix = mat4.create(); • mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]); • mat4.rotate(mvMatrix, degToRad(rTri), [0, 1, 0]); • … rotateX, rotateY, rotateZ, scale

  18. View (Camera) Matrix

  19. Projection Matrix

  20. Projection Matrix • WebGL • varpMatrix = mat4.create(); • mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

  21. Shaders • Shadersare computer programs that runs on the graphics processing unit and are used to do shading - the production of appropriate levels of light and darkness within an image. • Vertex shader • Run once for each vertex given to the graphics processor • Pixel (fragment) shader • Compute color and other attributes of each pixel

  22. Pipeline JavaScript Fragment shader Buffers Uniform variables Attributes Per-fragment stuff Vertex shader Varying variables Frame buffer Primitive assembly / rasterization Modified varying variables

  23. Vertex shader attribute vec3 aVertexPosition; attribute vec4 aVertexColor; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 vColor; void main(void) { gl_Position= uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor= aVertexColor; }

  24. Fragment shader precision mediump float; varying vec4 vColor; void main(void) { gl_FragColor = vColor; }

  25. WebGL demo • http://learningwebgl.com/lessons/lesson04/index.html

  26. Three.js • Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js scripts may be used in conjunction with the HTML5canvas element, SVG or WebGL.

  27. Features • Renderers: Canvas, SVG and WebGL. • Effects: Anaglyph, cross-eyed and parallax barrier. • Scenes: add and remove objects at run-time; fog • Cameras: perspective and orthographic; controllers: trackball, FPS, path and more • Animation: armatures, forward kinematics, inverse kinematics, morph and keyframe

  28. Features • Lights: ambient, direction, point and spot lights; shadows: cast and receive • Materials: Lambert, Phong, smooth shading, textures and more • Shaders: access to full OpenGL Shading Language (GLSL) capabilities: lens flare, depth pass and extensive post-processing library • Objects: meshes, particles, sprites, lines, ribbons, bones and more - all with Level of detail

  29. Features • Geometry: plane, cube, sphere, torus, 3D text and more; modifiers: lathe, extrude and tube • Data loaders: binary, image, JSON and scene • Utilities: full set of time and 3D math functions including frustum, matrix, Quaternian, UVs and more • Export and import: utilities to create Three.js-compatible JSON files from within: Blender, openCTM, FBX, Max, and OBJ

  30. Features • Support: API documentation is under construction, public forum and wiki in full operation • Examples: Over 150 files of coding examples plus fonts, models, textures, sounds and other support files • Debugging: Stats.js, WebGL Inspector, Three.js Inspector

  31. Variables and functions var renderer; var scene; var camera; varcubeMesh; initializeScene(); animateScene();

  32. Create a render if (Detector.webgl) { renderer = new THREE.WebGLRenderer({ antialias: true }); } else { renderer = new THREE.CanvasRenderer(); }

  33. Set the renderer renderer.setSize(canvasWidth, canvasHeight); document.getElementById("WebGLCanvas").appendChild(renderer.domElement);

  34. Create the scene and camera scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, canvasWidth/ canvasHeight, 1, 100); camera.position.set(0, 0, 10); camera.lookAt(scene.position); scene.add(camera);

  35. Create mesh – texture, geometry, material varcubeGeometry = new THREE.CubeGeometry(2.0, 2.0, 2.0); varsponsorsTexture = new THREE.ImageUtils.loadTexture("Sponsors.png"); varcubeMaterial = new THREE.MeshBasicMaterial({ map : sponsorsTexture, side : THREE.DoubleSide });

  36. Create mesh and add to scene cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial); cubeMesh.position.set(0.0, 0.0, 4.0); scene.add(cubeMesh);

  37. Animate function animateScene() { xRotation += xSpeed; yRotation += ySpeed; cubeMesh.rotation.set(xRotation, yRotation, zRotation); cubeMesh.position.z = zTranslation; requestAnimationFrame(animateScene); renderer.render(scene, camera); }

  38. Links - WebGL • Tutorial: • http://learningwebgl.com/blog/?page_id=1217 • Matrix library – glMatrix • https://code.google.com/p/glmatrix/

  39. Links – three.js • Source • http://mrdoob.github.io/

  40. Expect very soon: SharePoint Saturday! • Saturday, June 8, 2013 • Same familiar format – 1 day filled with sessions focused on SharePoint technologies • Best SharePoint professionals in the region • Registrations will be open next week (15th)! • www.SharePointSaturday.eu

  41. Thanks to our Sponsors: Diamond Sponsor: Platinum Sponsors: Gold Sponsors: Swag Sponsors: Media Partners:

More Related