SlideShare ist ein Scribd-Unternehmen logo

Learning WebGLで学ぶWebGL入門

•
•
nakamura001
nakamura001

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

Technologie
1 von 82
Downloaden Sie, um offline zu lesen
Learning WebGL WebGL nakamura001
Lesson 1 URL http://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 ES http://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_STRIP http://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

Empfohlen

WebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open webWebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open webpjcozzi
 
Web3D - Semantic standards, WebGL, HCI
Web3D - Semantic standards, WebGL, HCIWeb3D - Semantic standards, WebGL, HCI
Web3D - Semantic standards, WebGL, HCIVictor Porof
 
Creating Applications with WebGL and Three.js
Creating Applications with WebGL and Three.jsCreating Applications with WebGL and Three.js
Creating Applications with WebGL and Three.jsFuture Insights
 
Vue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMRVue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMRJavier Abadía
 
Threejs使ってみた
Threejs使ってみたThreejs使ってみた
Threejs使ってみたTakesxi Sximada
 
Bs webgl소모임004
Bs webgl소모임004Bs webgl소모임004
Bs webgl소모임004Seonki Paik
 
JavaScript on the Desktop
JavaScript on the DesktopJavaScript on the Desktop
JavaScript on the DesktopDomenic Denicola
 
Integrating Angular js & three.js
Integrating Angular js & three.jsIntegrating Angular js & three.js
Integrating Angular js & three.jsJosh Staples
 

Empfohlen

WebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open webWebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open webpjcozzi
 
Web3D - Semantic standards, WebGL, HCI
Web3D - Semantic standards, WebGL, HCIWeb3D - Semantic standards, WebGL, HCI
Web3D - Semantic standards, WebGL, HCIVictor Porof
 
Creating Applications with WebGL and Three.js
Creating Applications with WebGL and Three.jsCreating Applications with WebGL and Three.js
Creating Applications with WebGL and Three.jsFuture Insights
 
Vue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMRVue.js + Django - configuración para desarrollo con webpack y HMR
Vue.js + Django - configuración para desarrollo con webpack y HMRJavier Abadía
 
Threejs使ってみた
Threejs使ってみたThreejs使ってみた
Threejs使ってみたTakesxi Sximada
 
Bs webgl소모임004
Bs webgl소모임004Bs webgl소모임004
Bs webgl소모임004Seonki Paik
 
JavaScript on the Desktop
JavaScript on the DesktopJavaScript on the Desktop
JavaScript on the DesktopDomenic Denicola
 
Integrating Angular js & three.js
Integrating Angular js & three.jsIntegrating Angular js & three.js
Integrating Angular js & three.jsJosh Staples
 
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...GITS Indonesia
 
Getting Started with WebGL
Getting Started with WebGLGetting Started with WebGL
Getting Started with WebGLChihoon Byun
 
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...Techsylvania
 
Moustamera
MoustameraMoustamera
MoustameraBram Vandewalle
 
фабрика Blockly
фабрика Blocklyфабрика Blockly
фабрика BlocklyЕвгений Белов
 
Jeroen Vloothuis Bend Kss To Your Will
Jeroen Vloothuis Bend Kss To Your WillJeroen Vloothuis Bend Kss To Your Will
Jeroen Vloothuis Bend Kss To Your WillVincenzo Barone
 
ES6 is Nigh
ES6 is NighES6 is Nigh
ES6 is NighDomenic Denicola
 
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume LaforgeGroovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume LaforgeGuillaume Laforge
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSNicolas Embleton
 
Javascript is your (Auto)mate
Javascript is your (Auto)mateJavascript is your (Auto)mate
Javascript is your (Auto)mateCodemotion
 
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJSFITC
 
Reactive, component 그리고 angular2
Reactive, component 그리고 angular2Reactive, component 그리고 angular2
Reactive, component 그리고 angular2Jeado Ko
 
Introducing perf budgets on CI with puppeteer - perf.now()
Introducing perf budgets on CI with puppeteer - perf.now()Introducing perf budgets on CI with puppeteer - perf.now()
Introducing perf budgets on CI with puppeteer - perf.now()Önder Ceylan
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile ServicesAngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile ServicesRainer Stropek
 
Developing web-apps like it's 2013
Developing web-apps like it's 2013Developing web-apps like it's 2013
Developing web-apps like it's 2013Laurent_VB
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
 
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Domenic Denicola
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS AnimationsEyal Vardi
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todaygerbille
 
Web components
Web componentsWeb components
Web componentsTudor Barbu
 
HTML5 y WebGL
HTML5 y WebGLHTML5 y WebGL
HTML5 y WebGLRaul Jimenez
 
WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.jsyomotsu
 

Weitere ähnliche Inhalte

Was ist angesagt?

Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...GITS Indonesia
 
Getting Started with WebGL
Getting Started with WebGLGetting Started with WebGL
Getting Started with WebGLChihoon Byun
 
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...Techsylvania
 
Jeroen Vloothuis Bend Kss To Your Will
Jeroen Vloothuis Bend Kss To Your WillJeroen Vloothuis Bend Kss To Your Will
Jeroen Vloothuis Bend Kss To Your WillVincenzo Barone
 
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume LaforgeGroovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume LaforgeGuillaume Laforge
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSNicolas Embleton
 
Javascript is your (Auto)mate
Javascript is your (Auto)mateJavascript is your (Auto)mate
Javascript is your (Auto)mateCodemotion
 
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJSFITC
 
Reactive, component 그리고 angular2
Reactive, component 그리고 angular2Reactive, component 그리고 angular2
Reactive, component 그리고 angular2Jeado Ko
 
Introducing perf budgets on CI with puppeteer - perf.now()
Introducing perf budgets on CI with puppeteer - perf.now()Introducing perf budgets on CI with puppeteer - perf.now()
Introducing perf budgets on CI with puppeteer - perf.now()Önder Ceylan
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile ServicesAngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile ServicesRainer Stropek
 
Developing web-apps like it's 2013
Developing web-apps like it's 2013Developing web-apps like it's 2013
Developing web-apps like it's 2013Laurent_VB
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
 
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Domenic Denicola
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS AnimationsEyal Vardi
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todaygerbille
 

Was ist angesagt? (20)

Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
 
Getting Started with WebGL
Getting Started with WebGLGetting Started with WebGL
Getting Started with WebGL
 
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
 
Moustamera
MoustameraMoustamera
Moustamera
 
фабрика Blockly
фабрика Blocklyфабрика Blockly
фабрика Blockly
 
Jeroen Vloothuis Bend Kss To Your Will
Jeroen Vloothuis Bend Kss To Your WillJeroen Vloothuis Bend Kss To Your Will
Jeroen Vloothuis Bend Kss To Your Will
 
ES6 is Nigh
ES6 is NighES6 is Nigh
ES6 is Nigh
 
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume LaforgeGroovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JS
 
Javascript is your (Auto)mate
Javascript is your (Auto)mateJavascript is your (Auto)mate
Javascript is your (Auto)mate
 
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJS
 
Reactive, component 그리고 angular2
Reactive, component 그리고 angular2Reactive, component 그리고 angular2
Reactive, component 그리고 angular2
 
Introducing perf budgets on CI with puppeteer - perf.now()
Introducing perf budgets on CI with puppeteer - perf.now()Introducing perf budgets on CI with puppeteer - perf.now()
Introducing perf budgets on CI with puppeteer - perf.now()
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile ServicesAngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile Services
 
Developing web-apps like it's 2013
Developing web-apps like it's 2013Developing web-apps like it's 2013
Developing web-apps like it's 2013
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
 
AngularJS Animations
AngularJS AnimationsAngularJS Animations
AngularJS Animations
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
 
Web components
Web componentsWeb components
Web components
 

Andere mochten auch

WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.jsyomotsu
 
3D in the Browser via WebGL: It's Go Time
3D in the Browser via WebGL: It's Go Time 3D in the Browser via WebGL: It's Go Time
3D in the Browser via WebGL: It's Go Time Pascal Rettig
 
Producción científica de la Universidad de Extremadura: Cifras de interés
Producción científica de la Universidad de Extremadura: Cifras de interésProducción científica de la Universidad de Extremadura: Cifras de interés
Producción científica de la Universidad de Extremadura: Cifras de interésBiblioteca Universidad de Extremadura
 
Introduction to three.js & Leap Motion
Introduction to three.js & Leap MotionIntroduction to three.js & Leap Motion
Introduction to three.js & Leap MotionLee Trout
 
Firefox WebGL developer tools
Firefox WebGL developer toolsFirefox WebGL developer tools
Firefox WebGL developer toolsVictor Porof
 

Andere mochten auch (9)

HTML5 y WebGL
HTML5 y WebGLHTML5 y WebGL
HTML5 y WebGL
 
WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.js
 
Intro to Three.js
Intro to Three.jsIntro to Three.js
Intro to Three.js
 
3D in the Browser via WebGL: It's Go Time
3D in the Browser via WebGL: It's Go Time 3D in the Browser via WebGL: It's Go Time
3D in the Browser via WebGL: It's Go Time
 
Producción científica de la Universidad de Extremadura: Cifras de interés
Producción científica de la Universidad de Extremadura: Cifras de interésProducción científica de la Universidad de Extremadura: Cifras de interés
Producción científica de la Universidad de Extremadura: Cifras de interés
 
Introduction to three.js & Leap Motion
Introduction to three.js & Leap MotionIntroduction to three.js & Leap Motion
Introduction to three.js & Leap Motion
 
Mini-Training: JS Graphical Libraries
Mini-Training: JS Graphical LibrariesMini-Training: JS Graphical Libraries
Mini-Training: JS Graphical Libraries
 
WebGL 2.0 Reference Guide
WebGL 2.0 Reference GuideWebGL 2.0 Reference Guide
WebGL 2.0 Reference Guide
 
Firefox WebGL developer tools
Firefox WebGL developer toolsFirefox WebGL developer tools
Firefox WebGL developer tools
 

Ähnlich wie Learning WebGLで学ぶWebGL入門

Modify code to change cube into pyramid.Javascriptuse strict.pdf
Modify code to change cube into pyramid.Javascriptuse strict.pdfModify code to change cube into pyramid.Javascriptuse strict.pdf
Modify code to change cube into pyramid.Javascriptuse strict.pdfsaxenaavnish1
 
Tutorial Open GL (Listing Code)
Tutorial Open GL (Listing Code)Tutorial Open GL (Listing Code)
Tutorial Open GL (Listing Code)Aila Gema Safitri
 
Leaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLLeaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLgerbille
 
The Ring programming language version 1.9 book - Part 65 of 210
The Ring programming language version 1.9 book - Part 65 of 210The Ring programming language version 1.9 book - Part 65 of 210
The Ring programming language version 1.9 book - Part 65 of 210Mahmoud Samir Fayed
 
Programa de objetos 3 d wire
Programa de objetos 3 d wirePrograma de objetos 3 d wire
Programa de objetos 3 d wireRené Domínguez
 
The Ring programming language version 1.8 book - Part 61 of 202
The Ring programming language version 1.8 book - Part 61 of 202The Ring programming language version 1.8 book - Part 61 of 202
The Ring programming language version 1.8 book - Part 61 of 202Mahmoud Samir Fayed
 
The Ring programming language version 1.5.3 book - Part 65 of 184
The Ring programming language version 1.5.3 book - Part 65 of 184The Ring programming language version 1.5.3 book - Part 65 of 184
The Ring programming language version 1.5.3 book - Part 65 of 184Mahmoud Samir Fayed
 
The Ring programming language version 1.7 book - Part 63 of 196
The Ring programming language version 1.7 book - Part 63 of 196The Ring programming language version 1.7 book - Part 63 of 196
The Ring programming language version 1.7 book - Part 63 of 196Mahmoud Samir Fayed
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScriptersgerbille
 
1. Modify code to change cube into pyramid.2. Make the pyramid int.pdf
1. Modify code to change cube into pyramid.2. Make the pyramid int.pdf1. Modify code to change cube into pyramid.2. Make the pyramid int.pdf
1. Modify code to change cube into pyramid.2. Make the pyramid int.pdfalokopticalswatchco0
 
Computer Graphics and Multimedia lab report
Computer Graphics and Multimedia lab reportComputer Graphics and Multimedia lab report
Computer Graphics and Multimedia lab reportBijoy679
 
The Ring programming language version 1.10 book - Part 66 of 212
The Ring programming language version 1.10 book - Part 66 of 212The Ring programming language version 1.10 book - Part 66 of 212
The Ring programming language version 1.10 book - Part 66 of 212Mahmoud Samir Fayed
 
The Ring programming language version 1.6 book - Part 57 of 189
The Ring programming language version 1.6 book - Part 57 of 189The Ring programming language version 1.6 book - Part 57 of 189
The Ring programming language version 1.6 book - Part 57 of 189Mahmoud Samir Fayed
 
The Ring programming language version 1.5.1 book - Part 53 of 180
The Ring programming language version 1.5.1 book - Part 53 of 180The Ring programming language version 1.5.1 book - Part 53 of 180
The Ring programming language version 1.5.1 book - Part 53 of 180Mahmoud Samir Fayed
 
The Ring programming language version 1.5.2 book - Part 54 of 181
The Ring programming language version 1.5.2 book - Part 54 of 181The Ring programming language version 1.5.2 book - Part 54 of 181
The Ring programming language version 1.5.2 book - Part 54 of 181Mahmoud Samir Fayed
 
The Ring programming language version 1.5.1 book - Part 64 of 180
The Ring programming language version 1.5.1 book - Part 64 of 180The Ring programming language version 1.5.1 book - Part 64 of 180
The Ring programming language version 1.5.1 book - Part 64 of 180Mahmoud Samir Fayed
 
The Ring programming language version 1.7 book - Part 59 of 196
The Ring programming language version 1.7 book - Part 59 of 196The Ring programming language version 1.7 book - Part 59 of 196
The Ring programming language version 1.7 book - Part 59 of 196Mahmoud Samir Fayed
 
The Ring programming language version 1.7 book - Part 60 of 196
The Ring programming language version 1.7 book - Part 60 of 196The Ring programming language version 1.7 book - Part 60 of 196
The Ring programming language version 1.7 book - Part 60 of 196Mahmoud Samir Fayed
 

Ähnlich wie Learning WebGLで学ぶWebGL入門 (20)

Modify code to change cube into pyramid.Javascriptuse strict.pdf
Modify code to change cube into pyramid.Javascriptuse strict.pdfModify code to change cube into pyramid.Javascriptuse strict.pdf
Modify code to change cube into pyramid.Javascriptuse strict.pdf
 
Tutorial Open GL (Listing Code)
Tutorial Open GL (Listing Code)Tutorial Open GL (Listing Code)
Tutorial Open GL (Listing Code)
 
Leaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLLeaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGL
 
The Ring programming language version 1.9 book - Part 65 of 210
The Ring programming language version 1.9 book - Part 65 of 210The Ring programming language version 1.9 book - Part 65 of 210
The Ring programming language version 1.9 book - Part 65 of 210
 
Programa de objetos 3 d wire
Programa de objetos 3 d wirePrograma de objetos 3 d wire
Programa de objetos 3 d wire
 
The Ring programming language version 1.8 book - Part 61 of 202
The Ring programming language version 1.8 book - Part 61 of 202The Ring programming language version 1.8 book - Part 61 of 202
The Ring programming language version 1.8 book - Part 61 of 202
 
The Ring programming language version 1.5.3 book - Part 65 of 184
The Ring programming language version 1.5.3 book - Part 65 of 184The Ring programming language version 1.5.3 book - Part 65 of 184
The Ring programming language version 1.5.3 book - Part 65 of 184
 
The Ring programming language version 1.7 book - Part 63 of 196
The Ring programming language version 1.7 book - Part 63 of 196The Ring programming language version 1.7 book - Part 63 of 196
The Ring programming language version 1.7 book - Part 63 of 196
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScripters
 
1. Modify code to change cube into pyramid.2. Make the pyramid int.pdf
1. Modify code to change cube into pyramid.2. Make the pyramid int.pdf1. Modify code to change cube into pyramid.2. Make the pyramid int.pdf
1. Modify code to change cube into pyramid.2. Make the pyramid int.pdf
 
Computer Graphics and Multimedia lab report
Computer Graphics and Multimedia lab reportComputer Graphics and Multimedia lab report
Computer Graphics and Multimedia lab report
 
The Ring programming language version 1.10 book - Part 66 of 212
The Ring programming language version 1.10 book - Part 66 of 212The Ring programming language version 1.10 book - Part 66 of 212
The Ring programming language version 1.10 book - Part 66 of 212
 
Open GL Tutorial10
Open GL Tutorial10Open GL Tutorial10
Open GL Tutorial10
 
The Ring programming language version 1.6 book - Part 57 of 189
The Ring programming language version 1.6 book - Part 57 of 189The Ring programming language version 1.6 book - Part 57 of 189
The Ring programming language version 1.6 book - Part 57 of 189
 
Practica
PracticaPractica
Practica
 
The Ring programming language version 1.5.1 book - Part 53 of 180
The Ring programming language version 1.5.1 book - Part 53 of 180The Ring programming language version 1.5.1 book - Part 53 of 180
The Ring programming language version 1.5.1 book - Part 53 of 180
 
The Ring programming language version 1.5.2 book - Part 54 of 181
The Ring programming language version 1.5.2 book - Part 54 of 181The Ring programming language version 1.5.2 book - Part 54 of 181
The Ring programming language version 1.5.2 book - Part 54 of 181
 
The Ring programming language version 1.5.1 book - Part 64 of 180
The Ring programming language version 1.5.1 book - Part 64 of 180The Ring programming language version 1.5.1 book - Part 64 of 180
The Ring programming language version 1.5.1 book - Part 64 of 180
 
The Ring programming language version 1.7 book - Part 59 of 196
The Ring programming language version 1.7 book - Part 59 of 196The Ring programming language version 1.7 book - Part 59 of 196
The Ring programming language version 1.7 book - Part 59 of 196
 
The Ring programming language version 1.7 book - Part 60 of 196
The Ring programming language version 1.7 book - Part 60 of 196The Ring programming language version 1.7 book - Part 60 of 196
The Ring programming language version 1.7 book - Part 60 of 196
 

Kürzlich hochgeladen

The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 

Kürzlich hochgeladen (20)

The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 

Learning WebGLで学ぶWebGL入門

  • 1. Learning WebGL WebGL nakamura001
  • 2.
  • 5. https://sites.google.com/site/hackthewebgl/learning- webglhon-yaku/the-lessons/lesson-1
  • 6.
  • 7.
  • 8. 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>
  • 9. 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>
  • 10. 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>
  • 11. 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); }
  • 12. 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); }
  • 13. 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); }
  • 14. gl. OpenGL ES WebGL (※Learning WebGL )
  • 15. gl. OpenGL ES WebGL (※Learning WebGL ) gl.clearColor() ↓ glClearColor()
  • 16. gl. OpenGL ES WebGL (※Learning WebGL ) gl.clearColor() ↓ glClearColor()
  • 17. glTranslate() glTranslated() glTranslatef() void glTranslated(GLdouble x, GLdouble y, GLdouble z) void glTranslatef(GLfloat x, GLfloat y, GLfloat z)
  • 18. OpenGL OpenGL OpenGL ES http://d.hatena.ne.jp/nakamura001/20080918/1221738923
  • 19.
  • 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. 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. 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 :-("); } }
  • 25. 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); }
  • 26. 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); }
  • 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. (X,Y,Z) 3
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35. 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 ];
  • 36. 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 ];
  • 37. 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 ];
  • 38. 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 ];
  • 39. 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;
  • 40. triangleVertexPositionBuffer.itemSize = 3; triangleVertexPositionBuffer.numItems = 3; .itemSize .numItems ( ) ※OpenGL ES ※ gl.vertexAttribPointer() gl.drawArrays()
  • 41. 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;
  • 43. 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); }
  • 44. 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); }
  • 45. function drawScene() { gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  • 46.
  • 47.
  • 48. • • ( ) DirectX Z
  • 49. perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0); gluPerspective
  • 52.
  • 57. gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems); 2 + 1 GL_TRIANGLE_STRIP http://d.hatena.ne.jp/nakamura001/20081231/1230719279
  • 59. 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); }
  • 60. 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); }
  • 61. var shaderProgram; function initShaders() { var fragmentShader = getShader(gl, "shader-fs"); var vertexShader = getShader(gl, "shader-vs"); shaderProgram = gl.createProgram();
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68. GLSL(OpenGL Shading Language) http://d.hatena.ne.jp/nakamura001/20090927/1254058173
  • 69.
  • 70. <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>
  • 71. <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>
  • 72. 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)
  • 73. 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)
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82. <script type="text/javascript" src="sylvester.js"></ script> <script type="text/javascript" src="glUtils.js"></script> Sylvester http://sylvester.jcoglan.com/ ※sylvester.src.js