Skip to content

Commit

Permalink
Some code refactor + fixes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Leroks
Leroks committed Dec 17, 2023
1 parent 2ff567d commit dd7cf34
Showing 1 changed file with 79 additions and 89 deletions.
168 changes: 79 additions & 89 deletions js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
const vsSource = `#version 300 es
in vec4 pos; // position of the vertex in coordinate system
uniform mat4 pMatrix, vmMatrix;
in vec4 pos;
uniform mat4 projectionMatrix;
uniform mat4 mvMatrix;
uniform vec4 vColor;
out vec4 fColor;
void main()
{
gl_Position = pMatrix * vmMatrix * pos;
gl_Position = projectionMatrix * mvMatrix * pos;
fColor = vColor;
}
`;
Expand All @@ -25,34 +26,34 @@ const fsSource = `#version 300 es
var gl;
var canvas;
var type;
var normalize1;
var normalizeIt;
var stride;
var offset = 0;
var program;

let colorF; //for uniform location
let uniformColorLoc;
var modelViewMatrix;

let aspectRatio; //canvas.width/canvas.height
let aspectRatio;

var verticesOfShape = []; //vertices of object
var vertexCount; // verticesOfShape.length /6
var verticesOfShape = [];
var vertexCount;
var posBuffer;

var theta = [0, 0, 0];

var cameraPos = vec3(0, 4, 10); //use them for lookAt function
var cameraPos = vec3(0, 4, 10);
var target = vec3(0, 0, 0);

var moveCallback; //for the pointer lock api
var x = 0.00; //mouse movement of x
var y = 0.00; //mouse movement of y
var isM = false;
var moveCallback;
var mouseX = 0;
var mouseY = 0;
var isMouse = false;


function _createBufferObject(gl, array) {

const buffer = gl.createBuffer(); // Create a buffer object
const buffer = gl.createBuffer();

if (!buffer) {
out.displayError('Failed to create the buffer object for ' + model.name);
Expand All @@ -66,29 +67,29 @@ function _createBufferObject(gl, array) {
}

function loadShader(gl, type, source) {
const shader = gl.createShader(type); //a new shader is created
const shader = gl.createShader(type);

gl.shaderSource(shader, source); //send the source to the shader object
gl.compileShader(shader); //compile the shader
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { //If that's false, we know the shader failed to compile
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}

function initShaderProgram(gl, vsSource, fsSource) { //initialize the shader program
function initShaderProgram(gl, vsSource, fsSource) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

const shaderProgram = gl.createProgram(); //Create shader program
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { //If that's false,alert it
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
return null;
}
Expand All @@ -102,7 +103,7 @@ window.requestAnimFrame = (function () {
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
function (callback) {
return window.setTimeout(callback, 1000 / 60);
};
})();
Expand All @@ -112,44 +113,43 @@ var render = function () {
// look up uniform locations.
const programInfo = {
uniformLocations: {
projectionMatrixLoc: gl.getUniformLocation(program, "pMatrix"),
modelMatrixUniform: gl.getUniformLocation(program, "vmMatrix")
projectionMatrixLoc: gl.getUniformLocation(program, "projectionMatrix"),
modelMatrixUniform: gl.getUniformLocation(program, "mvMatrix")
}
}
// Compute the projection matrix
var projectionMatrix = perspective(60, aspectRatio, 0.1, 200);
gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrixLoc, false, flatten(projectionMatrix)); // Set the matrix.


//Camera Rotation
if (isM) { //for mouse movement
theta[0] += y / 100;
theta[1] += x / 100;
//Camera Rotation with mouse
if (isMouse) {
theta[0] += mouseY / 100;
theta[1] += mouseX / 100;

target[0] += x / 100;
target[1] += y / 100;
target[0] += mouseX / 100;
target[1] += mouseY / 100;

isM = false;
isMouse = false;
}

modelViewMatrix = lookAt(cameraPos, target, vec3(0, 1, 0)); // Compute the camera's matrix using look at.
modelViewMatrix = lookAt(cameraPos, target, vec3(0, 1, 0));

modelViewMatrix = mult(modelViewMatrix, rotate(-45, [0, 1, 0]));

modelViewMatrix = mult(modelViewMatrix, rotate(theta[1], [0, 1, 0]));
modelViewMatrix = mult(modelViewMatrix, rotate(theta[0], [1, 0, 0]));

gl.uniformMatrix4fv(programInfo.uniformLocations.modelMatrixUniform, false, flatten(modelViewMatrix)); // Set the modelViewMatrix.
gl.uniformMatrix4fv(programInfo.uniformLocations.modelMatrixUniform, false, flatten(modelViewMatrix));

gl.clearColor(1.0, 1.0, 1.0, 1.0); //color the background
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.uniform4f(colorF, 0.3, 0.3, 0.3, 1);
gl.drawArrays(gl.TRIANGLES, 0, offset); //draw

gl.uniform4f(colorF, 0.4, 1.0, 0.4, 1);
gl.drawArrays(gl.TRIANGLES, offset, vertexCount - offset); //draw
gl.uniform4f(uniformColorLoc, 0.3, 0.3, 0.3, 1);
gl.drawArrays(gl.TRIANGLES, 0, offset);

gl.uniform4f(uniformColorLoc, 0.4, 1.0, 0.4, 1);
gl.drawArrays(gl.TRIANGLES, offset, vertexCount - offset);

requestAnimFrame(render);
}
Expand All @@ -163,25 +163,21 @@ var pointerLockApi = function () {

function init() {

canvas = document.querySelector("#glcanvas");//canvas element
canvas = document.querySelector("#glcanvas");
gl = canvas.getContext("webgl2");

// If we don't have a GL context, give up now

if (!gl) {
alert("WebGL 2.0 is not available."); //if it fail,alert it
alert("WebGL 2.0 is not available.");
return;
}

program = initShaderProgram(gl, vsSource, fsSource); // Initialize a shader program
gl.useProgram(program); //tell webgl use program when drawing it
program = initShaderProgram(gl, vsSource, fsSource);
gl.useProgram(program);

var havePointerLock = 'pointerLockElement' in document ||
'mozPointerLockElement' in document ||
'webkitPointerLockElement' in document;

// element for pointerLock
// prefixes
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock;
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;

Expand All @@ -190,61 +186,55 @@ function init() {
if (!havePointerLock) {
return;
}
if (pointerLockApi()) { // Pointer was just locked
document.addEventListener("mousemove", moveCallback, false); // Enable the mousemove
} else { //remove the callback
document.removeEventListener("mousemove", moveCallback, false); // Disable the mousemove listener
if (pointerLockApi()) {
document.addEventListener("mousemove", moveCallback, false);
} else {
document.removeEventListener("mousemove", moveCallback, false);
}

}

// pointer lock api event listeners
// Hook pointer lock state change events for different browsers
document.addEventListener('pointerlockchange', lockChange, false);
document.addEventListener('mozpointerlockchange', lockChange, false);


moveCallback = function (e) {
/*use the movementx and movementy properties
* to determine the
* relative mouse movement.
*/
isM = true;
isMouse = true;
var movementX = e.movementX ||
e.mozMovementX ||
e.webkitMovementX || 0;

var movementY = e.movementY ||
e.mozMovementY ||
e.webkitMovementY || 0;
x = movementX;
y = movementY;
mouseX = movementX;
mouseY = movementY;
}

type = gl.FLOAT;
normalize1 = false;
normalizeIt = false;
stride = Float32Array.BYTES_PER_ELEMENT * 6;

aspectRatio = canvas.width / canvas.height;

gl.viewport(0, 0, canvas.width, canvas.height);

gl.clearDepth(1.0); // Clear everything
gl.enable(gl.DEPTH_TEST);// Enable depth testing
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
gl.depthFunc(gl.LEQUAL);
gl.cullFace(gl.BACK);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);// Clear the canvas before we start drawing on it.

gl.cullFace(gl.CCW);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

posBuffer = _createBufferObject(gl, verticesOfShape); //for positions
posBuffer = _createBufferObject(gl, verticesOfShape);

colorF = gl.getUniformLocation(program, "fColor"); //color
uniformColorLoc = gl.getUniformLocation(program, "fColor");

const aPosition = gl.getAttribLocation(program, "pos"); // Get the location of the shader variables
gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer); // Bind the position buffer.
gl.enableVertexAttribArray(aPosition); // Enable the assignment to aPosition variable
gl.vertexAttribPointer(aPosition, 3, type, normalize1, stride, 0); // Enable the assignment to aPosition variable
const aPosition = gl.getAttribLocation(program, "pos");
gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
gl.enableVertexAttribArray(aPosition);
gl.vertexAttribPointer(aPosition, 3, type, normalizeIt, stride, 0);


requestAnimationFrame(function () {
Expand Down Expand Up @@ -298,6 +288,7 @@ function loadMeshData(string) {
verticesOfShape.extend(faceVertices[3].position);
verticesOfShape.extend(faceVertices[3].normal);
} else { // Handle triangles
offset += 3;
verticesOfShape.extend(faceVertices[0].position);
verticesOfShape.extend(faceVertices[0].normal);

Expand All @@ -306,7 +297,6 @@ function loadMeshData(string) {

verticesOfShape.extend(faceVertices[2].position);
verticesOfShape.extend(faceVertices[2].normal);
offset += 3;
}
break;
default:
Expand Down Expand Up @@ -344,34 +334,34 @@ function objLoader(filename) {

document.onkeydown = function (e) {
switch (e.key) {
case "PageDown": //Use ‘PageDown’ key to downward with change camera pos
case "PageDown":
cameraPos[1] -= 0.2;
target[1] -= 0.2;
break;
case "PageUp": //Use ‘PageUp’ key to upward
cameraPos[1] += 0.2; //with change camera pos
case "PageUp":
cameraPos[1] += 0.2;
target[1] += 0.2;
break;
case "ArrowLeft"://Use ‘ArrowLeft’ key to moves to the left with change camera pos
case "ArrowLeft":
cameraPos[0] -= 0.14;
target[0] -= 0.14;
break;
case "ArrowRight": //Use ‘ArrowRight’ key to moves to the right
case "ArrowRight":
cameraPos[0] += 0.14;
target[0] += 0.14;
break;
case "ArrowUp": //Use ‘ArrowUp’ key to moves to the forward with change camera pos
cameraPos[2] -= 0.5;
target[2] -= 0.5;
case "ArrowUp":
cameraPos[2] += 0.55;
target[2] += 0.55;
break;
case "ArrowDown": //Use ‘ArrowDown’ key to moves to the backward
cameraPos[2] += 0.5;
target[2] += 0.5;
case "ArrowDown":
cameraPos[2] -= 0.55;
target[2] -= 0.55;
break;
case "p": //Use ‘p’ key to activate and deactivate the pointer lock api
case "p":
if (!pointerLockApi()) {
canvas.requestPointerLock(); // Ask the browser to lock the pointer
} else { //exit
canvas.requestPointerLock();
} else {
document.exitPointerLock();
}
break;
Expand All @@ -380,7 +370,7 @@ document.onkeydown = function (e) {
}
}

window.onload = function () { // load a resource
window.onload = function () {
objLoader('Assets/cat.obj')
objLoader('Assets/terrain.obj')
}
}

0 comments on commit dd7cf34

Please sign in to comment.