1 / 12

WebGL

WebGL. Michael Robertson Yuta Takayama. What is WebGL?. WebGL is OpenGL on a web browser. OpenGL is a low-level 3D graphics API Basically, WebGL is a 3D graphics API that generates 3D graphics on a compatible web browser through the use of JavaScript. What is WebGL?.

kaethe
Download Presentation

WebGL

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 Michael Robertson YutaTakayama

  2. What is WebGL? • WebGL is OpenGL on a web browser. • OpenGL is a low-level 3D graphics API • Basically, WebGL is a 3D graphics API that generates 3D graphics on a compatible web browser through the use of JavaScript.

  3. What is WebGL? • WebGL code executes on a computer display card's Graphics Processing Unit (GPU), which must support shader rendering. • It uses the HTML5 canvas element • You can create WebGL scenes without programming by using other tools such as Blender or Maya and then export to WebGL

  4. Security Vulnerabilities • Cross-domain image theft • Graphics memory theft • Client-side denial of service

  5. Sample Program http://learningwebgl.com/lessons/lesson01/index.html

  6. Sample Program - HTML All you need in the body is: <body onload="webGLStart();"> <canvas id="lesson01-canvas" style="border: none;" width="500" height="500"> </canvas> </body> The <canvas> tag supports new kinds of Javascript-drawn elements and is new in html5. The webGL setup code lies in the Javascript function webGLStart which is called once the page is loaded.

  7. Sample Program - webGLStart() function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST); drawScene(); } Initializes the selected canvas for webGL Initializes and gets the shaders (part of the graphics pipeline to build objects and color the associated pixels) Initializes the buffer which holds the object information to output to the display Set the background to black and sets depth testing so we don't draw objects that are behind other objects.

  8. Sample Program - initBuffers() function initBuffers() { triangleVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); var vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); triangleVertexPositionBuffer.itemSize = 3; triangleVertexPositionBuffer.numItems = 3; … Same with square with 4 vertices of size 3 } Initializes the triangle with explicit vertices and fills the current buffer

  9. Sample Program - drawScene() function drawScene() { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.viewport sizes the canvas gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.clear clears the canvas mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix); mat4.perspective sets up the camera and how to view it mat4.identity(mvMatrix); mat4.identity sets the current location to the center of the canvas using the identity matrix (Linear Algebra) using a third-party matrix library "glMatrix" mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]); mat4.translate moves to the left side to draw the triangle

  10. Sample Program - drawScene() gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); call the buffer created earlier gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); initializes the vertices stated earlier SetMatrixUniforms(); Tells webGL to use the mvMatrix we've defined and altered earlier gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems); Draw triangles using the array of vertices … Same with the square }

  11. Sample Program - Shaders The fragment shader sets the color of the triangle/square to white <script id="shader-fs" type="x-shader/x-fragment"> precision mediump float; void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } </script> These shaders are written in GLSL (OpenGL Shading Language) They run on the graphics card These are the most basic shaders The vertex shader (called for every vertex) sets the position of the vertex using matrices defined in the main program (uniform variables) <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); } </script>

  12. Chrome Experiments http://www.chromeexperiments.com/ Once you master, lots of unique things could be done. Such as… WebGL Skin http://alteredqualia.com/three/examples/webgl_materials_skin.html Undulating Monkey http://lab.aerotwist.com/webgl/undulating-monkey/ Spiral Trip http://www.liorhakim.com/spiral

More Related