Skip to content

Instantly share code, notes, and snippets.

@merttoka

merttoka/index.html

Created October 19, 2016 06:49
Show Gist options
  • Save merttoka/cba88cf485e9a0814d9593b01041215f to your computer and use it in GitHub Desktop.
Save merttoka/cba88cf485e9a0814d9593b01041215f to your computer and use it in GitHub Desktop.
Download ZIP
MAT200C HW3
Raw
index.html
<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