Skip to content
Snippets Groups Projects
Commit 095c3678 authored by 최현욱's avatar 최현욱
Browse files

Upload New File

parent 5030367b
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 290 additions and 0 deletions
T05.js 0 → 100644
+ 290
− 0
View file @ 095c3678
var gl;
function testGLError(functionLastCalled) {
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") || canvas.getContext("experimental-webgl");
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;
function cube(sx, sy, sz)
{
vertexData = [
-sx/2.0, -sy/2.0, sz/2.0, 0.0, 1.0, 0.0, 1.0, // Choose color randomly
sx/2.0, -sy/2.0, sz/2.0, 0.0, 0.0, 1.0, 1.0, /// TOP
sx/2.0, sy/2.0, sz/2.0, 1.0, 0.0, 0.0, 1.0,
-sx/2.0, -sy/2.0, sz/2.0, 0.2, 0.3, 0.0, 1.0,
sx/2.0, sy/2.0, sz/2.0, 0.6, 0.0, 0.1, 1.0,
-sx/2.0, sy/2.0, sz/2.0, 0.6, 1.0, 0.1, 1.0,
-sx/2.0, -sy/2.0, sz/2.0, 0.0, 1.0, 1.0, 1.0, // Choose color randomly
-sx/2.0, sy/2.0, sz/2.0, 0.3, 0.0, 0.1, 1.0, /// Left
-sx/2.0, sy/2.0, -sz/2.0, 1.0, 0.5, 0.0, 1.0,
-sx/2.0, -sy/2.0, sz/2.0, 0.2, 0.3, 0.0, 1.0,
-sx/2.0, -sy/2.0, -sz/2.0, 0.6, 0.4, 0.1, 1.0,
-sx/2.0, sy/2.0, -sz/2.0, 0.6, 1.0, 0.1, 1.0,
-sx/2.0, sy/2.0, -sz/2.0, 0.0, 1.0, 0.7, 1.0, // Choose color randomly
-sx/2.0, sy/2.0, sz/2.0, 0.8, 0.0, 0.6, 1.0, /// front
sx/2.0, sy/2.0, sz/2.0, 1.0, 0.0, 0.5, 1.0,
-sx/2.0, sy/2.0, -sz/2.0, 0.2, 0.3, 0.0, 1.0,
sx/2.0, sy/2.0, -sz/2.0, 0.6, 0.1, 0.1, 1.0,
sx/2.0, sy/2.0, sz/2.0, 0.6, 1.0, 0.3, 1.0,
sx/2.0, sy/2.0, sz/2.0, 0.0, 1.0, 0.3, 1.0, // Choose color randomly
sx/2.0, sy/2.0, -sz/2.0, 0.5, 0.0, 1.0, 1.0, /// Right
sx/2.0, -sy/2.0, -sz/2.0, 0.8, 0.0, 0.0, 1.0,
sx/2.0, sy/2.0, sz/2.0, 0.2, 0.3, 0.0, 1.0,
sx/2.0, -sy/2.0, sz/2.0, 0.6, 0.0, 0.1, 1.0,
sx/2.0, -sy/2.0, -sz/2.0, 0.6, 1.0, 0.1, 1.0,
sx/2.0, -sy/2.0, -sz/2.0, 0.7, 1.0, 0.0, 1.0, // Choose color randomly
sx/2.0, -sy/2.0, sz/2.0, 0.3, 0.0, 1.0, 1.0, /// Back
-sx/2.0, -sy/2.0, sz/2.0, 1.0, 0.7, 0.0, 1.0,
sx/2.0, -sy/2.0, -sz/2.0, 0.2, 0.3, 0.0, 1.0,
-sx/2.0, -sy/2.0, sz/2.0, 0.4, 0.2, 0.1, 1.0,
-sx/2.0, -sy/2.0, -sz/2.0, 0.6, 1.0, 0.1, 1.0,
-sx/2.0, -sy/2.0, -sz/2.0, 0.0, 1.0, 0.0, 1.0, // Choose color randomly
-sx/2.0, sy/2.0, -sz/2.0, 0.7, 0.0, 1.0, 1.0, /// Bottom
sx/2.0, sy/2.0, -sz/2.0, 0.9, 0.0, 0.0, 1.0,
-sx/2.0, -sy/2.0, -sz/2.0, 0.2, 0.3, 0.0, 1.0,
sx/2.0, sy/2.0, -sz/2.0, 0.5, 0.0, 0.1, 1.0,
sx/2.0, -sy/2.0, -sz/2.0, 0.4, 1.0, 0.1, 1.0
// Make alll 36 vertices
];
return vertexData;
}
// Change initialiseBuffer()
function initialiseBuffer() {
vertexData = cube(1.0, 1.0, 1.0);
// Generate a buffer object
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 = vec4(1.0, 1.0, 0.66, 1.0);
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)) {
// It didn't. Display the info log as to why
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;
varying highp vec4 col;
uniform mediump mat4 transformationMatrix;
void main(void)
{
gl_Position = transformationMatrix * myVertex;
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)) {
// It didn't. Display the info log as to why
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 r_x =0.0;
var r_z =0.0;
function multMat4(out, a, b) {
var a00 = a[0],
a01 = a[1],
a02 = a[2],
a03 = a[3];
out[0] = 0;
/* Program Here */
var b00=b[0],
b01=b[1],
b02=b[2],
b03=b[3];
out[0] = a[0]*b[0] + a[4]*b[1] + a[8]*b[2] + a[12]*b[3];
out[1] = a[1]*b[0] + a[5]*b[1] + a[9]*b[2] + a[13]*b[3];
out[2] = a[2]*b[0] + a[6]*b[1] + a[10]*b[2] + a[14]*b[3];
out[3] = a[3]*b[0] + a[7]*b[1] + a[11]*b[2] + a[15]*b[3];
out[4] = a[0]*b[4] + a[4]*b[5] + a[8]*b[6] + a[12]*b[7];
out[5] = a[1]*b[4] + a[5]*b[5] + a[9]*b[6] + a[13]*b[7];
out[6] = a[2]*b[4] + a[6]*b[5] + a[10]*b[6] + a[14]*b[7];
out[7] = a[3]*b[4] + a[7]*b[5] + a[11]*b[6] + a[15]*b[7];
out[8] = a[0]*b[8] + a[4]*b[9] + a[8]*b[10] + a[12]*b[11];
out[9] = a[1]*b[8] + a[5]*b[9] + a[9]*b[10] + a[13]*b[11];
out[10] = a[2]*b[8] + a[6]*b[9] + a[10]*b[10] + a[14]*b[11];
out[11] = a[3]*b[8] + a[7]*b[9] + a[11]*b[10] + a[15]*b[11];
out[12] = a[0]*b[12] + a[4]*b[13] + a[8]*b[14] + a[12]*b[15];
out[13] = a[1]*b[12] + a[5]*b[13] + a[9]*b[14] + a[13]*b[15];
out[14] = a[2]*b[12] + a[6]*b[13] + a[10]*b[14] + a[14]*b[15];
out[15] = a[3]*b[12] + a[7]*b[13] + a[11]*b[14] + a[15]*b[15];
return out;
}
function renderScene() {
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Get the location of the transformation matrix in the shader using its name
var matrixLocation = gl.getUniformLocation(gl.programObject, "transformationMatrix");
r_x=r_x + 0.01;
r_z=r_z + 0.01;
// Matrix used to specify the orientation of the triangle on screen
var transformationMatrix1 = [
1.0, 0.0, 0.0, 0.0,
0.0, Math.cos(r_x), -Math.sin(r_x), 0.0,
0.0, Math.sin(r_x), Math.cos(r_x), 0.0,
0.0, 0.0, 0.0, 1.0
];
var transformationMatrix2 = [
Math.cos(r_x),-Math.sin(r_x), 0.0, 0.0,
Math.sin(r_x),Math.cos(r_x), 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0
];
var transformationMatrix=[];
multMat4(transformationMatrix, transformationMatrix1, transformationMatrix2);
// Pass the identity transformation matrix to the shader using its location
gl.uniformMatrix4fv(matrixLocation, gl.FALSE, transformationMatrix);
if (!testGLError("gl.uniformMatrix4fv")) {
return false;
}
// Enable the user-defined vertex array
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
// Set the vertex data to this attribute index, with the number of floats in each position
gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 28, 0);
gl.vertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 28, 12);
if (!testGLError("gl.vertexAttribPointer")) {
return false;
}
gl.drawArrays(gl.TRIANGLES, 0, 36);
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;
}
// Render loop
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);
}
})();
}
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