Learning WebGLで学ぶWebGL入門
Upcoming SlideShare
Loading in...5
×
 

Learning WebGLで学ぶWebGL入門

on

  • 12,448 views

WebGL勉強会 ...

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

Statistics

Views

Total Views
12,448
Views on SlideShare
10,954
Embed Views
1,494

Actions

Likes
10
Downloads
69
Comments
1

5 Embeds 1,494

http://d.hatena.ne.jp 1477
http://sunday.sitemix.jp 9
http://translate.googleusercontent.com 5
http://nakamura001.hatenablog.com 2
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Learning WebGLで学ぶWebGL入門 Learning WebGLで学ぶWebGL入門 Presentation Transcript

  • Learning WebGL WebGL nakamura001
  • Lesson 1 URLhttp://learningwebgl.com/blog/?p=28
  • https://github.com/gpjt/webgl-lessons
  • https://sites.google.com/site/hackthewebgl/learning- webglhon-yaku/the-lessons/lesson-1
  • 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>
  • 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>
  • 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>
  • 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); }
  • 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); }
  • 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); }
  • gl.OpenGL ES WebGL (※Learning WebGL )
  • gl.OpenGL ES WebGL (※Learning WebGL ) gl.clearColor() ↓ glClearColor()
  • gl. OpenGL ES WebGL (※Learning WebGL )gl.clearColor() ↓glClearColor()
  • glTranslate() glTranslated() glTranslatef()void glTranslated(GLdouble x, GLdouble y, GLdouble z)void glTranslatef(GLfloat x, GLfloat y, GLfloat z)
  • OpenGL OpenGL OpenGL EShttp://d.hatena.ne.jp/nakamura001/20080918/1221738923
  • initGL()
  • 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); }
  • 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); }
  • 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 :-("); }}
  • initBuffers()
  • 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); }
  • 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); }
  • 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 ];
  • (X,Y,Z) 3
  • 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 ];
  • 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 ];
  • 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 ];
  • 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 ];
  • 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;
  • triangleVertexPositionBuffer.itemSize = 3; triangleVertexPositionBuffer.numItems = 3; .itemSize .numItems ( )※OpenGL ES※ gl.vertexAttribPointer() gl.drawArrays()
  • 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;
  • drawScene()
  • 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); }
  • 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); }
  • function drawScene() { gl.viewport(0, 0, gl.viewportWidth,gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  • •• ( ) DirectX Z
  • perspective(45, gl.viewportWidth / gl.viewportHeight,0.1, 100.0); gluPerspective
  • loadIdentity();mvTranslate([-1.5, 0.0, -7.0]);
  • loadIdentity();mvTranslate([-1.5, 0.0, -7.0]); glTranslate
  • gl.drawArrays(gl.TRIANGLES, 0,triangleVertexPositionBuffer.numItems);
  • gl.drawArrays(gl.TRIANGLES, 0,triangleVertexPositionBuffer.numItems); ※ 1 1
  • gl.drawArrays(gl.TRIANGLE_STRIP, 0,squareVertexPositionBuffer.numItems);
  • gl.drawArrays(gl.TRIANGLE_STRIP, 0,squareVertexPositionBuffer.numItems); 2 + 1
  • gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems); 2 + 1 GL_TRIANGLE_STRIPhttp://d.hatena.ne.jp/nakamura001/20081231/1230719279
  • initShaders()
  • 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); }
  • 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); }
  • var shaderProgram;function initShaders() { var fragmentShader = getShader(gl, "shader-fs"); var vertexShader = getShader(gl, "shader-vs"); shaderProgram = gl.createProgram();
  • GLSL(OpenGL Shading Language) http://d.hatena.ne.jp/nakamura001/20090927/1254058173
  • <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>
  • <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>
  • 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)
  • 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)
  • ••
  • <script type="text/javascript" src="sylvester.js"></script><script type="text/javascript" src="glUtils.js"></script> Sylvester http://sylvester.jcoglan.com/ ※sylvester.src.js