Created
October 26, 2016 19:55
-
-
Save merttoka/b7469cea680b73863e47dd849d2c5e84 to your computer and use it in GitHub Desktop.
MAT200C HW4
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> | |
<script src = "https://rawgit.com/wolftype/200c/gh-pages/js/gfx_v02.js"></script> | |
<script type="text/javascript"> | |
var app = new GFX.App(); | |
var model; | |
/// On Initialization of the WebGL Application (this happens once) | |
app.onInit = function(){ | |
this.scene.color = [0.85,0.85,0.85,1.0]; | |
var vertices = new Float32Array( [ | |
0.404509,-0.866025,-0.293893, 0.154508,-0.866025,-0.475528, -0.154509,-0.866025,-0.475528, -0.404509,-0.866025,-0.293893, -0.500000,-0.866025,0.000000, -0.404509,-0.866025,0.293893, -0.154508,-0.866025,0.475528, 0.154509,-0.866025,0.475528, 0.404509,-0.866025,0.293893, 0.500000,-0.866025,0.000000, 0.700629,-0.500000,-0.509037, 0.267617,-0.500000,-0.823639, -0.267617,-0.500000,-0.823639, -0.700629,-0.500000,-0.509037, -0.866026,-0.500000,0.000000, -0.700629,-0.500000,0.509037, -0.267617,-0.500000,0.823639, 0.267617,-0.500000,0.823639, 0.700629,-0.500000,0.509037, 0.866025,-0.500000,0.000000, 0.809017,0.000000,-0.587785, 0.309017,0.000000,-0.951057, -0.309017,0.000000,-0.951057, -0.809017,0.000000,-0.587785, -1.000000,0.000000,0.000000, -0.809017,0.000000,0.587785, -0.309017,0.000000,0.951057, 0.309017,0.000000,0.951057, 0.809017,0.000000,0.587785, 1.000000,0.000000,0.000000, 0.700629,0.500000,-0.509037, 0.267617,0.500000,-0.823639, -0.267617,0.500000,-0.823639, -0.700629,0.500000,-0.509037, -0.866026,0.500000,0.000000, -0.700629,0.500000,0.509037, -0.267617,0.500000,0.823639, 0.267617,0.500000,0.823639, 0.700629,0.500000,0.509037, 0.866025,0.500000,0.000000, 0.404509,0.866025,-0.293893, 0.154508,0.866025,-0.475528, -0.154509,0.866025,-0.475528, -0.404509,0.866025,-0.293893, -0.500000,0.866025,0.000000, -0.404509,0.866025,0.293893, -0.154508,0.866025,0.475528, 0.154509,0.866025,0.475528, 0.404509,0.866025,0.293893, 0.500000,0.866025,0.000000, 0.000000,-1.000000,0.000000, 0.000000,1.000000,0.000000 | |
]); | |
var texCoord = new Float32Array([ | |
0.000000,0.166667, 0.100000,0.166667, 0.200000,0.166667, 0.300000,0.166667, 0.400000,0.166667, 0.500000,0.166667, 0.600000,0.166667, 0.700000,0.166667, 0.800000,0.166667, 0.900000,0.166667, 1.000000,0.166667, 0.000000,0.333333, 0.100000,0.333333, 0.200000,0.333333, 0.300000,0.333333, 0.400000,0.333333, 0.500000,0.333333, 0.600000,0.333333, 0.700000,0.333333, 0.800000,0.333333, 0.900000,0.333333, 1.000000,0.333333, 0.000000,0.500000, 0.100000,0.500000, 0.200000,0.500000, 0.300000,0.500000, 0.400000,0.500000, 0.500000,0.500000, 0.600000,0.500000, 0.700000,0.500000, 0.800000,0.500000, 0.900000,0.500000, 1.000000,0.500000, 0.000000,0.666667, 0.100000,0.666667, 0.200000,0.666667, 0.300000,0.666667, 0.400000,0.666667, 0.500000,0.666667, 0.600000,0.666667, 0.700000,0.666667, 0.800000,0.666667, 0.900000,0.666667, 1.000000,0.666667, 0.000000,0.833333, 0.100000,0.833333, 0.200000,0.833333, 0.300000,0.833333, 0.400000,0.833333, 0.500000,0.833333, 0.600000,0.833333, 0.700000,0.833333, 0.800000,0.833333, 0.900000,0.833333, 1.000000,0.833333, 0.050000,0.000000, 0.150000,0.000000, 0.250000,0.000000, 0.350000,0.000000, 0.450000,0.000000, 0.550000,0.000000, 0.650000,0.000000, 0.750000,0.000000, 0.850000,0.000000, 0.950000,0.000000, 0.050000,1.000000, 0.150000,1.000000, 0.250000,1.000000, 0.350000,1.000000, 0.450000,1.000000, 0.550000,1.000000, 0.650000,1.000000, 0.750000,1.000000, 0.850000,1.000000, 0.950000,1.000000 | |
]); | |
var indices = new Uint16Array([ | |
1,2,11, 11,2,12, 2,3,12, 12,3,13, 3,4,13, 13,4,14, 4,5,14, 14,5,15, 5,6,15, 15,6,16, 6,7,16, 16,7,17, 7,8,17, 17,8,18, 8,9,18, 18,9,19, 9,10,19, 19,10,20, 10,1,20, 20,1,11, 11,12,21, 21,12,22, 12,13,22, 22,13,23, 13,14,23, 23,14,24, 14,15,24, 24,15,25, 15,16,25, 25,16,26, 16,17,26, 26,17,27, 17,18,27, 27,18,28, 18,19,28, 28,19,29, 19,20,29, 29,20,30, 20,11,30, 30,11,21, 21,22,31, 31,22,32, 22,23,32, 32,23,33, 23,24,33, 33,24,34, 24,25,34, 34,25,35, 25,26,35, 35,26,36, 26,27,36, 36,27,37, 27,28,37, 37,28,38, 28,29,38, 38,29,39, 29,30,39, 39,30,40, 30,21,40, 40,21,31, 31,32,41, 41,32,42, 32,33,42, 42,33,43, 33,34,43, 43,34,44, 34,35,44, 44,35,45, 35,36,45, 45,36,46, 36,37,46, 46,37,47, 37,38,47, 47,38,48, 38,39,48, 48,39,49, 39,40,49, 49,40,50, 40,31,50, 50,31,41, 2,1,51, 3,2,51, 4,3,51, 5,4,51, 6,5,51, 7,6,51, 8,7,51, 9,8,51, 10,9,51, 1,10,51, 41,42,52, 42,43,52, 43,44,52, 44,45,52, 45,46,52, 46,47,52, 47,48,52, 48,49,52, 49,50,52, 50,41,52 | |
]); | |
// to start indices from 0 | |
for(var i = 0; i < indices.length; i++){ | |
indices[i]--; | |
} | |
model = new GFX.Mesh(); | |
model.load(vertices, indices); | |
model.loadUV(texCoord); | |
} | |
// Render the scene | |
app.onRender = function() { | |
var scene = this.scene; | |
//begin scene render, send matrices over to shader uniform | |
scene.begin(); | |
//Send Time Variable over to GPU | |
scene.shader.setUniformFloat("u_time", scene.time ); | |
scene.matrix.translate(0,-.5,0); | |
for (var i =0;i < 15; ++i){ | |
var t = i/15; | |
scene.matrix.push(); | |
scene.matrix.translate((t-.6)*5, | |
(t-.5)*1.5, | |
(t-.5)*2); | |
scene.matrix.rotate(t*Math.sin(scene.time)*5, 0,0,1); | |
scene.matrix.scale(.2,.2,.2); | |
scene.matrix.push(); | |
scene.matrix.translate((t-.5)*4, | |
(t-.5)*3, | |
(t-.5)*2); | |
scene.matrix.push(); | |
scene.shader.setUniformFloat("selector", -1.+t); | |
scene.matrix.rotate((1-t)*Math.sin(scene.time)*5, 0,0,1); | |
scene.matrix.scale(1-t,1-t,1-t); | |
scene.draw(model); | |
scene.matrix.pop(); | |
scene.matrix.push(); | |
scene.shader.setUniformFloat("selector", 1.-t); | |
scene.matrix.rotate(t*Math.cos(scene.time)*5, 0,0,1); | |
scene.matrix.scale(t,t,t); | |
scene.draw(model); | |
scene.matrix.pop(); | |
scene.matrix.pop(); | |
scene.matrix.pop(); | |
} | |
scene.end(); | |
} | |
</script> | |
<!-- VERTEX SHADER --> | |
<script id="gfxvert" type="text/glsl"> | |
#ifdef GL_ES | |
precision mediump float; | |
#endif | |
attribute vec3 position; //Position | |
attribute vec2 uv; //Texture; | |
uniform mat4 model; //Model Matrix | |
uniform mat4 view; //View Matrix | |
uniform mat4 projection; //Projection Matrix | |
varying vec2 vuv; //Texture Coordiante to Output to Fragment Shader | |
void main() { | |
vuv = uv; | |
gl_Position = projection * view * model * vec4(position, 1.0); | |
} | |
</script> | |
<!-- FRAGMENT SHADER --> | |
<script id="gfxfrag" type="text/glsl"> | |
#ifdef GL_ES | |
precision mediump float; | |
#endif | |
uniform float selector; | |
varying vec2 vuv; | |
void main() { | |
vec2 st = vuv; | |
vec3 color = vec3(st.x*0.5+.45+selector/3.); | |
gl_FragColor = vec4(color, 1.0); | |
} | |
</script> | |
<body onload=app.start()> | |
<canvas id="gfxcanvas" width=960 height=500> No <code> canvas </code> tag support </canvas> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment