Created
October 3, 2023 22:19
-
-
Save haehn/56074b6cae44ed675249627959af03ab to your computer and use it in GitHub Desktop.
CS460 Moving Yellow Rectangle
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> | |
<meta content="utf-8" http-equiv="encoding"> | |
<title>Default WebGL!</title> | |
<style> | |
html, body { | |
background-color:#000; | |
margin: 0; | |
padding: 0; | |
height: 100%; | |
overflow: hidden !important; | |
} | |
#c { | |
width: 100%; | |
height: 100%; | |
} | |
</style> | |
</head> | |
<script type="text/javascript" src="https://cs460.org/js/glmatrix.js"></script> | |
<script id="vertexshader" type="glsl"> | |
attribute vec3 position; | |
uniform vec3 offset; | |
void main(void) { | |
gl_PointSize = 10.; | |
vec3 final_position = position; | |
final_position.x += offset.x; | |
final_position.y += offset.y; | |
final_position.z += offset.z; | |
gl_Position = vec4( final_position, 1.); | |
} | |
</script> | |
<script id="fragmentshader" type="glsl"> | |
precision mediump float; | |
uniform vec4 color; | |
void main(void) { | |
gl_FragColor = color; //vec4(1., 1., 1., 1.); | |
} | |
</script> | |
<script> | |
// VARIABLE DECLARATIONS | |
window.onload = function() { | |
//************************************************************// | |
// | |
// INITIALIZE WEBGL | |
// | |
c = document.getElementById( 'c' ); // setup canvas | |
c.width = window.innerWidth; | |
c.height = window.innerHeight; | |
gl = c.getContext( 'webgl' ); // setup GL context | |
gl.viewport(0, 0, c.width, c.height ); | |
//************************************************************// | |
// | |
// SHADERS | |
// | |
v_shader = gl.createShader( gl.VERTEX_SHADER ); | |
f_shader = gl.createShader( gl.FRAGMENT_SHADER ); | |
// compile vertex shader | |
gl.shaderSource( v_shader, document.getElementById( 'vertexshader' ).innerText ); | |
gl.compileShader( v_shader ); | |
if (!gl.getShaderParameter( v_shader, gl.COMPILE_STATUS)) { | |
console.log(gl.getShaderInfoLog( v_shader )); | |
} else { | |
console.log('Vertex Shader compiled!'); | |
} | |
// compile fragment shader | |
gl.shaderSource( f_shader, document.getElementById( 'fragmentshader' ).innerText ); | |
gl.compileShader( f_shader ); | |
if (!gl.getShaderParameter( f_shader, gl.COMPILE_STATUS)) { | |
console.log(gl.getShaderInfoLog( f_shader )); | |
} else { | |
console.log('Fragment Shader compiled!'); | |
} | |
// attach and link the shaders | |
shaderprogram = gl.createProgram(); | |
gl.attachShader( shaderprogram, v_shader ); | |
gl.attachShader( shaderprogram, f_shader ); | |
gl.linkProgram( shaderprogram ); | |
gl.useProgram( shaderprogram ); | |
//************************************************************// | |
// | |
// CREATE GEOMETRY | |
// | |
// vertices = new Float32Array( [ | |
// -0.5, 0.5, 0.0, // V0 | |
// -0.5, -0.5, 0.0, // V1 | |
// 0.5, 0.5, 0.0, // V2 | |
// 0.5, 0.5, 0.0, // V3 | |
// -0.5, -0.5, 0.0, // V4 | |
// 0.5, -0.5, 0.0 // V5 | |
// ] ); | |
vertices = new Float32Array( [ | |
-0.5, 0.5, 0.0, // V0 // 0 | |
-0.5, -0.5, 0.0, // V1, V4 // 1 | |
0.5, 0.5, 0.0, // V2, V3 // 2 | |
0.5, -0.5, 0.0 // V5 // 3 | |
] ); | |
indices = new Uint8Array( [ 0, 1, 2, // Triangle 1 | |
2, 1, 3 ] ); // Triangle 2 | |
v_buffer = gl.createBuffer(); // create | |
gl.bindBuffer( gl.ARRAY_BUFFER, v_buffer ); // bind | |
gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW ); // put data in | |
gl.bindBuffer( gl.ARRAY_BUFFER, null ); // unbind | |
i_buffer = gl.createBuffer(); // create | |
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, i_buffer ); // bind | |
gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW ); // put data in | |
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, null ); // unbind | |
OFFSET = [-.2, -.2, 0]; | |
COLOR = [ 1., 1., 0., 1.]; | |
animate(); | |
}; | |
function animate() { | |
requestAnimationFrame( animate ); | |
//************************************************************// | |
// | |
// CONNECT SHADER WITH GEOMETRY | |
// | |
gl.bindBuffer( gl.ARRAY_BUFFER, v_buffer ); | |
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, i_buffer ); | |
// find the attribute in the shader source | |
var a_position = gl.getAttribLocation( shaderprogram, 'position' ); | |
gl.vertexAttribPointer( a_position, 3, gl.FLOAT, false, 0, 0 ); | |
gl.enableVertexAttribArray ( a_position ); | |
var u_color = gl.getUniformLocation( shaderprogram, 'color' ); | |
gl.uniform4fv( u_color, new Float32Array(COLOR)); | |
var u_offset = gl.getUniformLocation( shaderprogram, 'offset' ); | |
OFFSET[0] -= .1; | |
if (OFFSET[0] <= -1) { | |
OFFSET[0] = 1; | |
} | |
gl.uniform3fv( u_offset, new Float32Array( OFFSET ) ); | |
//************************************************************// | |
// | |
// DRAW! | |
// | |
gl.clearColor( 0., 0., 0., 0.) | |
gl.clear( gl.COLOR_BUFFER_BIT ); | |
gl.lineWidth(10.); | |
// gl.drawArrays( gl.LINES, 0, 6 ); | |
gl.drawElements( gl.TRIANGLES, 6, gl.UNSIGNED_BYTE, 0); | |
} | |
</script> | |
<body> | |
<canvas id="c"></canvas> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment