nakamura001, profile picture
Uploaded bynakamura001
PDF, PPTX3,550 views

Learning WebGLで学ぶWebGL入門

The document is a tutorial on learning WebGL, specifically focusing on lesson 1. It includes code snippets for initializing WebGL, creating shaders, and drawing shapes using triangles and squares. The tutorial emphasizes setting up the WebGL context, clearing the canvas, and managing buffers for rendered objects.

Embed presentation

Download as PDF, PPTX
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

More Related Content

PPT
WebGL: GPU acceleration for the open web
bypjcozzi
 
PPTX
Bs webgl소모임004
bySeonki Paik
 
PPTX
JavaScript on the Desktop
byDomenic Denicola
 
PDF
Creating Applications with WebGL and Three.js
byFuture Insights
 
PDF
Integrating Angular js & three.js
byJosh Staples
 
PPTX
Vue.js + Django - configuración para desarrollo con webpack y HMR
byJavier Abadía
 
ODP
Threejs使ってみた
byTakesxi Sximada
 
PDF
Web3D - Semantic standards, WebGL, HCI
byVictor Porof
 
WebGL: GPU acceleration for the open web
bypjcozzi
 
Bs webgl소모임004
bySeonki Paik
 
JavaScript on the Desktop
byDomenic Denicola
 
Creating Applications with WebGL and Three.js
byFuture Insights
 
Integrating Angular js & three.js
byJosh Staples
 
Vue.js + Django - configuración para desarrollo con webpack y HMR
byJavier Abadía
 
Threejs使ってみた
byTakesxi Sximada
 
Web3D - Semantic standards, WebGL, HCI
byVictor Porof
 

What's hot

PDF
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
byGITS Indonesia
 
PPTX
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
byDomenic Denicola
 
PPTX
AngularJS Architecture
byEyal Vardi
 
PDF
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
byTechsylvania
 
PPTX
AngularJS Animations
byEyal Vardi
 
PPTX
Developing web-apps like it's 2013
byLaurent_VB
 
PDF
Reactive, component 그리고 angular2
byJeado Ko
 
KEY
Getting Started with WebGL
byChihoon Byun
 
PPTX
фабрика Blockly
byЕвгений Белов
 
PDF
Jeroen Vloothuis Bend Kss To Your Will
byVincenzo Barone
 
PDF
Introducing perf budgets on CI with puppeteer - perf.now()
byÖnder Ceylan
 
PDF
Moustamera
byBram Vandewalle
 
PDF
Javascript is your (Auto)mate
byCodemotion
 
PPT
Creating the interfaces of the future with the APIs of today
bygerbille
 
PDF
GDayX - Advanced Angular.JS
byNicolas Embleton
 
KEY
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
byGuillaume Laforge
 
PPTX
Web components
byTudor Barbu
 
PPTX
ES6 is Nigh
byDomenic Denicola
 
PPTX
AngularJS with TypeScript and Windows Azure Mobile Services
byRainer Stropek
 
PDF
Building a Startup Stack with AngularJS
byFITC
 
Fundamental Node.js (Workshop bersama Front-end Developer GITS Indonesia, War...
byGITS Indonesia
 
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
byDomenic Denicola
 
AngularJS Architecture
byEyal Vardi
 
Cristiano Betta (Betta Works) - Lightweight Libraries with Rollup, Riot and R...
byTechsylvania
 
AngularJS Animations
byEyal Vardi
 
Developing web-apps like it's 2013
byLaurent_VB
 
Reactive, component 그리고 angular2
byJeado Ko
 
Getting Started with WebGL
byChihoon Byun
 
фабрика Blockly
byЕвгений Белов
 
Jeroen Vloothuis Bend Kss To Your Will
byVincenzo Barone
 
Introducing perf budgets on CI with puppeteer - perf.now()
byÖnder Ceylan
 
Moustamera
byBram Vandewalle
 
Javascript is your (Auto)mate
byCodemotion
 
Creating the interfaces of the future with the APIs of today
bygerbille
 
GDayX - Advanced Angular.JS
byNicolas Embleton
 
Groovy Ecosystem - JFokus 2011 - Guillaume Laforge
byGuillaume Laforge
 
Web components
byTudor Barbu
 
ES6 is Nigh
byDomenic Denicola
 
AngularJS with TypeScript and Windows Azure Mobile Services
byRainer Stropek
 
Building a Startup Stack with AngularJS
byFITC
 

Viewers also liked

PDF
WebGL and Three.js
byyomotsu
 
PDF
Intro to Three.js
byKentucky JavaScript Users Group
 
PDF
Introduction to three.js & Leap Motion
byLee Trout
 
PDF
WebGL 2.0 Reference Guide
byThe Khronos Group Inc.
 
PDF
3D in the Browser via WebGL: It's Go Time
byPascal Rettig
 
PDF
Mini-Training: JS Graphical Libraries
byBetclic Everest Group Tech Team
 
PDF
Firefox WebGL developer tools
byVictor Porof
 
PDF
HTML5 y WebGL
byRaul Jimenez
 
PDF
Producción científica de la Universidad de Extremadura: Cifras de interés
byBiblioteca Universidad de Extremadura
 
WebGL and Three.js
byyomotsu
 
Intro to Three.js
byKentucky JavaScript Users Group
 
Introduction to three.js & Leap Motion
byLee Trout
 
WebGL 2.0 Reference Guide
byThe Khronos Group Inc.
 
3D in the Browser via WebGL: It's Go Time
byPascal Rettig
 
Mini-Training: JS Graphical Libraries
byBetclic Everest Group Tech Team
 
Firefox WebGL developer tools
byVictor Porof
 
HTML5 y WebGL
byRaul Jimenez
 
Producción científica de la Universidad de Extremadura: Cifras de interés
byBiblioteca Universidad de Extremadura
 

Similar to Learning WebGLで学ぶWebGL入門

PDF
A Novice's Guide to WebGL
byKrzysztof Kula
 
PDF
WebGL - 3D in your Browser
byPhil Reither
 
PDF
"Graphical fun With WebGL shaders", Martin Splitt
byFwdays
 
PDF
Intro to OpenGL ES 2.0
byOleksandr Kozubets
 
KEY
Leaving Flatland: getting started with WebGL
bygerbille
 
PDF
Webgl para JavaScripters
bygerbille
 
PDF
The fallowing program shows the simple transformation #define GLEW.pdf
byarwholesalelors
 
PDF
JS Experience 2017 - Animações simples com o three.js
byiMasters
 
DOCX
Manual
byequipo3-303
 
PDF
The Ring programming language version 1.6 book - Part 164 of 189
byMahmoud Samir Fayed
 
PDF
The Ring programming language version 1.5.1 book - Part 114 of 180
byMahmoud Samir Fayed
 
PDF
The Ring programming language version 1.5.3 book - Part 156 of 194
byMahmoud Samir Fayed
 
PDF
The Ring programming language version 1.7 book - Part 169 of 196
byMahmoud Samir Fayed
 
PDF
The Ring programming language version 1.9 book - Part 157 of 210
byMahmoud Samir Fayed
 
PDF
The Ring programming language version 1.5.3 book - Part 143 of 184
byMahmoud Samir Fayed
 
PDF
The Ring programming language version 1.6 book - Part 151 of 189
byMahmoud Samir Fayed
 
PDF
The Ring programming language version 1.5.3 book - Part 170 of 194
byMahmoud Samir Fayed
 
PDF
The Ring programming language version 1.5.3 book - Part 123 of 184
byMahmoud Samir Fayed
 
PDF
The Ring programming language version 1.5.4 book - Part 110 of 185
byMahmoud Samir Fayed
 
PDF
The Ring programming language version 1.5.4 book - Part 146 of 185
byMahmoud Samir Fayed
 
A Novice's Guide to WebGL
byKrzysztof Kula
 
WebGL - 3D in your Browser
byPhil Reither
 
"Graphical fun With WebGL shaders", Martin Splitt
byFwdays
 
Intro to OpenGL ES 2.0
byOleksandr Kozubets
 
Leaving Flatland: getting started with WebGL
bygerbille
 
Webgl para JavaScripters
bygerbille
 
The fallowing program shows the simple transformation #define GLEW.pdf
byarwholesalelors
 
JS Experience 2017 - Animações simples com o three.js
byiMasters
 
Manual
byequipo3-303
 
The Ring programming language version 1.6 book - Part 164 of 189
byMahmoud Samir Fayed
 
The Ring programming language version 1.5.1 book - Part 114 of 180
byMahmoud Samir Fayed
 
The Ring programming language version 1.5.3 book - Part 156 of 194
byMahmoud Samir Fayed
 
The Ring programming language version 1.7 book - Part 169 of 196
byMahmoud Samir Fayed
 
The Ring programming language version 1.9 book - Part 157 of 210
byMahmoud Samir Fayed
 
The Ring programming language version 1.5.3 book - Part 143 of 184
byMahmoud Samir Fayed
 
The Ring programming language version 1.6 book - Part 151 of 189
byMahmoud Samir Fayed
 
The Ring programming language version 1.5.3 book - Part 170 of 194
byMahmoud Samir Fayed
 
The Ring programming language version 1.5.3 book - Part 123 of 184
byMahmoud Samir Fayed
 
The Ring programming language version 1.5.4 book - Part 110 of 185
byMahmoud Samir Fayed
 
The Ring programming language version 1.5.4 book - Part 146 of 185
byMahmoud Samir Fayed
 

Recently uploaded

PDF
Agentic Intro and Hands-on: Build your first Coded Agent
byUiPathCommunity
 
PDF
[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...
bywintari3
 
PDF
[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...
bywintari3
 
PDF
[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shade...
byWintari Yasmin
 
PDF
[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels
byWintari Yasmin
 
PPTX
UFCD 0797 - SISTEMAS OPERATIVOS_Unidade Completa.pptx
byscribddobruno
 
PDF
[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...
byWintari Yasmin
 
PDF
Transcript: The partnership effect: Libraries and publishers on collaborating...
byBookNet Canada
 
PDF
Lets Build a Serverless Function with Kiro
byChris Bingham
 
PPTX
The power of Slack and MuleSoft | Bangalore MuleSoft Meetup #60
byshyamraj55
 
PDF
ODSC AI West: Agent Optimization: Beyond Context engineering
byShashikant Jagtap
 
PDF
Transforming Content Operations in the Age of AI
byEnterprise Knowledge
 
PDF
Mastering UiPath Maestro – Session 2 – Building a Live Use Case - Session 2
byDianaGray10
 
PDF
Transforming Supply Chains with Amazon Bedrock AgentCore (AWS Swiss User Grou...
byChris Bingham
 
PDF
Open Source Post-Quantum Cryptography - Matt Caswell
byAll Things Open
 
PDF
DUBAI IT MODERNIZATION WITH AZURE MANAGED SERVICES.pdf
byLogicEra
 
PDF
Integrating AI with Meaningful Human Collaboration
byCadabra Studio
 
PPTX
Leon Brands - Intro to GPU Occlusion (Graphics Programming Conference 2024)
byleonbrands1998
 
PPTX
kernel PPT (Explanation of Windows Kernal).pptx
byINFOBYTES1
 
PPTX
Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]
byUiPathCommunity
 
Agentic Intro and Hands-on: Build your first Coded Agent
byUiPathCommunity
 
[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...
bywintari3
 
[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...
bywintari3
 
[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shade...
byWintari Yasmin
 
[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels
byWintari Yasmin
 
UFCD 0797 - SISTEMAS OPERATIVOS_Unidade Completa.pptx
byscribddobruno
 
[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...
byWintari Yasmin
 
Transcript: The partnership effect: Libraries and publishers on collaborating...
byBookNet Canada
 
Lets Build a Serverless Function with Kiro
byChris Bingham
 
The power of Slack and MuleSoft | Bangalore MuleSoft Meetup #60
byshyamraj55
 
ODSC AI West: Agent Optimization: Beyond Context engineering
byShashikant Jagtap
 
Transforming Content Operations in the Age of AI
byEnterprise Knowledge
 
Mastering UiPath Maestro – Session 2 – Building a Live Use Case - Session 2
byDianaGray10
 
Transforming Supply Chains with Amazon Bedrock AgentCore (AWS Swiss User Grou...
byChris Bingham
 
Open Source Post-Quantum Cryptography - Matt Caswell
byAll Things Open
 
DUBAI IT MODERNIZATION WITH AZURE MANAGED SERVICES.pdf
byLogicEra
 
Integrating AI with Meaningful Human Collaboration
byCadabra Studio
 
Leon Brands - Intro to GPU Occlusion (Graphics Programming Conference 2024)
byleonbrands1998
 
kernel PPT (Explanation of Windows Kernal).pptx
byINFOBYTES1
 
Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]
byUiPathCommunity
 

Learning WebGLで学ぶWebGL入門

  • 1.
    Learning WebGL WebGL nakamura001
  • 3.
  • 4.
  • 5.
  • 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 functionwebGLStart() { 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
  • 20.
  • 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 :-("); } }
  • 24.
  • 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.
  • 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;
  • 42.
  • 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);
  • 48.
    • • ( ) DirectX Z
  • 49.
    perspective(45, gl.viewportWidth /gl.viewportHeight, 0.1, 100.0); gluPerspective
  • 50.
  • 51.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems); 2 + 1 GL_TRIANGLE_STRIP http://d.hatena.ne.jp/nakamura001/20081231/1230719279
  • 58.
  • 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();
  • 68.
    GLSL(OpenGL Shading Language) http://d.hatena.ne.jp/nakamura001/20090927/1254058173
  • 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)
  • 74.
  • 82.
    <script type="text/javascript" src="sylvester.js"></ script> <scripttype="text/javascript" src="glUtils.js"></script> Sylvester http://sylvester.jcoglan.com/ ※sylvester.src.js