Skip to content
Snippets Groups Projects
Commit a17ea902 authored by Jiyoon Park's avatar Jiyoon Park
Browse files

temp commit

parent 6baa8b49
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
README.md
+ 6
− 1
View file @ a17ea902
# WebGL Tutorial # WebGL Tutorial
2021-1 Computer Graphics Final Project 2021-1 Computer Graphics Final Project
# Reference
[https://github.com/hwan-ajou/webgl-1.0/blob/main/T09_per-fragment/index.html](https://github.com/hwan-ajou/webgl-1.0/blob/main/T09_per-fragment/index.html)
[https://github.com/hwan-ajou/webgl-1.0/blob/main/T09_per-fragment/T09.js](https://github.com/hwan-ajou/webgl-1.0/blob/main/T09_per-fragment/T09.js)
[https://glmatrix.net/docs/module-mat4.html](https://glmatrix.net/docs/module-mat4.html)
gl-matrix.js 0 → 100644
+ 7611
− 0
View file @ a17ea902
This diff is collapsed.
index.html 0 → 100644
+ 111
− 0
View file @ a17ea902
<html>
<head>
<title>WebGL1.0 Tutorial</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="gl-matrix.js"> </script>
<script type="text/javascript" src="script.js"> </script>
</head>
<body onload="main()">
<table>
<td>
<canvas id="helloapicanvas" style="border: none;" width="800" height="600"></canvas>
<td>
<input type="checkbox" onclick="flag_animation ^= 1;" id="toggleAnimation"><lable>Toggle Animation | </lebel>
<lable>Speed Up/Down :</label>
<button onclick="fn_speed_scale(1.1)"> + </button>
<button onclick="fn_speed_scale(0.9)"> - </button>
<lable> | Animation Rotate :</lable>
<input type="checkbox" onclick="animate_rotate(1)"><lable>X-axis Rotate /</lable>
<input type="checkbox" onclick="animate_rotate(2)"><lable>Y-axis Rotate /</lable>
<input type="checkbox" onclick="animate_rotate(3)"><lable>Z-axis Rotate </lable>
<br/><hr>
<lable>Draw Mode :</label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(0)"><lable>POINTS </label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(1)"><lable>LINES </label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(2)"><lable>LINE_STRIP </label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(3)"><lable>LINE_LOOP </label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(4)" checked><lable>TRIANGLES </label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(5)"><lable>TRIANGLE_STRIP </label>
<input name="drawmode" type="radio" onclick="fn_draw_mode(6)"><lable>TRIANGLE_FAN </label>
<br/><hr>
<label>FOV : </label>
<input style="width:400px" id="fov_range" type="range" min="10" max="170" value="90" oninput="fn_update_fov(this.value);"></input>
<input style="width:60px" type="text" id="textFOV" value="90">
<br/><hr>
<input type="checkbox" onclick="fn_toggle(2884)"><lable>CULL_FACE | </lable>
<label>cullFace(mode) :</label>
<input name="cullmode" type="radio" onclick="fn_cull_mode(1028)"><lable>FRONT <label>
<input name="cullmode" type="radio" onclick="fn_cull_mode(1029)" checked><label>BACK <label>
<input name="cullmode" type="radio" onclick="fn_cull_mode(1032)"><label>FRONT_AND_BACK <label>
<br/><hr>
<input type="checkbox" onclick="fn_toggle(3089)"><lable>SCISSOR_TEST | </lable>
<label>scissor(x,y,w,h) :</label>
<lable> X <label><input id="scissorx" type="text" size="4" value="0">
<label> Y <label><input id="scissory" type="text" size="4" value="0">
<label> W <label><input id="scissorw" type="text" size="4" value="800">
<label> H <label><input id="scissorh" type="text" size="4" value="600">
<button onclick="fn_scissor()">Set</button>
<br/><hr>
<input type="checkbox" onclick="fn_toggle(2929)"><lable>DEPTH_TEST | depth clear value : </lable>
<input style="width:300px" id="depth_clear" type="range" min="0" max="100" value="100"
oninput="depth_clear_value = this.value / 100.0;"></input>
<br/>
<label>depthFunc(mode) :</label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(512)"><lable>NEVER </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(513)" checked><lable>LESS </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(514)"><lable>EQAUL </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(515)"><lable>LEQUAL </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(516)"><lable>GREATER </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(517)"><lable>NOTEQUAL </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(518)"><lable>GEQUAL </label>
<input name="depthmode" type="radio" onclick="fn_depth_mode(519)"><lable>ALWAYS </label> <br/>
<hr>
<label>X rotate : </label>
<input style="width:400px" id="x_rotate" type="range" min="0" max="360" value="0" oninput="fn_update_xrotate(this.value);"></input>
<input style="width:60px" type="text" id="textXRot" value="0">
<br/>
<label>Y rotate : </label>
<input style="width:400px" id="y_rotate" type="range" min="0" max="360" value="0" oninput="fn_update_yrotate(this.value);"></input>
<input style="width:60px" type="text" id="textYRot" value="0">
<br/>
<label>Z rotate : </label>
<input style="width:400px" id="z_rotate" type="range" min="0" max="360" value="0" oninput="fn_update_zrotate(this.value);"></input>
<input style="width:60px" type="text" id="textZRot" value="0">
<br/><hr>
<label>Cube Move | </label>
<br/>
<label>X-axis Move : </label>
<input style="width:400px" id="x_move" type="range" min="-100" max="100" value="0" oninput="fn_update_xmove(this.value);"></input>
<input style="width:60px" type="text" id="textXMove" value="0">
<br/>
<label>Y-axis Move : </label>
<input style="width:400px" id="y_move" type="range" min="-100" max="100" value="0" oninput="fn_update_ymove(this.value);"></input>
<input style="width:60px" type="text" id="textYMove" value="0">
<br/>
<label>Z-axis Move : </label>
<input style="width:400px" id="z_move" type="range" min="-100" max="100" value="0" oninput="fn_update_zmove(this.value);"></input>
<input style="width:60px" type="text" id="textZMove" value="0">
<br/><hr>
<label>lookAt | </label>
<br/>
<label>eye vector : </label>
<input style="width:400px" id="x_move" type="range" min="-100" max="100" value="0" oninput="fn_update_xmove(this.value);"></input>
<input style="width:60px" type="text" id="textXMove" value="0">
<br/>
<label>Y-axis : </label>
<input style="width:400px" id="y_move" type="range" min="-100" max="100" value="0" oninput="fn_update_ymove(this.value);"></input>
<input style="width:60px" type="text" id="textYMove" value="0">
<br/>
<label>Z-axis Move : </label>
<input style="width:400px" id="z_move" type="range" min="-100" max="100" value="0" oninput="fn_update_zmove(this.value);"></input>
<input style="width:60px" type="text" id="textZMove" value="0">
<br/><hr>
</table>
<br/><br/>
</body>
</html>
script.js 0 → 100644
+ 402
− 0
View file @ a17ea902
var gl;
const {mat2, mat3, mat4, vec2, vec3, vec4} = glMatrix; // Now we can use function without glMatrix.~~~
function testGLError(functionLastCalled) {
/* gl.getError returns the last error that occurred using WebGL for debugging */
var lastError = gl.getError();
if (lastError != gl.NO_ERROR) {
alert(functionLastCalled + " failed (" + lastError + ")");
return false;
}
return true;
}
function initialiseGL(canvas) {
try {
// Try to grab the standard context. If it fails, fallback to experimental
gl = canvas.getContext('webgl',
{stencil:true, alpha:true, depth:true, antialias:true, preserveDrawingBuffer:false});
//gl = canvas.getContext('webgl',
// {stencil:true, alpha:true, depth:true, antialias:false, preserveDrawingBuffer:true});
gl.viewport(0, 0, canvas.width, canvas.height);
}
catch (e) {
}
if (!gl) {
alert("Unable to initialise WebGL. Your browser may not support it");
return false;
}
return true;
}
var shaderProgram;
var vertexData = [
// Backface (RED)
-0.5, -0.5, -0.5, 0.870, 0.174, 0.360, 1.0,
0.5, 0.5, -0.5, 0.870, 0.174, 0.360, 1.0,
0.5, -0.5, -0.5, 0.870, 0.174, 0.360, 1.0,
-0.5, -0.5, -0.5, 0.870, 0.174, 0.360, 1.0,
-0.5, 0.5, -0.5, 0.870, 0.174, 0.360, 1.0,
0.5, 0.5, -0.5, 0.870, 0.174, 0.360, 1.0,
// Front (BLUE)
-0.5, -0.5, 0.5, 0.289, 0.477, 0.780, 1.0,
0.5, -0.5, 0.5, 0.289, 0.477, 0.780, 1.0,
0.5, 0.5, 0.5, 0.289, 0.477, 0.780, 1.0,
-0.5, -0.5, 0.5, 0.289, 0.477, 0.780, 1.0,
0.5, 0.5, 0.5, 0.289, 0.477, 0.780, 1.0,
-0.5, 0.5, 0.5, 0.289, 0.477, 0.780, 1.0,
// LEFT (GREEN)
-0.5, -0.5, -0.5, 0.289, 0.780, 0.583, 1.0,
-0.5, 0.5, 0.5, 0.289, 0.780, 0.583, 1.0,
-0.5, 0.5, -0.5, 0.289, 0.780, 0.583, 1.0,
-0.5, -0.5, -0.5, 0.289, 0.780, 0.583, 1.0,
-0.5, -0.5, 0.5, 0.289, 0.780, 0.583, 1.0,
-0.5, 0.5, 0.5, 0.289, 0.780, 0.583, 1.0,
// RIGHT (YELLOW)
0.5, -0.5, -0.5, 0.920, 0.915, 0.598, 1.0,
0.5, 0.5, -0.5, 0.920, 0.915, 0.598, 1.0,
0.5, 0.5, 0.5, 0.920, 0.915, 0.598, 1.0,
0.5, -0.5, -0.5, 0.920, 0.915, 0.598, 1.0,
0.5, 0.5, 0.5, 0.920, 0.915, 0.598, 1.0,
0.5, -0.5, 0.5, 0.920, 0.915, 0.598, 1.0,
// BOTTON (MAGENTA)
-0.5, -0.5, -0.5, 0.756, 0.485, 0.950, 1.0,
0.5, -0.5, -0.5, 0.756, 0.485, 0.950, 1.0,
0.5, -0.5, 0.5, 0.756, 0.485, 0.950, 1.0,
-0.5, -0.5, -0.5, 0.756, 0.485, 0.950, 1.0,
0.5, -0.5, 0.5, 0.756, 0.485, 0.950, 1.0,
-0.5, -0.5, 0.5, 0.756, 0.485, 0.950, 1.0,
// TOP (CYAN)
-0.5, 0.5, -0.5, 0.598, 0.786, 0.920, 1.0,
0.5, 0.5, 0.5, 0.598, 0.786, 0.920, 1.0,
0.5, 0.5, -0.5, 0.598, 0.786, 0.920, 1.0,
-0.5, 0.5, -0.5, 0.598, 0.786, 0.920, 1.0,
-0.5, 0.5, 0.5, 0.598, 0.786, 0.920, 1.0,
0.5, 0.5, 0.5, 0.598, 0.786, 0.920, 1.0,
// X axis
0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
// Y axis
0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 1.0,
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0,
// Z axis
0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0,
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0,
];
function initialiseBuffer() {
gl.vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
return testGLError("initialiseBuffers");
}
function initialiseShaders() {
var fragmentShaderSource = `
varying highp vec4 col;
void main(void)
{
gl_FragColor = col;
}`;
gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(gl.fragShader, fragmentShaderSource);
gl.compileShader(gl.fragShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.fragShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(gl.fragShader));
return false;
}
// Vertex shader code
var vertexShaderSource = `
attribute highp vec4 myVertex;
attribute highp vec4 myColor;
uniform mediump mat4 mMat;
uniform mediump mat4 vMat;
uniform mediump mat4 pMat;
varying highp vec4 col;
void main(void)
{
gl_Position = pMat * vMat * mMat * myVertex;
gl_PointSize = 8.0;
col = myColor;
}`;
gl.vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(gl.vertexShader, vertexShaderSource);
gl.compileShader(gl.vertexShader);
// Check if compilation succeeded
if (!gl.getShaderParameter(gl.vertexShader, gl.COMPILE_STATUS)) {
alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(gl.vertexShader));
return false;
}
// Create the shader program
gl.programObject = gl.createProgram();
// Attach the fragment and vertex shaders to it
gl.attachShader(gl.programObject, gl.fragShader);
gl.attachShader(gl.programObject, gl.vertexShader);
// Bind the custom vertex attribute "myVertex" to location 0
gl.bindAttribLocation(gl.programObject, 0, "myVertex");
gl.bindAttribLocation(gl.programObject, 1, "myColor");
// Link the program
gl.linkProgram(gl.programObject);
// Check if linking succeeded in a similar way we checked for compilation errors
if (!gl.getProgramParameter(gl.programObject, gl.LINK_STATUS)) {
alert("Failed to link the program.\n" + gl.getProgramInfoLog(gl.programObject));
return false;
}
gl.useProgram(gl.programObject);
return testGLError("initialiseShaders");
}
var xRot = 0.0;
var yRot = 0.0;
var zRot = 0.0;
var speedRot = 0.01;
var flag_animation = 0;
var flag_draw_twice = 0;
/* modify */
var xRot_animate = false;
var yRot_animate = false;
var zRot_animate = false;
var xMove = 0.0;
var yMove = 0.0;
var zMove = 0.0;
var rotate_axis = 0.0;
/* modify end */
function fn_speed_scale(a)
{
speedRot *= a;
}
var draw_mode = 4; // 4 Triangles, 3 line_strip 0-Points
function fn_draw_mode(a)
{
draw_mode = a;
}
var fov_degree = 90.0;
function fn_update_fov(val)
{
document.getElementById('textFOV').value=val;
fov_degree = val;
}
/* modify start */
function fn_update_xrotate(val)
{
if (!xRot_animate) {
document.getElementById('textXRot').value=val;
xRot = val * 3.141592 / 360.0;
}
else{
document.getElementById('textXRot').value = "X";
}
}
function fn_update_yrotate(val)
{
if (!yRot_animate) {
document.getElementById('textYRot').value=val;
yRot = val * 3.141592 / 360.0;
}
else{
document.getElementById('textYRot').value = "X";
}
}
function fn_update_zrotate(val)
{
if (!zRot_animate) {
document.getElementById('textZRot').value=val;
zRot = val * 3.141592 / 360.0;
}
else{
document.getElementById('textZRot').value = "X";
}
}
function animate_rotate(val)
{
if (val == 1) {
xRot_animate = !xRot_animate
}
else if (val == 2) {
yRot_animate = !yRot_animate
}
else if (val == 3) {
zRot_animate = !zRot_animate
}
}
function fn_update_xmove(val)
{
val = val / 100.0;
document.getElementById('textXMove').value = val;
xMove = val;
}
function fn_update_ymove(val)
{
val = val / 100.0;
document.getElementById('textYMove').value = val;
yMove = val;
}
function fn_update_zmove(val)
{
val = val / 100.0;
document.getElementById('textZMove').value = val;
zMove = val;
}
/* modify end */
function fn_toggle(mode)
{
if (gl.isEnabled(mode))
gl.disable(mode);
else
gl.enable(mode);
}
function fn_cull_mode(val)
{
gl.cullFace(val);
}
function fn_scissor()
{
gl.scissor(document.getElementById('scissorx').value, document.getElementById('scissory').value,
document.getElementById('scissorw').value,document.getElementById('scissorh').value);
}
function fn_depth_mode(val)
{
gl.depthFunc(val);
}
var mMat, vMat, pMat, tempMat;
var xMat, yMat, zMat; // Modify
var identityMat;
var depth_clear_value = 1.0;
function renderScene() {
// fn_make_clear_stencil();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(depth_clear_value); // Added for depth Test
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Added for depth Test
var mMatLocation = gl.getUniformLocation(gl.programObject, "mMat");
var vMatLocation = gl.getUniformLocation(gl.programObject, "vMat");
var pMatLocation = gl.getUniformLocation(gl.programObject, "pMat");
pMat = mat4.create();
vMat = mat4.create();
mMat = mat4.create();
// mat4.ortho(pMat, -1, 1, -1, 1, -1, 1);
// mat4.frustum(pMat, -8.0/6.0, 8.0/6.0, -1, 1, 1, );
mat4.translate(mMat, mMat, [xMove, yMove, zMove]);
mat4.rotateX(mMat, mMat, xRot);
mat4.rotateY(mMat, mMat, yRot);
mat4.rotateZ(mMat, mMat, zRot);
mat4.perspective(pMat, fov_degree * 3.141592 / 180.0 , 8.0/6.0 , 0.5, 6);
mat4.lookAt(vMat, [0,0,2], [0.0 ,0.0, 0.0], [0,1,0]);
// mat4.frustum(vMat, -8.0/6.0, 8.0/6.0, 1, 1, 1, );
if (flag_animation == 1)
{
if (xRot_animate)
{
xRot = xRot + speedRot;
document.getElementById('textXRot').value = "X";
}
if (yRot_animate)
{
yRot = yRot + speedRot;
document.getElementById('textYRot').value = "X";
}
if (zRot_animate)
{
zRot = zRot + speedRot;
document.getElementById('textZRot').value = "X";
}
}
gl.uniformMatrix4fv(mMatLocation, gl.FALSE, mMat );
gl.uniformMatrix4fv(vMatLocation, gl.FALSE, vMat );
gl.uniformMatrix4fv(pMatLocation, gl.FALSE, pMat );
if (!testGLError("gl.uniformMatrix4fv")) {
return false;
}
gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 28, 0);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 28, 12);
if (!testGLError("gl.vertexAttribPointer")) {
return false;
}
gl.drawArrays(draw_mode, 0, 36);
gl.drawArrays(1, 36, 43);
if (!testGLError("gl.drawArrays")) {
return false;
}
return true;
}
function main() {
var canvas = document.getElementById("helloapicanvas");
if (!initialiseGL(canvas)) {
return;
}
if (!initialiseBuffer()) {
return;
}
if (!initialiseShaders()) {
return;
}
requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000, 60);
};
})();
(function renderLoop() {
if (renderScene()) {
// Everything was successful, request that we redraw our scene again in the future
requestAnimFrame(renderLoop);
}
})();
}
temp.js 0 → 100644
+ 1373
− 0
View file @ a17ea902
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr