Scribd
Upload
25 views18 pages

Webgl Programs

The document provides a series of examples demonstrating how to use WebGL to draw various shapes, including triangles, lines, and quadrilaterals, through a step-by-step process involving canvas setup, geometry definition, shader creation, and drawing commands. It also includes examples of translating and scaling triangles using uniform variables in shaders. Each example is presented in HTML format with embedded JavaScript for WebGL context manipulation.

Uploaded by

jontymaavis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views18 pages

Webgl Programs

The document provides a series of examples demonstrating how to use WebGL to draw various shapes, including triangles, lines, and quadrilaterals, through a step-by-step process involving canvas setup, geometry definition, shader creation, and drawing commands. It also includes examples of translating and scaling triangles using uniform variables in shaders. Each example is presented in HTML format with embedded JavaScript for WebGL context manipulation.

Uploaded by

jontymaavis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

WEBGL PROGRAMS

1. Five sequential steps followed to draw a simple triangle using WebGL

<!doctype html>
<html>
<body>
<canvas width = "300" height = "300" id =
"my_Canvas"></canvas>

<script>
/* Step1: Prepare the canvas and get WebGL
context */

var canvas =
[Link]('my_Canvas');
var gl = [Link]('experimental-
webgl');

/* Step2: Define the geometry and store it in


buffer objects */

var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0,


-0.5,];

// Create a new buffer object


var vertex_buffer = [Link]();

// Bind an empty array buffer to it


[Link](gl.ARRAY_BUFFER,
vertex_buffer);

// Pass the vertices data to the buffer


[Link](gl.ARRAY_BUFFER, new
Float32Array(vertices), gl.STATIC_DRAW);

// Unbind the buffer


[Link](gl.ARRAY_BUFFER, null);

/* Step3: Create and compile Shader programs


*/

// Vertex shader source code


var vertCode =
'attribute vec2 coordinates;' +
'void main(void) {' + ' gl_Position =
vec4(coordinates,0.0, 1.0);' + '}';

//Create a vertex shader object


var vertShader =
[Link](gl.VERTEX_SHADER);

//Attach vertex shader source code


[Link](vertShader, vertCode);

//Compile the vertex shader


[Link](vertShader);

//Fragment shader source code


var fragCode = 'void main(void) {' +
'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}';

// Create fragment shader object


var fragShader =
[Link](gl.FRAGMENT_SHADER);

// Attach fragment shader source code


[Link](fragShader, fragCode);

// Compile the fragment shader


[Link](fragShader);

// Create a shader program object to store


combined shader program
var shaderProgram = [Link]();

// Attach a vertex shader


[Link](shaderProgram, vertShader);

// Attach a fragment shader


[Link](shaderProgram, fragShader);

// Link both programs


[Link](shaderProgram);

// Use the combined shader program object


[Link](shaderProgram);
/* Step 4: Associate the shader programs to
buffer objects */

//Bind vertex buffer object


[Link](gl.ARRAY_BUFFER,
vertex_buffer);

//Get the attribute location


var coord =
[Link](shaderProgram, "coordinates");

//point an attribute to the currently bound


VBO
[Link](coord, 2, [Link],
false, 0, 0);

//Enable the attribute


[Link](coord);

/* Step5: Drawing the required object (triangle)


*/

// Clear the canvas


[Link](0.5, 0.5, 0.5, 0.9);

// Enable the depth test


[Link](gl.DEPTH_TEST);

// Clear the color buffer bit


[Link](gl.COLOR_BUFFER_BIT);

// Set the view port


[Link](0,0,[Link],[Link]);

// Draw the triangle


[Link]([Link], 0, 3);
</script>
</body>
</html>

2. The following example shows how to create a canvas element with the
dimensions 500 × 500. We have created a border to the canvas using CSS for
visibility.
<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{border:1px solid blue;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "300" height =
"300"></canvas>
</body>
</html>

3. The following example shows how to draw three parallel lines using [Link].

<!doctype html>
<html>
<body>
<canvas width = "300" height = "300" id =
"my_Canvas"></canvas>

<script>
/*======= Creating a canvas =========*/

var canvas =
[Link]('my_Canvas');
var gl = [Link]('experimental-
webgl');

/*======= Defining and storing the


geometry ======*/

var vertices = [
-0.7,-0.1,0,
-0.3,0.6,0,
-0.3,-0.3,0,
0.2,0.6,0,
0.3,-0.3,0,
0.7,0.6,0
]

// Create an empty buffer object


var vertex_buffer = [Link]();

// Bind appropriate array buffer to it


[Link](gl.ARRAY_BUFFER,
vertex_buffer);
// Pass the vertex data to the buffer
[Link](gl.ARRAY_BUFFER, new
Float32Array(vertices), gl.STATIC_DRAW);

// Unbind the buffer


[Link](gl.ARRAY_BUFFER, null);

/*=================== Shaders
====================*/

// Vertex shader source code


var vertCode =
'attribute vec3 coordinates;' +
'void main(void) {' +
' gl_Position = vec4(coordinates,
1.0);' +
'}';

// Create a vertex shader object


var vertShader =
[Link](gl.VERTEX_SHADER);

// Attach vertex shader source code


[Link](vertShader, vertCode);

// Compile the vertex shader


[Link](vertShader);

// Fragment shader source code


var fragCode =
'void main(void) {' +
'gl_FragColor = vec4(0.0, 0.0, 0.0,
0.1);' +
'}';

// Create fragment shader object


var fragShader =
[Link](gl.FRAGMENT_SHADER);
// Attach fragment shader source code
[Link](fragShader, fragCode);

// Compile the fragmentt shader


[Link](fragShader);

// Create a shader program object to store


// the combined shader program
var shaderProgram = [Link]();

// Attach a vertex shader


[Link](shaderProgram,
vertShader);

// Attach a fragment shader


[Link](shaderProgram,
fragShader);

// Link both the programs


[Link](shaderProgram);

// Use the combined shader program object


[Link](shaderProgram);

/*======= Associating shaders to buffer


objects ======*/

// Bind vertex buffer object


[Link](gl.ARRAY_BUFFER,
vertex_buffer);

// Get the attribute location


var coord =
[Link](shaderProgram, "coordinates");

// Point an attribute to the currently


bound VBO
[Link](coord, 3, [Link],
false, 0, 0);

// Enable the attribute


[Link](coord);
/*============ Drawing the triangle
=============*/

// Clear the canvas


[Link](0.5, 0.5, 0.5, 0.9);

// Enable the depth test


[Link](gl.DEPTH_TEST);

// Clear the color and depth buffer


[Link](gl.COLOR_BUFFER_BIT |
gl.DEPTH_BUFFER_BIT);

// Set the view port


[Link](0,0,[Link],[Link]);

// Draw the triangle


[Link]([Link], 0, 6);

// POINTS, LINE_STRIP, LINE_LOOP, LINES,


// TRIANGLE_STRIP,TRIANGLE_FAN, TRIANGLES
</script>
</body>
</html>

4. The following program shows how to create a WebGL application to draw a


quadrilateral.

<!doctype html>
<html>
<body>
<canvas width = "570" height = "570" id =
"my_Canvas"></canvas>

<script>
/*============ Creating a canvas
=================*/
var canvas =
[Link]('my_Canvas');
gl = [Link]('experimental-
webgl');
/*========== Defining and storing the
geometry =========*/

var vertices = [
-0.5,0.5,0.0,
-0.5,-0.5,0.0,
0.5,-0.5,0.0,
0.5,0.5,0.0
];

indices = [3,2,1,3,1,0];

// Create an empty buffer object to store


vertex buffer
var vertex_buffer = [Link]();

// Bind appropriate array buffer to it


[Link](gl.ARRAY_BUFFER,
vertex_buffer);

// Pass the vertex data to the buffer


[Link](gl.ARRAY_BUFFER, new
Float32Array(vertices), gl.STATIC_DRAW);

// Unbind the buffer


[Link](gl.ARRAY_BUFFER, null);

// Create an empty buffer object to store


Index buffer
var Index_Buffer = [Link]();

// Bind appropriate array buffer to it


[Link](gl.ELEMENT_ARRAY_BUFFER,
Index_Buffer);

// Pass the vertex data to the buffer


[Link](gl.ELEMENT_ARRAY_BUFFER, new
Uint16Array(indices), gl.STATIC_DRAW);

// Unbind the buffer


[Link](gl.ELEMENT_ARRAY_BUFFER,
null);
/*====================== Shaders
=======================*/

// Vertex shader source code


var vertCode =
'attribute vec3 coordinates;' +
'void main(void) {' +
' gl_Position = vec4(coordinates,
1.0);' +
'}';

// Create a vertex shader object


var vertShader =
[Link](gl.VERTEX_SHADER);

// Attach vertex shader source code


[Link](vertShader, vertCode);

// Compile the vertex shader


[Link](vertShader);

// Fragment shader source code


var fragCode =
'void main(void) {' +
' gl_FragColor = vec4(0.0, 0.0, 0.0,
0.1);' +
'}';

// Create fragment shader object


var fragShader =
[Link](gl.FRAGMENT_SHADER);

// Attach fragment shader source code


[Link](fragShader, fragCode);

// Compile the fragmentt shader


[Link](fragShader);

// Create a shader program object to


// store the combined shader program
var shaderProgram = [Link]();

// Attach a vertex shader


[Link](shaderProgram, vertShader);
// Attach a fragment shader
[Link](shaderProgram, fragShader);

// Link both the programs


[Link](shaderProgram);

// Use the combined shader program object


[Link](shaderProgram);

/* ======= Associating shaders to buffer


objects =======*/

// Bind vertex buffer object


[Link](gl.ARRAY_BUFFER,
vertex_buffer);

// Bind index buffer object


[Link](gl.ELEMENT_ARRAY_BUFFER,
Index_Buffer);

// Get the attribute location


var coord =
[Link](shaderProgram, "coordinates");

// Point an attribute to the currently bound


VBO
[Link](coord, 3, [Link],
false, 0, 0);

// Enable the attribute


[Link](coord);

/*============= Drawing the Quad


================*/

// Clear the canvas


[Link](0.5, 0.5, 0.5, 0.9);

// Enable the depth test


[Link](gl.DEPTH_TEST);

// Clear the color buffer bit


[Link](gl.COLOR_BUFFER_BIT);
// Set the view port
[Link](0,0,[Link],[Link]);

// Draw the triangle


[Link]([Link],
[Link], gl.UNSIGNED_SHORT,0);
</script>
</body>
</html>

5. Translation of a triangle

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Translation in WebGL</title>
</head>
<body>
<canvas id="glCanvas" width="800" height="400"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec2 aVertexPosition;
uniform vec2 uTranslation;

void main() {
gl_Position = vec4(aVertexPosition + uTranslation, 0.0, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); // White color
}
</script>
<script>
const canvas = [Link]('glCanvas');
const gl = [Link]('webgl');

if (!gl) {
[Link]('Unable to initialize WebGL. Your browser may not
support it.');
}

const originalVertices = [
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5,
];

const translation = [0.0, 0.0]; // Translation vector

const vertexShaderSource =
[Link]('#vertexShader').textContent;
const fragmentShaderSource =
[Link]('#fragmentShader').textContent;

const vertexShader = [Link](gl.VERTEX_SHADER);


[Link](vertexShader, vertexShaderSource);
[Link](vertexShader);

if (![Link](vertexShader, gl.COMPILE_STATUS)) {
[Link]('Vertex shader compilation failed:',
[Link](vertexShader));
}

const fragmentShader = [Link](gl.FRAGMENT_SHADER);


[Link](fragmentShader, fragmentShaderSource);
[Link](fragmentShader);

if (![Link](fragmentShader, gl.COMPILE_STATUS)) {
[Link]('Fragment shader compilation failed:',
[Link](fragmentShader));
}

const shaderProgram = [Link]();


[Link](shaderProgram, vertexShader);
[Link](shaderProgram, fragmentShader);
[Link](shaderProgram);

if (![Link](shaderProgram, gl.LINK_STATUS)) {
[Link]('Shader program linking failed:',
[Link](shaderProgram));
}

[Link](shaderProgram);

const positionAttributeLocation = [Link](shaderProgram,


'aVertexPosition');
const translationUniformLocation =
[Link](shaderProgram, 'uTranslation');

const originalVertexBuffer = [Link]();


[Link](gl.ARRAY_BUFFER, originalVertexBuffer);
[Link](gl.ARRAY_BUFFER, new Float32Array(originalVertices),
gl.STATIC_DRAW);
[Link](positionAttributeLocation, 2, [Link], false, 0,
0);
[Link](positionAttributeLocation);

// Clear canvas
[Link](0.0, 0.0, 0.0, 1.0);
[Link](gl.COLOR_BUFFER_BIT);

// Draw original triangle


gl.uniform2fv(translationUniformLocation, translation);
[Link]([Link], 0, 3);

// Translate triangle
translation[0] = 0.5; // Translation along x-axis

// Draw translated triangle


gl.uniform2fv(translationUniformLocation, translation);
[Link]([Link], 0, 3);
</script>
</body>
</html>

6. Scaling a Triangle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scaling in WebGL</title>
</head>
<body>
<canvas id="glCanvas" width="800" height="400"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec2 aVertexPosition;
uniform vec2 uScale;

void main() {
// Apply scaling
vec2 scaledPosition = aVertexPosition * uScale;
gl_Position = vec4(scaledPosition, 0.0, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); // White color
}
</script>
<script>
const canvas = [Link]('glCanvas');
const gl = [Link]('webgl');

if (!gl) {
[Link]('Unable to initialize WebGL. Your browser may not support
it.');
}

const originalVertices = [
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5,
];

let scale = [1.0, 1.0]; // Scale vector

const vertexShaderSource =
[Link]('#vertexShader').textContent;
const fragmentShaderSource =
[Link]('#fragmentShader').textContent;

const vertexShader = [Link](gl.VERTEX_SHADER);


[Link](vertexShader, vertexShaderSource);
[Link](vertexShader);
if (![Link](vertexShader, gl.COMPILE_STATUS)) {
[Link]('Vertex shader compilation failed:',
[Link](vertexShader));
}

const fragmentShader = [Link](gl.FRAGMENT_SHADER);


[Link](fragmentShader, fragmentShaderSource);
[Link](fragmentShader);

if (![Link](fragmentShader, gl.COMPILE_STATUS)) {
[Link]('Fragment shader compilation failed:',
[Link](fragmentShader));
}

const shaderProgram = [Link]();


[Link](shaderProgram, vertexShader);
[Link](shaderProgram, fragmentShader);
[Link](shaderProgram);

if (![Link](shaderProgram, gl.LINK_STATUS)) {
[Link]('Shader program linking failed:',
[Link](shaderProgram));
}

[Link](shaderProgram);

const positionAttributeLocation = [Link](shaderProgram,


'aVertexPosition');
const scaleUniformLocation = [Link](shaderProgram,
'uScale');

const originalVertexBuffer = [Link]();


[Link](gl.ARRAY_BUFFER, originalVertexBuffer);
[Link](gl.ARRAY_BUFFER, new Float32Array(originalVertices),
gl.STATIC_DRAW);
[Link](positionAttributeLocation, 2, [Link], false, 0, 0);
[Link](positionAttributeLocation);

// Clear canvas
[Link](0.0, 0.0, 0.0, 1.0);
[Link](gl.COLOR_BUFFER_BIT);
// Draw original triangle
gl.uniform2fv(scaleUniformLocation, scale);
[Link]([Link], 0, 3);

// Scale triangle
scale = [0.5, 2.0]; // Scale along x and y axes

// Draw scaled triangle


gl.uniform2fv(scaleUniformLocation, scale);
[Link]([Link], 0, 3);
</script>
</body>
</html>

7. Rotation of Triangle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotation in WebGL</title>
</head>
<body>
<canvas id="glCanvas" width="800" height="400"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec2 aVertexPosition;
uniform float uRotationAngle;

void main() {
// Apply rotation
float angle = uRotationAngle * 3.14159 / 180.0;
float cosAngle = cos(angle);
float sinAngle = sin(angle);
vec2 rotatedPosition = vec2(
aVertexPosition.x * cosAngle - aVertexPosition.y * sinAngle,
aVertexPosition.x * sinAngle + aVertexPosition.y * cosAngle
);
gl_Position = vec4(rotatedPosition, 0.0, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); // White color
}
</script>
<script>
const canvas = [Link]('glCanvas');
const gl = [Link]('webgl');

if (!gl) {
[Link]('Unable to initialize WebGL. Your browser may not support it.');
}

const originalVertices = [
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5,
];

let rotationAngle = 45; // Rotation angle in degrees

const vertexShaderSource =
[Link]('#vertexShader').textContent;
const fragmentShaderSource =
[Link]('#fragmentShader').textContent;

const vertexShader = [Link](gl.VERTEX_SHADER);


[Link](vertexShader, vertexShaderSource);
[Link](vertexShader);

if (![Link](vertexShader, gl.COMPILE_STATUS)) {
[Link]('Vertex shader compilation failed:',
[Link](vertexShader));
}

const fragmentShader = [Link](gl.FRAGMENT_SHADER);


[Link](fragmentShader, fragmentShaderSource);
[Link](fragmentShader);

if (![Link](fragmentShader, gl.COMPILE_STATUS)) {
[Link]('Fragment shader compilation failed:',
[Link](fragmentShader));
}

const shaderProgram = [Link]();


[Link](shaderProgram, vertexShader);
[Link](shaderProgram, fragmentShader);
[Link](shaderProgram);

if (![Link](shaderProgram, gl.LINK_STATUS)) {
[Link]('Shader program linking failed:',
[Link](shaderProgram));
}

[Link](shaderProgram);

const positionAttributeLocation = [Link](shaderProgram,


'aVertexPosition');
const rotationUniformLocation = [Link](shaderProgram,
'uRotationAngle');

const originalVertexBuffer = [Link]();


[Link](gl.ARRAY_BUFFER, originalVertexBuffer);
[Link](gl.ARRAY_BUFFER, new Float32Array(originalVertices),
gl.STATIC_DRAW);
[Link](positionAttributeLocation, 2, [Link], false, 0, 0);
[Link](positionAttributeLocation);

// Clear canvas
[Link](0.0, 0.0, 0.0, 1.0);
[Link](gl.COLOR_BUFFER_BIT);

// Draw original triangle


gl.uniform1f(rotationUniformLocation, 0); // No rotation
[Link]([Link], 0, 3);

// Draw rotated triangle


gl.uniform1f(rotationUniformLocation, rotationAngle);
[Link]([Link], 0, 3);
</script>
</body>
</html>

You might also like