Scribd
Upload
57 views

WebGL Examples

This document provides code examples for drawing basic shapes in WebGL. It introduces HelloCanvas, which clears the canvas to black. HelloPoint1 draws a single red point using vertex and fragment shaders. The code defines shaders, clears the canvas, and draws with gl.drawArrays. InitShaders compiles and links the shaders. This lays the groundwork for basic WebGL rendering.

Uploaded by

nania.armando
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
57 views

WebGL Examples

This document provides code examples for drawing basic shapes in WebGL. It introduces HelloCanvas, which clears the canvas to black. HelloPoint1 draws a single red point using vertex and fragment shaders. The code defines shaders, clears the canvas, and draws with gl.drawArrays. InitShaders compiles and links the shaders. This lays the groundwork for basic WebGL rendering.

Uploaded by

nania.armando
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

WebGL: First Examples

Web links

dl.dropboxusercontent.com/u/8439397/WebGLbook/ch02/
HelloCanvas.html HelloCanvas.js
HelloPoint1.html HelloPoint1.js
HelloPoint2.html HelloPoint2.js
ClickedPoints.html ClickedPoints.js
ColoredPoints.html ColoredPoints.js
HelloCanvas.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /> <title>Clear "canvas"</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script src="../lib/webgl-utils.js"></script> <script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script> <script src="HelloCanvas.js"></script>
</body>
</html>
HelloCanvas.js
// HelloCanvas.js (c) 2012 matsuda
function main() {
// Retrieve <canvas> element
var canvas = document.getElementById('webgl');
// Get the rendering context for WebGL
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// Set clear color
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
}
Processing Flow
HelloPoint1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /> <title>Draw a point (1)</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script src="../lib/webgl-utils.js"></script><script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script><script src="HelloPoint1.js"></script>
</body>
</html>
HelloPoint1.js 1/2
// HelloPoint1.js (c) 2012 matsuda
// Vertex shader program
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;\n' + // Set the point size
'}\n';

// Fragment shader program


var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
'}\n';
HelloPoint1.js 2/2
function main() {
var canvas = document.getElementById('webgl'); // Retrieve <canvas> element
var gl = getWebGLContext(canvas); // Get the rendering context for WebGL
if (!gl) { console.log('Failed to get the rendering context for WebGL'); return; }
// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return; }
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Specify the color for clearing <canvas>
gl.clear(gl.COLOR_BUFFER_BIT); // Clear <canvas>
gl.drawArrays(gl.POINTS, 0, 1); // Draw a point
}
getWebGLContext
gl.clearColor
gl.clear
Buffers
WebGL Flow of Execution
WebGL Simplified Flow of Execution
Processing Flow
initShaders
Behavior of InitShaders
Variables and Data Types
Variables for Fragment Shader
gl.drawArrays
gl.getAttribLocation
gl.vertexAttrib**

You might also like