Skip to content

Commit d55ed65

Browse files
openalgorithmdevelopersopenalgorithmdevelopers
committed
added webgl sample template programs
1 parent fd3a84d commit d55ed65

File tree

4 files changed

+346
-0
lines changed

4 files changed

+346
-0
lines changed

‎3_First WebGL program.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<html>
2+
<head>
3+
<title>WebGL - First WebGL Program</title>
4+
</head>
5+
<body onload="WebGL();">
6+
<canvas id="canvas" width="1200" height="600">
7+
Your browser does not support HTML5
8+
</canvas>
9+
<br/>
10+
<script src="3_First WebGL program_js.js"></script></body>
11+
</html>

‎3_First WebGL program_js.js

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
var WebGL = function () {
2+
var gl, shaderProgram;
3+
4+
gl = initializeWebGL(gl);
5+
6+
//Step 1 (Set background color): First specify the color with the help of Quadlet(R,G,B,Alpha) and the clear the buffer related to background.
7+
gl.clearColor(0, 0, 0, 1.0);
8+
gl.clear(gl.COLOR_BUFFER_BIT);
9+
//Note: The default background color in WebGl is white.
10+
11+
//Step 2 (Speficy vertices data): Speficy the coordinates (X,Y,Z) of the geometry and other information related to each coordinates.
12+
var verticesDataArrayJS =
13+
[ // X, Y, Z
14+
-0.3, 0.7, 0, //A
15+
0.3, 0.7, 0, //B
16+
0, 0, 0, //C
17+
0.3, -0.7, 0, //D
18+
-0.3, -0.7, 0 //E
19+
];
20+
21+
//Step 3 (Specify how to connect the points): Specify the order with which the coordinates defined in Step2 will be joined.
22+
var IndicesArrayJS =
23+
[
24+
// A-0, B-1, C-2, D-3, E-4
25+
0, 1, 2, //ABC
26+
2, 3, 4 //CDE
27+
];
28+
29+
//Step 4 (Create GPU meomry buffer): In the GPU for holding vertices data of type ARRAY_BUFFER.
30+
//gl.ARRAY_BUFFER type is used for holding vertex coordinates, color, texture coordinates or other informations on the GPU memory.
31+
var rectVBO = gl.createBuffer();
32+
gl.bindBuffer(gl.ARRAY_BUFFER, rectVBO);
33+
34+
//Step 5 (Pass the vertices data to the buffer created previously).
35+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesDataArrayJS), gl.STATIC_DRAW);
36+
//Notes: gl.STATIC_DRAW is used to specify that the data is passed once.
37+
//gl.DYNAMIC_DRAW is used to specify that the data may be respecified repeatedly.
38+
//gl.STREAM_DRAW is used to specify that the data may be respecified but not frequently.
39+
40+
//Step 6 (Pass the indices data to GPU buffer): repeat the steps 4 and 5 for the indices data but use ELEMENT_ARRAY_BUFFER.
41+
//ELEMENT_ARRAY_BUFFER is used for holding the indices information on the GPU memory
42+
var rectIBO = gl.createBuffer();
43+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, rectIBO);
44+
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(IndicesArrayJS), gl.STATIC_DRAW);
45+
46+
//Seven Steps Shader side coding in JS to get the shader program.
47+
shaderProgram = getShaderProgram(gl);
48+
49+
//Step 14 (Use the shader program):
50+
gl.useProgram(shaderProgram);
51+
52+
//Step 15 (Get access to GPU's geometry coordinates): Get the pointer to the geometry coordinates defined in vertex shader through the shader program.
53+
var positionAttribLocation = gl.getAttribLocation(shaderProgram, 'geometryCoordinatesGPU');
54+
55+
56+
//Step 16 (Enable Vertex Attribute Array): It enables the pointer defined in Step 8 to access the vertex buffered data.
57+
gl.enableVertexAttribArray(positionAttribLocation);
58+
59+
//Step 17 (Buffer data definition): Define how the data on the GPU buffer is arranged. SO that the pointer defined in Step 8 can access the data from the buffer.
60+
gl.vertexAttribPointer(
61+
positionAttribLocation, // Attribute location
62+
3, // Number of elements per attribute
63+
gl.FLOAT, // Type of elements
64+
gl.FALSE,
65+
3 * Float32Array.BYTES_PER_ELEMENT, // Size of an individual vertex
66+
0 // Offset from the beginning of a single vertex to this attribute
67+
);
68+
69+
//Step 18 (Draw the geometry): Issue the draw command to generate the geometry as defined by the indices and the type of primitive to create.
70+
//
71+
//gl.drawElements(gl.LINES, IndicesArrayJS.length, gl.UNSIGNED_SHORT, 0);
72+
//gl.drawElements(gl.LINE_STRIP, IndicesArrayJS.length, gl.UNSIGNED_SHORT, 0);
73+
//gl.drawElements(gl.LINE_LOOP, IndicesArrayJS.length, gl.UNSIGNED_SHORT, 0);
74+
gl.drawElements(gl.TRIANGLES, IndicesArrayJS.length, gl.UNSIGNED_SHORT, 0);
75+
};
76+
77+
function initializeWebGL(gl)
78+
{
79+
var canvas = document.getElementById('canvas');
80+
81+
canvas.width = window.innerWidth;;
82+
canvas.height = window.innerHeight;;
83+
84+
gl = canvas.getContext('webgl');
85+
86+
if (!gl) {
87+
console.log('WebGL not supported, falling back on experimental-webgl');
88+
gl = canvas.getContext('experimental-webgl');
89+
}
90+
91+
if (!gl) {
92+
alert('Your browser does not support WebGL');
93+
return;
94+
}
95+
return gl;
96+
}
97+
98+
//Seven steps of Shader side coding
99+
function getShaderProgram(gl)
100+
{
101+
//Step 7 (Define vertex shader text): Define the code of the vertex shader in the form of JS text.
102+
var vertexShaderText =
103+
' precision mediump float; ' +
104+
' attribute vec3 geometryCoordinatesGPU; ' +
105+
' void main() ' +
106+
' { ' +
107+
' gl_Position = vec4(geometryCoordinatesGPU, 1.0); ' +
108+
' } ';
109+
110+
//Step 8 (Create actual vertex shader): Create the actual vertex shader with the text defined in Step 1.
111+
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
112+
gl.shaderSource(vertexShader, vertexShaderText);
113+
114+
//Step 9 (Compile vertex shader):
115+
gl.compileShader(vertexShader);
116+
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
117+
console.error('ERROR compiling vertex shader!', gl.getShaderInfoLog(vertexShader));
118+
return;
119+
}
120+
121+
//Step 10: Repeat the above 3 steps for fragment shader.
122+
var fragmentShaderText =
123+
' void main() ' +
124+
' { ' +
125+
' gl_FragColor = vec4(0, 1, 0, 1); ' +
126+
' } ';
127+
128+
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
129+
gl.shaderSource(fragmentShader, fragmentShaderText);
130+
131+
gl.compileShader(fragmentShader);
132+
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
133+
console.error('ERROR compiling fragment shader!', gl.getShaderInfoLog(fragmentShader));
134+
return;
135+
}
136+
137+
//Step 11 (Shader program): With the compiled vertex and fragment shader, create the shader program.
138+
var shaderProgram = gl.createProgram();
139+
gl.attachShader(shaderProgram, vertexShader);
140+
gl.attachShader(shaderProgram, fragmentShader);
141+
142+
//Step 12 (Link shader program):
143+
gl.linkProgram(shaderProgram);
144+
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
145+
console.error('ERROR linking program!', gl.getProgramInfoLog(shaderProgram));
146+
return;
147+
}
148+
149+
//Step 13 (Validate Shader program): Checks if the shader program has been succesfully linked and can be used further.
150+
gl.validateProgram(shaderProgram);
151+
if (!gl.getProgramParameter(shaderProgram, gl.VALIDATE_STATUS)) {
152+
console.error('ERROR validating program!', gl.getProgramInfoLog(shaderProgram));
153+
return;
154+
}
155+
return shaderProgram;
156+
}

‎Computer Graphics/3D_Arbitrary_Rotation_THREE_JS.html

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!--
2+
11-March-22 ! Bhupendra Singh ! CG Illustration for Standard Rotation.
3+
-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<title>3D CG Fundamentals Illustrations</title>
8+
<script src="three_min.js"></script>
9+
<script src="OrbitControls.js"></script>
10+
<style>
11+
12+
</style>
13+
</head>
14+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
15+
<body>
16+
<div class="body">
17+
<div id="header">
18+
<!-- <nav class="navbar navbar-expand-lg navbar-light bg-light">
19+
<a class="navbar-brand h1" href="#">Computer Graphics Fundamentals Illustrations</a>
20+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
21+
<span class="navbar-toggler-icon"></span>
22+
</button>
23+
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
24+
<div class="navbar-nav">
25+
<a class="nav-item nav-link active" href="#">To be added <span class="sr-only">(current)</span></a>
26+
<a class="nav-item nav-link" href="#">To be added</a>
27+
<a class="nav-item nav-link disabled" href="#">Disabled</a>
28+
</div>
29+
</div>
30+
</nav> -->
31+
</div>
32+
<div id="WebGL_output" class="container">
33+
<div class="row col-lg-12 h1 text-center font-weight-bold text-info">
34+
<b>Arbitrary Rotation in CGF</b>
35+
</div>
36+
<div class="row">
37+
<div id="Original" class="col-lg-12 h1 text-primary text-center font-weight-bold">Original Geometry</div>
38+
</div>
39+
</div>
40+
</div>
41+
<script>
42+
function init() {
43+
var scene = new THREE.Scene();
44+
//var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
45+
const camera = new THREE.OrthographicCamera( window.innerHeight / - 20, window.innerHeight / 20, window.innerHeight / 20, window.innerHeight / - 20, 0.1, 100 );
46+
47+
var renderer = new THREE.WebGLRenderer();
48+
renderer.setClearColor(new THREE.Color(0x000000));
49+
renderer.setSize(window.innerWidth*0.9, window.innerHeight*0.9);
50+
document.getElementById("Original").appendChild(renderer.domElement);
51+
52+
var controls = new THREE.OrbitControls(camera, renderer.domElement);
53+
controls.enableDamping = true;
54+
controls.dampingFactor = 0.25;
55+
controls.enableZoom = true;
56+
57+
var axes = new THREE.AxesHelper(60);
58+
scene.add(axes);
59+
60+
camera.position.x = 30;
61+
camera.position.y = 40;
62+
camera.position.z = 80;
63+
camera.lookAt(scene.position);
64+
const points = [];
65+
const material = new THREE.LineBasicMaterial({
66+
color: 0xFF00ff
67+
});
68+
//points.push( new THREE.Vector3( 5, 5, 5 ) );
69+
points.push( new THREE.Vector3( 0, 0, 0 ) );
70+
points.push( new THREE.Vector3( 10, 20, 10 ) );
71+
// points.push( new THREE.Vector3( 10, 0, 0 ) );
72+
73+
const geometry = new THREE.BufferGeometry().setFromPoints( points );
74+
75+
const line = new THREE.Line( geometry, material );
76+
scene.add( line );
77+
78+
animate();
79+
function animate()
80+
{
81+
controls.update();
82+
requestAnimationFrame ( animate );
83+
renderer.render (scene, camera);
84+
}
85+
}
86+
window.onload = init;
87+
</script>
88+
</body>
89+
</html>

‎Computer Graphics/index.html

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!--
2+
11-March-22 ! Bhupendra Singh ! CG Illustration for Standard Rotation.
3+
-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<title>3D CG Fundamentals Illustrations</title>
8+
<script src="three_min.js"></script>
9+
<script src="OrbitControls.js"></script>
10+
<style></style>
11+
</head>
12+
<link
13+
rel="stylesheet"
14+
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
15+
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
16+
crossorigin="anonymous"
17+
/>
18+
<body>
19+
<div id="WebGL_output" class="container-fluid">
20+
<div id="Original"></div>
21+
</div>
22+
<script>
23+
var angle = 0;
24+
var x, y, z;
25+
function init() {
26+
var scene = new THREE.Scene();
27+
//var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
28+
const camera = new THREE.OrthographicCamera(
29+
window.innerHeight / -20,
30+
window.innerHeight / 20,
31+
window.innerHeight / 20,
32+
window.innerHeight / -20,
33+
1,
34+
100
35+
);
36+
37+
var renderer = new THREE.WebGLRenderer();
38+
renderer.setClearColor(new THREE.Color(0x000000));
39+
renderer.setSize(window.innerWidth, window.innerHeight);
40+
41+
var controls = new THREE.OrbitControls(camera, renderer.domElement);
42+
controls.enableDamping = true;
43+
controls.dampingFactor = 0.25;
44+
controls.enableZoom = true;
45+
46+
var axes = new THREE.AxesHelper(60);
47+
scene.add(axes);
48+
49+
const geometry = new THREE.BoxGeometry(20, 5, 15);
50+
const material = new THREE.MeshBasicMaterial({ color: 0x00ffff });
51+
const cube = new THREE.Mesh(geometry, material);
52+
cube.position.x = 0;
53+
cube.position.y = 0;
54+
cube.position.z = 0;
55+
scene.add(cube);
56+
57+
camera.position.x = 30;
58+
camera.position.y = 40;
59+
camera.position.z = 80;
60+
camera.lookAt(scene.position);
61+
62+
document.getElementById("Original").appendChild(renderer.domElement);
63+
64+
animate();
65+
66+
var xRotation, yRotation, zRotation;
67+
var angle = 0;
68+
function animate() {
69+
//angle += 0.1;
70+
controls.update();
71+
requestAnimationFrame(animate);
72+
renderer.render(scene, camera);
73+
74+
//cube.rotation.z = angle;
75+
cube.rotation.x = (x * 3.14) / 180;
76+
cube.rotation.y = (y * 3.14) / 180;
77+
cube.rotation.z = (z * 3.14) / 180;
78+
}
79+
}
80+
function handleOrientation(event) {
81+
x = event.beta; // In degree in the range [-180,180)
82+
y = event.gamma; // In degree in the range [-90,90)
83+
z = event.alpha;
84+
//angle = x;
85+
}
86+
window.onload = init;
87+
window.addEventListener("deviceorientation", handleOrientation);
88+
</script>
89+
</body>
90+
</html>

0 commit comments

Comments
 (0)