SlideShare a Scribd company logo

Learning WebGLで学ぶWebGL入門

•
•
nakamura001
nakamura001

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

1 of 82
Download to read offline
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

Recommended

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 web
pjcozzi
 
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.js
Future 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 HMR
Javier Abadía
 
Threejs使ってみた
Threejs使ってみたThreejs使ってみた
Threejs使ってみた
Takesxi Sximada
 
Bs webgl소모임004
Bs webgl소모임004Bs webgl소모임004
Bs webgl소모임004
Seonki Paik
 
JavaScript on the Desktop
JavaScript on the DesktopJavaScript on the Desktop
JavaScript on the Desktop
Domenic Denicola
 
Integrating Angular js & three.js
Integrating Angular js & three.jsIntegrating Angular js & three.js
Integrating Angular js & three.js
Josh Staples
 

Recommended

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 web
pjcozzi
 
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.js
Future 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 HMR
Javier Abadía
 
Threejs使ってみた
Threejs使ってみたThreejs使ってみた
Threejs使ってみた
Takesxi Sximada
 
Bs webgl소모임004
Bs webgl소모임004Bs webgl소모임004
Bs webgl소모임004
Seonki Paik
 
JavaScript on the Desktop
JavaScript on the DesktopJavaScript on the Desktop
JavaScript on the Desktop
Domenic Denicola
 
Integrating Angular js & three.js
Integrating Angular js & three.jsIntegrating Angular js & three.js
Integrating Angular js & three.js
Josh 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
Moustamera
Bram 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 Will
Vincenzo Barone
 
ES6 is Nigh
ES6 is NighES6 is Nigh
ES6 is Nigh
Domenic Denicola
 
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume LaforgeGroovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Guillaume Laforge
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JS
Nicolas Embleton
 
Javascript is your (Auto)mate
Javascript is your (Auto)mateJavascript is your (Auto)mate
Javascript is your (Auto)mate
Codemotion
 
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJS
FITC
 
Reactive, component 그리고 angular2
Reactive, component 그리고 angular2Reactive, component 그리고 angular2
Reactive, component 그리고 angular2
Jeado 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 Services
Rainer 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 2013
Laurent_VB
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
Eyal 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 Animations
Eyal 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 components
Tudor Barbu
 
HTML5 y WebGL
HTML5 y WebGLHTML5 y WebGL
HTML5 y WebGL
Raul Jimenez
 
WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.js
yomotsu
 

More Related Content

What's hot

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
Moustamera
Bram Vandewalle
 
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
Vincenzo Barone
 
ES6 is Nigh
ES6 is NighES6 is Nigh
ES6 is Nigh
Domenic Denicola
 
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume LaforgeGroovy Ecosystem - JFokus 2011 - Guillaume Laforge
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
Guillaume Laforge
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JS
Nicolas Embleton
 
Javascript is your (Auto)mate
Javascript is your (Auto)mateJavascript is your (Auto)mate
Javascript is your (Auto)mate
Codemotion
 
Building a Startup Stack with AngularJS
Building a Startup Stack with AngularJSBuilding a Startup Stack with AngularJS
Building a Startup Stack with AngularJS
FITC
 
Reactive, component 그리고 angular2
Reactive, component 그리고 angular2Reactive, component 그리고 angular2
Reactive, component 그리고 angular2
Jeado 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 Services
Rainer 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 2013
Laurent_VB
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
Eyal 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 Animations
Eyal 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 components
Tudor Barbu
 

What's hot (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
 

Viewers also liked

HTML5 y WebGL
HTML5 y WebGLHTML5 y WebGL
HTML5 y WebGL
Raul Jimenez
 
WebGL and Three.js
WebGL and Three.jsWebGL and Three.js
WebGL and Three.js
yomotsu
 
Intro to Three.js
Intro to Three.jsIntro to Three.js
Intro to Three.js
Kentucky JavaScript Users Group
 
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és
Biblioteca 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 Motion
Lee Trout
 
Mini-Training: JS Graphical Libraries
Mini-Training: JS Graphical LibrariesMini-Training: JS Graphical Libraries
Mini-Training: JS Graphical Libraries
Betclic Everest Group Tech Team
 
WebGL 2.0 Reference Guide
WebGL 2.0 Reference GuideWebGL 2.0 Reference Guide
WebGL 2.0 Reference Guide
The Khronos Group Inc.
 
Firefox WebGL developer tools
Firefox WebGL developer toolsFirefox WebGL developer tools
Firefox WebGL developer tools
Victor Porof
 

Viewers also liked (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
 

Similar to 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.pdf
saxenaavnish1
 
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 WebGL
gerbille
 
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
Mahmoud 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 202
Mahmoud 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 184
Mahmoud 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 196
Mahmoud 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.pdf
alokopticalswatchco0
 
Computer Graphics and Multimedia lab report
Computer Graphics and Multimedia lab reportComputer Graphics and Multimedia lab report
Computer Graphics and Multimedia lab report
Bijoy679
 
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
Mahmoud 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 189
Mahmoud 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 180
Mahmoud 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 181
Mahmoud 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 180
Mahmoud 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 196
Mahmoud 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 196
Mahmoud Samir Fayed
 

Similar to 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
 

Recently uploaded

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
Peter Spielvogel
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 

Recently uploaded (20)

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 

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