Created
October 19, 2016 06:49
-
-
Save merttoka/cba88cf485e9a0814d9593b01041215f to your computer and use it in GitHub Desktop.
MAT200C HW3
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.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(){ | |
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]--; | |
} | |
//Create and Bind two new array buffers and a new element array buffer | |
model = new GFX.Mesh(); | |
//Allocate Some Data on the GPU and copy position data over | |
model.vertexBuffer.bind(); | |
model.vertexBuffer.alloc( vertices.byteLength ); | |
model.vertexBuffer.data(vertices); | |
//Allocate Some Data on the GPU and copy tex data over | |
model.texBuffer.bind(); | |
model.texBuffer.alloc( texCoord.byteLength ); | |
model.texBuffer.data(texCoord); | |
//Allocate Some Data on the GPU and copy index data over | |
model.indexBuffer.bind(); | |
model.indexBuffer.alloc( indices.byteLength ); | |
model.indexBuffer.data(indices); | |
} | |
// Render the scene | |
app.onRender = function() { | |
var scene = this.scene; | |
scene.color = [0.8,0.8,0.8,1.0]; | |
//begin scene render, send matrices over to shader uniform | |
scene.begin(); | |
//Send Time Variable over to GPU | |
scene.shader.setUniformFloat("u_time", scene.time ) | |
//enable attributes in shader | |
scene.shader.enableAttribute( "position" ); | |
scene.shader.enableAttribute( "uv" ); | |
model.frame.rotateX( scene.time ); | |
model.frame.rotateY( Math.PI / 8.) | |
//upload model matrix | |
model.uploadModel(scene.shader) | |
//Bind Vertex Buffer | |
model.vertexBuffer.bind(); | |
//Point Buffer to Attribute in shader | |
scene.shader.pointAttribute("position", 3); | |
//Bind TexCoord Buffer | |
model.texBuffer.bind(); | |
//Point Buffer to Attribute in Shader | |
scene.shader.pointAttribute("uv", 2) | |
//Bind Index Buffer and Draw based on Indices | |
model.indexBuffer.bind(); | |
//Change display mode based on time | |
var mode = scene.time % 3 > 0 && scene.time % 3 < .4 ? GL.LINES: GL.TRIANGLES; | |
//Draw the indices | |
model.indexBuffer.drawElements(mode); | |
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 float u_time; //Time | |
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 | |
vec2 random2(vec2 st){ | |
st = vec2( dot(st,vec2(127.1,311.7)), | |
dot(st,vec2(269.5,183.3)) ); | |
return -1.0 + 2.0*fract(sin(st)*43758.5453123); | |
} | |
float noise(vec2 st) { | |
vec2 i = floor(st); | |
vec2 f = fract(st); | |
vec2 u = f*f*(3.0-2.0*f); | |
return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ), | |
dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x)*st.y, | |
mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ), | |
dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x)*st.y, u.y); | |
} | |
void main() { | |
vuv = uv; | |
vec3 temp = vec3(position.x * (noise(uv*sin(u_time)*3.5)+1.), | |
position.y * (noise(uv*cos(u_time)*2.1)+1.), | |
position.z * (noise(uv*cos(u_time)*2.8)+1.)); | |
gl_Position = projection * view * model * vec4(temp, 1.0); | |
} | |
</script> | |
<!-- FRAGMENT SHADER --> | |
<script id="gfxfrag" type="text/glsl"> | |
#ifdef GL_ES | |
precision mediump float; | |
#endif | |
varying vec2 vuv; | |
void main() { | |
vec2 st = vuv; | |
vec3 color = vec3(st.x*0.5+.45); | |
//vec3 color = vec3(st.x, st.y, abs(sin(u_time)) ); | |
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