Getting Started with WebGL

6,785 views

Published on

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
  • You may want to consider a better way to convert a Blender scene to WebGL - using a new open source 3D framework called Blend4Web http://www.blend4web.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,785
On SlideShare
0
From Embeds
0
Number of Embeds
2,080
Actions
Shares
0
Downloads
0
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Getting Started with WebGL

    1. 1. WEB GL @zziuni zziuni.pe.kr
    2. 2. INDEXWhat’s WebGL?Several Feature of WebGLHow to Using WebGLWow! ... So, What?Reference
    3. 3. WHAT’S WEB GL WebGLJavascript Binding for OpenGL ES 2.0 on Browser
    4. 4. WHAT’S WEB GLJavascript Binding for OpenGL ES 2.0 on Browser - coding 3d graphics - draw in canvas element - use new Array Type (Float32Array etc) - use library ( three.js, spider.js, glMatrix.js, webgl-utils.js ...) - use graphic tools ( photoshop, Maya, 3dMax, Blender ...)
    5. 5. WHAT’S WEB GLJavascript Binding for OpenGL ES 2.0 on Browser gl = canvas.getContext("experimental-webgl"); gl.enable(gl.DEPTH_TEST); gl.createShader(gl.VERTEX_SHADER); ...
    6. 6. WHAT’S WEB GLJavascript Binding for OpenGL ES 2.0 on Browser - 2D/3D Computer Graphics API - Cross-Language - Cross-Platform - Managed by Khronos Group http://en.wikipedia.org/wiki/OpenGL
    7. 7. WHAT’S WEB GLJavascript Binding for OpenGL ES 2.0 on Browser - SubSet of OpenGL 3D API - Embedded System - iPhone, iPad, iPodTouch, Android, WebOS, PS3, NDS etc... http://en.wikipedia.org/wiki/OpenGL_ES
    8. 8. WHAT’S WEB GLJavascript Binding for OpenGL ES 2.0 on Browser OpenGL ES’s version 1.0 and 1.1 and 2.0 OpenGL 1.3 <-> OpenGL ES 1.0 OpenGL 1.5 <-> OpenGL ES 1.1 OpenGL 2.0 <-> OpenGL ES 2.0 WebGL <-> OpenGL ES 2.0 <-> OpenGL 2.0
    9. 9. WHAT’S WEB GLJavascript Binding for OpenGL ES 2.0 on Browser Chrome : higher Chrome 10 FireFox : FireFox 4 Safari : on MacOS 10.6 in the webkit nightly Opera : Opera 11 preview IE : no Implement, no Plan.
    10. 10. SEVERAL FEATURE OF WEBGLrequestAnimationFrame()Shaders and GLSLJavascript is used directly by GPU
    11. 11. requestAnimationFrame()Define Syntaxrequest that the browser window.requestAnimationFrame([callback]);schedule a repaint of the window window.mozRequestAnimationFrame([callback]);for the next animateion frame window.webkitRequestAnimationFrame([callback]); Sample window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || Demo window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, element) { window.setTimeout(callback, 1000/60); }; })();
    12. 12. Shaders and GLSLDefineUsed to program GPU programable rendering pipelineVertex shader Source Sample Fragment Shader Source Sample<script id="shader-vs" type="x-shader/x-vertex"> <script id="shader-fs" type="x-shader/x-fragment"> attribute vec3 aVertexPosition; #ifdef GL_ES attribute vec2 aTextureCoord; precision highp float; #endif uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec2 vTextureCoord; varying vec2 vTextureCoord; uniform sampler2D uSampler; void main(void) { void main(void) { gl_Position = uPMatrix * uMVMatrix * gl_FragColor = texture2D(uSampler,vec4(aVertexPosition, 1.0); vec2(vTextureCoord.s, vTextureCoord.t)); vTextureCoord = aTextureCoord; } } </script></script>
    13. 13. Javascript is used directly by GPUvar texture = gl.createTexture();texture.image = new Images();texture.image.src = “sample.png”gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, true );gl.bindTexture( gl.TEXTURE_2D, texture );gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image );gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST );gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST );
    14. 14. HOW TO USING WEBGLPreparedHow to draw 3DSource Demo
    15. 15. Prepared- PC with supported 3d graphic card- Chrome 11 or FireFox 4- WebGL Inspector- google animationframe.js- spider.js or three.js (optons)- matrix.js (options)- Blender (options)
    16. 16. How to draw 3D <Light> Ambient, Diffuse, <ViewPort> Specula Perspective<Your eye> Projection <Model> transition, rotation, scaling
    17. 17. Demo1Demo 1Draw Method- drawArray(GLenum mode, GLint first, GLsizei count);- drawElements(GLenum mode, GLsizei count, GLenum type, GLintptr offset);Draw Mode- TRIANGLES- TRIANGLE_STRIP- TRIANGLE_FANDraw Frame- requestAnimationFrame();
    18. 18. Demo 2Load Blender export file on three.jsbit of three.js Source loader = new THREE.JSONLoader( ); loader.load( { model: "obj/suzanne/suzanneHi.js", callback: onGeometry } );run on FilerFox4, not ChromeBlenderOpen source 3D content creation suite. ( http://www.blender.org )Blender 2.57 WebGL exporterhttps://github.com/mrdoob/three.js/utils/exporters/blender/2.57Blender 2.5.6 WebGL exporter (recommend)https://github.com/mrdoob/three.js/utils/exporters/blender/2.56Blender 2.4.9 WebGL exporterhttp://code.google.com/p/blender-webgl-exporter/
    19. 19. WOW... SO, WHAT? .3D Tools .WebGL Resource engine .One model data Multi Platform .
    20. 20. REFERENCEThe Wow and the How blender-webgl-exporter LearningWebGL.com SpiderGL WebGL Inspector GwtGLWebGL Spec Quake3 web Pepez.com Three.js NeHe Shader and GLSL Firejune.com Web Terminal zziuni.pe.kr requestAnimationFrame() Blender Model Repository javascript typed array
    21. 21. END

    ×