Skip to content
Snippets Groups Projects
Select Git revision
  • 082f42f601f45f657e433f5e29702eb2f354be37
  • main default protected
  • eosa3993-main-patch-51109
  • eosa3993-main-patch-19925
4 results

ul_wave.c

Blame
    • script.js 11.85 KiB 
    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,
];

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 xEye = 0.0;
var yEye = 0.0;
var zEye = 2.0;

var xCenter = 0.0;
var yCenter = 0.0;
var zCenter = 0.0;

var xUp = 0.0;
var yUp = 1.0;
var zUp = 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; 
}


function fn_update_xeye(val)
{
  val = val / 50.0;
  document.getElementById('textXEye').value = val; 
  xEye = val; 
}

function fn_update_yeye(val)
{
      val = val / 50.0;
  document.getElementById('textYEye').value = val; 
  yEye = val; 
}

function fn_update_zeye(val)
{
  val = val / 50.0;
  document.getElementById('textZEye').value = val; 
  zEye = val; 
}


function fn_update_xcenter(val)
{
  val = val / 100.0;
  document.getElementById('textXCenter').value = val; 
  xCenter = val; 
}

function fn_update_ycenter(val)
{
  val = val / 100.0;
  document.getElementById('textYCenter').value = val; 
  yCenter = val; 
}

function fn_update_zcenter(val)
{
  val = val / 100.0;
  document.getElementById('textZCenter').value = val; 
  zCenter = val; 
}

function fn_update_xup(val)
{
  val = val / 100.0;
  document.getElementById('textXUp').value = val; 
  xUp = val; 
}

function fn_update_yup(val)
{
  val = val / 100.0;
  document.getElementById('textYUp').value = val; 
  yUp = val; 
}

function fn_update_zup(val)
{
  val = val / 100.0;
  document.getElementById('textZUp').value = val; 
  zUp = 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 depth_clear_value = 1.0; 

function renderScene() {
  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.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, [xEye,yEye,zEye], [xCenter, yCenter, zCenter], [xUp, yUp, zUp]);
  
	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); 
	
    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);
        }
    })();
}

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