Created
October 6, 2023 19:57
-
-
Save haehn/66555b8ef976ccfd898d28378a0d6d68 to your computer and use it in GitHub Desktop.
CS460.org createFish with Matrix
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 mat4 transform; | |
void main(void) { | |
vec4 final_position = transform * vec4( position, 1.); | |
gl_Position = final_position; | |
} | |
</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 ); | |
STEP = .1; | |
OBJECTS = []; | |
// OBJECTS.push( createRectangle( [1.,0.,0.,1.], [0., 0., 0.]) ); | |
// OBJECTS.push( createRectangle( [1.,1.,0.,1.], [-.2, -.2, 0.]) ); | |
// OBJECTS.push( createRectangle( [0.,1.,0.,1.], [.2, .2, 0.]) ); | |
// OBJECTS.push( createRectangle( [1.,1.,1.,1.], [.7, .7, 0.]) ); | |
OBJECTS.push( createFish( [0., 1., 1., 1.], [0., 0., 0.]) ); | |
// OBJECTS.push( createFish( [1., 0., 1., 1.], [0.2, 0.2, 0.]) ); | |
animate(); | |
}; | |
function createRectangle(color, offset) { | |
//************************************************************// | |
// | |
// 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 | |
return [v_buffer, i_buffer, color, offset, 6]; | |
} | |
function createFish(color, offset) { | |
vertices = new Float32Array( [ | |
-0.1, 0.0, 0.0, | |
0.0, 0.1, 0.0, | |
0.0, -0.1, 0.0, | |
0.2, 0.0, 0.0, | |
0.3, 0.05, 0.0, | |
0.3, -0.05, 0.0 | |
] ); | |
indices = new Uint8Array( [ 0, 1, 2, // Triangle 1 | |
1, 2, 3, // Triangle 2 | |
3, 4, 5 ] ); // Triangle 3 | |
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 | |
return [v_buffer, i_buffer, color, offset, 9]; | |
} | |
function animate() { | |
requestAnimationFrame( animate ); | |
// CLEAR NOW BEFORE ANY DRAWING | |
gl.clearColor( 0., 0., 0., 0.) | |
gl.clear( gl.COLOR_BUFFER_BIT ); | |
for(var o=0; o<OBJECTS.length; o++) { | |
var current = OBJECTS[o]; | |
var v_buffer = current[0]; | |
var i_buffer = current[1]; | |
var COLOR = current[2]; | |
var OFFSET = current[3]; | |
var VERTEXCOUNT = current[4]; | |
// console.log('drawing', COLOR); | |
//************************************************************// | |
// | |
// 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' ); | |
var u_transform = gl.getUniformLocation( shaderprogram, 'transform' ); | |
OFFSET[0] += STEP; | |
if (OFFSET[0] <= -1) { | |
STEP = .001; | |
} else if (OFFSET[0] >= 1) { | |
STEP = -.001; | |
} | |
// gl.uniform3fv( u_offset, new Float32Array( OFFSET ) ); | |
gl.uniformMatrix4fv( u_transform, false, new Float32Array([ | |
1, 0, 0, 0, | |
0, 1, 0, 0, | |
0, 0, 1, 0, | |
OFFSET[0], OFFSET[1], OFFSET[2], 1 | |
])); | |
//************************************************************// | |
// | |
// DRAW! | |
// | |
// gl.drawArrays( gl.LINES, 0, 6 ); | |
gl.drawElements( gl.TRIANGLES, VERTEXCOUNT, 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