Scribd
Upload
27 views13 pages

LabWebGL&ThreeJS 3D Affine Transform

The document discusses WebGL 3D graphics pipeline concepts including projection, viewport, and lighting. It provides code examples and screenshots for perspective projection using a perspective matrix, changing the viewport, and applying directional lighting to a cube. The document contains instructions for students to capture screenshots of their own results rather than reusing images.

Uploaded by

haikhoa71nk
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
27 views13 pages

LabWebGL&ThreeJS 3D Affine Transform

The document discusses WebGL 3D graphics pipeline concepts including projection, viewport, and lighting. It provides code examples and screenshots for perspective projection using a perspective matrix, changing the viewport, and applying directional lighting to a cube. The document contains instructions for students to capture screenshots of their own results rather than reusing images.

Uploaded by

haikhoa71nk
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
You are on page 1/ 13

LẬP TRÌNH WEBGL

3D Graphics Pipeline

Sinh viên 1: Lê Hải Khoa MSSV: 102220026


Sinh viên 2: Lê Nguyễn Ngọc Thanh MSSV: 102220041
Nhóm học phần: 22NH15

MỤC LỤC
1. Projection............................................................................................................1
1.1. File WebGLPerspectiveProjection.html....................................................................1
2. Viewport.............................................................................................................4
2.1. File WebGLViewport.html........................................................................................4
3. Lighting...............................................................................................................8
3.1. File WebGLDirectionalLightCube.html....................................................................8
4. Tham khảo........................................................................................................11

>> Yêu cầu chụp hình ảnh là kết quả thực hành của SV. Không sử dụng lại hình ảnh của
bài lab.

1. Projection
1.1. File WebGLPerspectiveProjection.html
<!DOCTYPE html>
<html>

<head>
<title>WebGL projections: perspective</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-
min.js"></script>

<script id="shaderVs" type="x-shader/x-vertex">


attribute vec4 a_Position;
attribute vec3 a_Color;
uniform mat4 u_pMatrix;
uniform mat4 u_vMatrix;
uniform mat4 u_mvMatrix;
varying highp vec4 v_Color;
void main() {
gl_Position = u_pMatrix * u_vMatrix * u_mvMatrix * a_Position;
v_Color = vec4(a_Color, 1.0);
}
</script>

<script id="shaderFs" type="x-shader/x-fragment">


varying highp vec4 v_Color;
void main() {
gl_FragColor = v_Color;
}
</script>

KhoaCNTT-Trường ĐHBK, ĐHĐN


<script>
var gl;
var count = 0.0;

function init() {
// Get canvas object from the DOM
var canvas = document.getElementById("myCanvas");

// Init WebGL context


gl = canvas.getContext("webgl");
if (!gl) {
console.log("Failed to get the rendering context for WebGL");
return;
}

// Init shaders
var vs = document.getElementById('shaderVs').innerHTML;
var fs = document.getElementById('shaderFs').innerHTML;
initShaders(gl, vs, fs);

// Init vertex shader


initVertexShader(gl);

// Init projection matrix


initProjection(gl, canvas);

// Set clear canvas color


gl.clearColor(0.0, 0.0, 0.0, 1.0);

// Hidden surface removal


gl.enable(gl.DEPTH_TEST);

// Draw Scene
drawScene();
}

function drawScene() {
// Clear
gl.clear(gl.COLOR_BUFFER_BIT);

// Rotate
var mvMatrix = mat4.fromRotation(mat4.create(), count, [0.5, 0.5,
0.5]);
var uMvMatrix = gl.getUniformLocation(gl.program, "u_mvMatrix");
gl.uniformMatrix4fv(uMvMatrix, false, mvMatrix);

// Draw
gl.drawElements(gl.TRIANGLES, 6 * 2 * 3, gl.UNSIGNED_SHORT, 0);

// Call drawScene again in the next browser repaint


count += 0.01;
requestAnimationFrame(drawScene);
}

function initVertexShader(gl) {
// Vertexes and colors (X, Y, Z, R, G, B)
var vertexesAndColors = [
-0.5, -0.5, -0.5, 1, 1, 0,
0.5, -0.5, -0.5, 1, 1, 0,
0.5, 0.5, -0.5, 1, 1, 0,
-0.5, 0.5, -0.5, 1, 1, 0,

-0.5, -0.5, 0.5, 0, 0, 1,


0.5, -0.5, 0.5, 0, 0, 1,
0.5, 0.5, 0.5, 0, 0, 1,
-0.5, 0.5, 0.5, 0, 0, 1,

-0.5, -0.5, -0.5, 0, 1, 1,


-0.5, 0.5, -0.5, 0, 1, 1,

KhoaCNTT-Trường ĐHBK, ĐHĐN


-0.5, 0.5, 0.5, 0, 1, 1,
-0.5, -0.5, 0.5, 0, 1, 1,

0.5, -0.5, -0.5, 1, 0, 0,


0.5, 0.5, -0.5, 1, 0, 0,
0.5, 0.5, 0.5, 1, 0, 0,
0.5, -0.5, 0.5, 1, 0, 0,

-0.5, -0.5, -0.5, 1, 0, 1,


-0.5, -0.5, 0.5, 1, 0, 1,
0.5, -0.5, 0.5, 1, 0, 1,
0.5, -0.5, -0.5, 1, 0, 1,

-0.5, 0.5, -0.5, 0, 1, 0,


-0.5, 0.5, 0.5, 0, 1, 0,
0.5, 0.5, 0.5, 0, 1, 0,
0.5, 0.5, -0.5, 0, 1, 0
];

// Indexes (for drawing squares using triangles)


var indexes = [
0, 1, 2,
0, 2, 3,

4, 5, 6,
4, 6, 7,

8, 9, 10,
8, 10, 11,

12, 13, 14,


12, 14, 15,

16, 17, 18,


16, 18, 19,

20, 21, 22,


20, 22, 23
];

// Write a_Position and a_Color using gl.ARRAY_BUFFER


gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexesAndColors),
gl.STATIC_DRAW);

var vertexPositionAttribute = gl.getAttribLocation(gl.program,


"a_Position");
gl.enableVertexAttribArray(vertexPositionAttribute);
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 4 *
(3 + 3), 0);

var vertexColorAttribute = gl.getAttribLocation(gl.program, "a_Color");


gl.enableVertexAttribArray(vertexColorAttribute);
gl.vertexAttribPointer(vertexColorAttribute, 3, gl.FLOAT, false, 4 * (3
+ 3), 4 * 3);

// Write indexes in gl.ELEMENT_ARRAY_BUFFER


gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexes),
gl.STATIC_DRAW);
}

function initProjection(gl, canvas) {


// Write u_pMatrix
var pMatrixUniform = gl.getUniformLocation(gl.program, "u_pMatrix");
var ratio = canvas.width / canvas.height;
var pMatrix = mat4.perspective(mat4.create(), 150, ratio, 0.1, 100);
gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix);

// Write u_vMatrix

KhoaCNTT-Trường ĐHBK, ĐHĐN


var vMatrixUniform = gl.getUniformLocation(gl.program, "u_vMatrix");
var vMatrix = mat4.lookAt(mat4.create(), [0, 0, -3], [0, 0, 0], [0, 1,
0]);
gl.uniformMatrix4fv(vMatrixUniform, false, vMatrix);
}

function initShaders(gl, vs_source, fs_source) {


// Compile shaders
var vertexShader = makeShader(gl, vs_source, gl.VERTEX_SHADER);
var fragmentShader = makeShader(gl, fs_source, gl.FRAGMENT_SHADER);

// Create program
var glProgram = gl.createProgram();

// Attach and link shaders to the program


gl.attachShader(glProgram, vertexShader);
gl.attachShader(glProgram, fragmentShader);
gl.linkProgram(glProgram);

// Use program
gl.useProgram(glProgram);
gl.program = glProgram;
}

function makeShader(gl, src, type) {


var shader = gl.createShader(type);
gl.shaderSource(shader, src);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert("Error compiling shader: " + gl.getShaderInfoLog(shader));
return;
}
return shader;
}
</script>

</head>

<body onload="init()">
<canvas id="myCanvas" width="640" height="480"></canvas>
</body>

</html>

 Kết quả thực hiện

KhoaCNTT-Trường ĐHBK, ĐHĐN


2. Viewport
2.1. File WebGLViewport.html
<!DOCTYPE html>
<html>

<head>
<title>WebGL projections: viewport change</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-
min.js"></script>

<script id="shaderVs" type="x-shader/x-vertex">


attribute vec4 a_Position;
attribute vec3 a_Color;
uniform mat4 u_pMatrix;
uniform mat4 u_vMatrix;
uniform mat4 u_mvMatrix;
varying highp vec4 v_Color;
void main() {
gl_Position = u_pMatrix * u_vMatrix * u_mvMatrix * a_Position;
v_Color = vec4(a_Color, 1.0);
}
</script>

<script id="shaderFs" type="x-shader/x-fragment">


varying highp vec4 v_Color;
void main() {
gl_FragColor = v_Color;
}
</script>

KhoaCNTT-Trường ĐHBK, ĐHĐN


<script>
var gl;
var canvas;
var count = 0.0;

function init() {
// Get canvas object from the DOM
canvas = document.getElementById("myCanvas");

// Init WebGL context


gl = canvas.getContext("webgl");
if (!gl) {
console.log("Failed to get the rendering context for WebGL");
return;
}

// Init shaders
var vs = document.getElementById('shaderVs').innerHTML;
var fs = document.getElementById('shaderFs').innerHTML;
initShaders(gl, vs, fs);

// Init vertex shader


initVertexShader(gl);

// Init projection matrix


initProjection(gl, canvas);

// Set clear canvas color


gl.clearColor(0.0, 0.0, 0.0, 1.0);

// Hidden surface removal


gl.enable(gl.DEPTH_TEST);

// Draw Scene
drawScene();
}

function drawScene() {
// Change viewport
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
var aspect = document.getElementById("aspect").value;
gl.viewport(x, y, aspect * canvas.width, aspect * canvas.height);

// Clear
gl.clear(gl.COLOR_BUFFER_BIT);

// Rotate
var mvMatrix = mat4.fromRotation(mat4.create(), count, [0.5, 0.5,
0.5]);
var uMvMatrix = gl.getUniformLocation(gl.program, "u_mvMatrix");
gl.uniformMatrix4fv(uMvMatrix, false, mvMatrix);

// Draw
gl.drawElements(gl.TRIANGLES, 6 * 2 * 3, gl.UNSIGNED_SHORT, 0);

// Call drawScene again in the next browser repaint


count += 0.01;
requestAnimationFrame(drawScene);
}

function initVertexShader(gl) {
// Vertexes and colors (X, Y, Z, R, G, B)
var vertexesAndColors = [
-0.5, -0.5, -0.5, 1, 1, 0,
0.5, -0.5, -0.5, 1, 1, 0,
0.5, 0.5, -0.5, 1, 1, 0,
-0.5, 0.5, -0.5, 1, 1, 0,

-0.5, -0.5, 0.5, 0, 0, 1,

KhoaCNTT-Trường ĐHBK, ĐHĐN


0.5, -0.5, 0.5, 0, 0, 1,
0.5, 0.5, 0.5, 0, 0, 1,
-0.5, 0.5, 0.5, 0, 0, 1,

-0.5, -0.5, -0.5, 0, 1, 1,


-0.5, 0.5, -0.5, 0, 1, 1,
-0.5, 0.5, 0.5, 0, 1, 1,
-0.5, -0.5, 0.5, 0, 1, 1,

0.5, -0.5, -0.5, 1, 0, 0,


0.5, 0.5, -0.5, 1, 0, 0,
0.5, 0.5, 0.5, 1, 0, 0,
0.5, -0.5, 0.5, 1, 0, 0,

-0.5, -0.5, -0.5, 1, 0, 1,


-0.5, -0.5, 0.5, 1, 0, 1,
0.5, -0.5, 0.5, 1, 0, 1,
0.5, -0.5, -0.5, 1, 0, 1,

-0.5, 0.5, -0.5, 0, 1, 0,


-0.5, 0.5, 0.5, 0, 1, 0,
0.5, 0.5, 0.5, 0, 1, 0,
0.5, 0.5, -0.5, 0, 1, 0
];

// Indexes (for drawing squares using triangles)


var indexes = [
0, 1, 2,
0, 2, 3,

4, 5, 6,
4, 6, 7,

8, 9, 10,
8, 10, 11,

12, 13, 14,


12, 14, 15,

16, 17, 18,


16, 18, 19,

20, 21, 22,


20, 22, 23
];

// Write a_Position and a_Color using gl.ARRAY_BUFFER


gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexesAndColors),
gl.STATIC_DRAW);

var vertexPositionAttribute = gl.getAttribLocation(gl.program,


"a_Position");
gl.enableVertexAttribArray(vertexPositionAttribute);
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 4 *
(3 + 3), 0);

var vertexColorAttribute = gl.getAttribLocation(gl.program, "a_Color");


gl.enableVertexAttribArray(vertexColorAttribute);
gl.vertexAttribPointer(vertexColorAttribute, 3, gl.FLOAT, false, 4 * (3
+ 3), 4 * 3);

// Write indexes in gl.ELEMENT_ARRAY_BUFFER


gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexes),
gl.STATIC_DRAW);
}

function initProjection(gl, canvas) {


// Write u_pMatrix

KhoaCNTT-Trường ĐHBK, ĐHĐN


var pMatrixUniform = gl.getUniformLocation(gl.program, "u_pMatrix");
var ratio = canvas.width / canvas.height;
var pMatrix = mat4.perspective(mat4.create(), 150, ratio, 0.1, 100);
gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix);

// Write u_vMatrix
var vMatrixUniform = gl.getUniformLocation(gl.program, "u_vMatrix");
var vMatrix = mat4.lookAt(mat4.create(), [0, 0, -3], [0, 0, 0], [0, 1,
0]);
gl.uniformMatrix4fv(vMatrixUniform, false, vMatrix);
}

function initShaders(gl, vs_source, fs_source) {


// Compile shaders
var vertexShader = makeShader(gl, vs_source, gl.VERTEX_SHADER);
var fragmentShader = makeShader(gl, fs_source, gl.FRAGMENT_SHADER);

// Create program
var glProgram = gl.createProgram();

// Attach and link shaders to the program


gl.attachShader(glProgram, vertexShader);
gl.attachShader(glProgram, fragmentShader);
gl.linkProgram(glProgram);

// Use program
gl.useProgram(glProgram);
gl.program = glProgram;
}

function makeShader(gl, src, type) {


var shader = gl.createShader(type);
gl.shaderSource(shader, src);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert("Error compiling shader: " + gl.getShaderInfoLog(shader));
return;
}
return shader;
}
</script>

</head>

<body onload="init()">
<canvas id="myCanvas" width="640" height="480"></canvas><br>
<input type="range" id="x" min="0" max="640" value="0" step="1"> x<br>
<input type="range" id="y" min="0" max="640" value="0" step="1"> y<br>
<input type="range" id="aspect" min="0" max="1" value="1" step="0.01">
aspect<br>
</body>

</html>

Kết quả

KhoaCNTT-Trường ĐHBK, ĐHĐN


3. Lighting
3.1. File WebGLDirectionalLightCube.html
<!DOCTYPE html>
<html>

<head>
<title>Lighting: cube lit by directional light</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-
min.js"></script>

<script id="shaderVs" type="x-shader/x-vertex">


attribute vec3 a_Color;
attribute vec3 a_Normal;
attribute vec4 a_Position;

uniform vec3 u_LightColor;


uniform vec3 u_LightDirection;
uniform mat4 u_pMatrix;
uniform mat4 u_vMatrix;
uniform mat4 u_mvMatrix;

varying highp vec4 v_Color;

void main(void) {
gl_Position = u_pMatrix * u_vMatrix * u_mvMatrix * a_Position;

KhoaCNTT-Trường ĐHBK, ĐHĐN


vec3 normal = normalize(a_Normal - vec3(gl_Position));
float nDotL = max(dot(u_LightDirection, normal), 0.0);

vec3 diffuse = u_LightColor * a_Color.rgb * nDotL;


v_Color = vec4(diffuse, 1.0);
}
</script>

<script id="shaderFs" type="x-shader/x-fragment">


varying highp vec4 v_Color;

void main(void) {
gl_FragColor = v_Color;
}
</script>

<script>
var count = 0.0;

function init() {
// Get canvas object from the DOM
var canvas = document.getElementById("myCanvas");

// Init WebGL context


var gl = canvas.getContext("webgl");
if (!gl) {
console.log("Failed to get the rendering context for WebGL");
return;
}

// Init shaders
var vs = document.getElementById('shaderVs').innerHTML;
var fs = document.getElementById('shaderFs').innerHTML;
initShaders(gl, vs, fs);

// Init vertex shader


initVertexShader(gl);

// Set clear canvas color


gl.clearColor(0.0, 0.0, 0.0, 1.0);

// Hidden surface removal


gl.enable(gl.DEPTH_TEST);

// Draw Scene
drawScene(gl, canvas);
}

function drawScene(gl, canvas) {


// Clear
gl.clear(gl.COLOR_BUFFER_BIT);

// Init projection
initProjection(gl, canvas);

// Rotate
var mvMatrix = mat4.fromRotation(mat4.create(), count, [ 0.0, 1.0, 0.5 ]);
var uMvMatrix = gl.getUniformLocation(gl.program, "u_mvMatrix");
gl.uniformMatrix4fv(uMvMatrix, false, mvMatrix);

// Draw
gl.drawElements(gl.TRIANGLES, 6 * 2 * 3, gl.UNSIGNED_BYTE, 0);

// Call drawScene again in the next browser repaint


count += 0.01;
requestAnimationFrame(function() {
drawScene(gl, canvas)
});
}

KhoaCNTT-Trường ĐHBK, ĐHĐN


function initVertexShader(gl) {
// v6----- v5
// /| /|
// v1------v0|
// | | | |
// | |v7---|-|v4
// |/ |/
// v2------v3
var vertices = new Float32Array([ // Coordinates
0.5, 0.5, 0.5, -0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, // v0-v1-v2-
v3 front
0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, // v0-v3-v4-
v5 right
0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, // v0-v5-v6-
v1 up
-0.5, 0.5, 0.5, -0.5, 0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5, // v1-v6-
v7-v2 left
-0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, // v7-v4-
v3-v2 down
0.5, -0.5, -0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5 // v4-v7-
v6-v5 back
]);

var colors = new Float32Array([ // Colors


1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v1-v2-v3 front
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v3-v4-v5 right
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v5-v6-v1 up
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v1-v6-v7-v2 left
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v7-v4-v3-v2 down
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0 // v4-v7-v6-v5 back
]);

var normals = new Float32Array([ // Normal


0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3
front
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5
right
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 up
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-
v2 left
0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // v7-v4-v3-
v2 down
0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0 // v4-v7-v6-v5
back
]);

gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

var vertexPositionAttribute = gl.getAttribLocation(gl.program, "a_Position");


gl.enableVertexAttribArray(vertexPositionAttribute);
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

var vertexColorAttribute = gl.getAttribLocation(gl.program, "a_Color");


gl.enableVertexAttribArray(vertexColorAttribute);
gl.vertexAttribPointer(vertexColorAttribute, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);

var vertexNormalAttribute = gl.getAttribLocation(gl.program, "a_Normal");


gl.enableVertexAttribArray(vertexNormalAttribute);
gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);

// Indices of the vertices


var indices = new Uint8Array([ 0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // right

KhoaCNTT-Trường ĐHBK, ĐHĐN


8, 9, 10, 8, 10, 11, // up
12, 13, 14, 12, 14, 15, // left
16, 17, 18, 16, 18, 19, // down
20, 21, 22, 20, 22, 23 // back
]);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
}

function initProjection(gl, canvas) {


// Write u_pMatrix
var ratio = canvas.width / canvas.height;
var pMatrix = mat4.perspective(mat4.create(), 150, ratio, 0.1, 100);
var pMatrixUniform = gl.getUniformLocation(gl.program, "u_pMatrix");
gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix);

// Write u_vMatrix
var vMatrix = mat4.lookAt(mat4.create(), [ 0, 0, -3 ], [ 0, 0, 0 ], [ 0, 1, 0
]);
var vMatrixUniform = gl.getUniformLocation(gl.program, "u_vMatrix");
gl.uniformMatrix4fv(vMatrixUniform, false, vMatrix);

// Write u_LightColor
var lightColor = [ 1.0, 1.0, 1.0 ]; // white
var lightColorUniform = gl.getUniformLocation(gl.program, "u_LightColor");
gl.uniform3fv(lightColorUniform, lightColor);

// Write u_LightDirection
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
var z = document.getElementById("z").value;
var lightDirection = [ x, y, z ];
vec3.normalize(lightDirection, lightDirection);
var lightDirectionUniform = gl.getUniformLocation(gl.program,
"u_LightDirection");
gl.uniform3fv(lightDirectionUniform, lightDirection);
}

function initShaders(gl, vs_source, fs_source) {


// Compile shaders
var vertexShader = makeShader(gl, vs_source, gl.VERTEX_SHADER);
var fragmentShader = makeShader(gl, fs_source, gl.FRAGMENT_SHADER);

// Create program
var glProgram = gl.createProgram();

// Attach and link shaders to the program


gl.attachShader(glProgram, vertexShader);
gl.attachShader(glProgram, fragmentShader);
gl.linkProgram(glProgram);

// Use program
gl.useProgram(glProgram);
gl.program = glProgram;
}

function makeShader(gl, src, type) {


var shader = gl.createShader(type);
gl.shaderSource(shader, src);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert("Error compiling shader: " + gl.getShaderInfoLog(shader));
return;
}
return shader;
}
</script>

</head>

KhoaCNTT-Trường ĐHBK, ĐHĐN


<body onload="init()">
<canvas id="myCanvas" width="640" height="480"></canvas><br>

<b>Light direction</b><br>
<input type="range" id="x" min="-20" max="20" value="2" step="1">X<br>
<input type="range" id="y" min="-20" max="20" value="-8" step="1">Y<br>
<input type="range" id="z" min="-20" max="20" value="-8" step="1">Z<br>
</body>

</html>

Kết quả

4. Tham khảo
[1]. https://github.com/bonigarcia/webgl-examples

(Tài liệu lưu hành nội bộ)


-----------------------------------------------

KhoaCNTT-Trường ĐHBK, ĐHĐN

You might also like