Learning WebGLで学ぶWebGL入門

12,624 views

Published on

WebGL勉強会 第5回(http://atnd.org/events/11693)で発表をした時のスライドに少し、加筆したもの。WebGLをこれから勉強する方のとっかかりに成る様に意識して作成したので、発表向けというより授業向けに近い内容と成っています。

Published in: Technology
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total views
12,624
On SlideShare
0
From Embeds
0
Number of Embeds
1,622
Actions
Shares
0
Downloads
75
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

Learning WebGLで学ぶWebGL入門

  1. 1. Learning WebGL WebGL nakamura001
  2. 2. Lesson 1 URLhttp://learningwebgl.com/blog/?p=28
  3. 3. https://github.com/gpjt/webgl-lessons
  4. 4. https://sites.google.com/site/hackthewebgl/learning- webglhon-yaku/the-lessons/lesson-1
  5. 5. HTML<body onload="webGLStart();"> <a href="http://learningwebgl.com/blog/?p=28">&lt;&lt;Back to Lesson 1</a><br /> <canvas id="lesson01-canvas" style="border: none;"width="500" height="500"></canvas> <br/> <a href="http://learningwebgl.com/blog/?p=28">&lt;&lt;Back to Lesson 1</a><br /></body>
  6. 6. HTML<body onload="webGLStart();"> <a href="http://learningwebgl.com/blog/?p=28">&lt;&lt;Back to Lesson 1</a><br /> <canvas id="lesson01-canvas" style="border: none;"width="500" height="500"></canvas> <br/> <a href="http://learningwebgl.com/blog/?p=28">&lt;&lt;Back to Lesson 1</a><br /></body>
  7. 7. HTML<body onload="webGLStart();"> <a href="http://learningwebgl.com/blog/?p=28">&lt;&lt;Back to Lesson 1</a><br /> <canvas id="lesson01-canvas" style="border: none;"width="500" height="500"></canvas> <br/> <a href="http://learningwebgl.com/blog/?p=28">&lt;&lt;Back to Lesson 1</a><br /></body>
  8. 8. JavaScript function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); setInterval(drawScene, 15); }
  9. 9. function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); setInterval(drawScene, 15); }
  10. 10. function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); setInterval(drawScene, 15); }
  11. 11. gl.OpenGL ES WebGL (※Learning WebGL )
  12. 12. gl.OpenGL ES WebGL (※Learning WebGL ) gl.clearColor() ↓ glClearColor()
  13. 13. gl. OpenGL ES WebGL (※Learning WebGL )gl.clearColor() ↓glClearColor()
  14. 14. glTranslate() glTranslated() glTranslatef()void glTranslated(GLdouble x, GLdouble y, GLdouble z)void glTranslatef(GLfloat x, GLfloat y, GLfloat z)
  15. 15. OpenGL OpenGL OpenGL EShttp://d.hatena.ne.jp/nakamura001/20080918/1221738923
  16. 16. initGL()
  17. 17. function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); setInterval(drawScene, 15); }
  18. 18. function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); setInterval(drawScene, 15); }
  19. 19. var gl;function initGL(canvas) { try { gl = canvas.getContext("experimental-webgl"); gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; } catch(e) { } if (!gl) { alert("Could not initialise WebGL, sorry :-("); }}
  20. 20. initBuffers()
  21. 21. function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); setInterval(drawScene, 15); }
  22. 22. function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); setInterval(drawScene, 15); }
  23. 23. var triangleVertexPositionBuffer; var squareVertexPositionBuffer; 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 ];
  24. 24. (X,Y,Z) 3
  25. 25. var triangleVertexPositionBuffer; var squareVertexPositionBuffer; 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 ];
  26. 26. var triangleVertexPositionBuffer; var squareVertexPositionBuffer; 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 ];
  27. 27. var triangleVertexPositionBuffer; var squareVertexPositionBuffer; 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 ];
  28. 28. var triangleVertexPositionBuffer; var squareVertexPositionBuffer; 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 ];
  29. 29. var triangleVertexPositionBuffer; var squareVertexPositionBuffer; 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;
  30. 30. triangleVertexPositionBuffer.itemSize = 3; triangleVertexPositionBuffer.numItems = 3; .itemSize .numItems ( )※OpenGL ES※ gl.vertexAttribPointer() gl.drawArrays()
  31. 31. squareVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,squareVertexPositionBuffer); vertices = [ 1.0, 1.0, 0.0, -1.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); squareVertexPositionBuffer.itemSize = 3; squareVertexPositionBuffer.numItems = 4;
  32. 32. drawScene()
  33. 33. function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); setInterval(drawScene, 15); }
  34. 34. function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); setInterval(drawScene, 15); }
  35. 35. function drawScene() { gl.viewport(0, 0, gl.viewportWidth,gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  36. 36. •• ( ) DirectX Z
  37. 37. perspective(45, gl.viewportWidth / gl.viewportHeight,0.1, 100.0); gluPerspective
  38. 38. loadIdentity();mvTranslate([-1.5, 0.0, -7.0]);
  39. 39. loadIdentity();mvTranslate([-1.5, 0.0, -7.0]); glTranslate
  40. 40. gl.drawArrays(gl.TRIANGLES, 0,triangleVertexPositionBuffer.numItems);
  41. 41. gl.drawArrays(gl.TRIANGLES, 0,triangleVertexPositionBuffer.numItems); ※ 1 1
  42. 42. gl.drawArrays(gl.TRIANGLE_STRIP, 0,squareVertexPositionBuffer.numItems);
  43. 43. gl.drawArrays(gl.TRIANGLE_STRIP, 0,squareVertexPositionBuffer.numItems); 2 + 1
  44. 44. gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems); 2 + 1 GL_TRIANGLE_STRIPhttp://d.hatena.ne.jp/nakamura001/20081231/1230719279
  45. 45. initShaders()
  46. 46. function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); setInterval(drawScene, 15); }
  47. 47. function webGLStart() { var canvas = document.getElementById("lesson01-canvas"); initGL(canvas); initShaders(); initBuffers(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); setInterval(drawScene, 15); }
  48. 48. var shaderProgram;function initShaders() { var fragmentShader = getShader(gl, "shader-fs"); var vertexShader = getShader(gl, "shader-vs"); shaderProgram = gl.createProgram();
  49. 49. GLSL(OpenGL Shading Language) http://d.hatena.ne.jp/nakamura001/20090927/1254058173
  50. 50. <script id="shader-fs" type="x-shader/x-fragment"> #ifdef GL_ES precision highp float; #endif void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }</script>
  51. 51. <script id="shader-fs" type="x-shader/x-fragment"> #ifdef GL_ES precision highp float; #endif void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }</script>
  52. 52. 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;※ (gl.TRIANGLE_STRIP)
  53. 53. 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;※ (gl.TRIANGLE_STRIP)
  54. 54. ••
  55. 55. <script type="text/javascript" src="sylvester.js"></script><script type="text/javascript" src="glUtils.js"></script> Sylvester http://sylvester.jcoglan.com/ ※sylvester.src.js

×