wolftype · October 14, 2016 01:54
diff --git a/index.html b/index.html
 <html>

 <!--  

 author: wolftype 
 license: MIT

   Example use of GFX.js (https://rawgit.com/wolftype/200c/gh-pages/js/gfx.js)

   An ASAP (As-Simple-As-Possible) WebGL Framework For Graphics Experiments

   With Context, Vectors, Matrices, Quaternions, Frames, Scenes and Shaders

   How to use: 

      <html>
      <script src = "http://rawgit.com/wolftype/200c/gh-pages/js/gfx.js"></script>
      
      var app = new GFX.App();

      app.onInit() = function(){
      //initialize GL objects and buffers
      }

      app.onRender() = function(){
      //drawing routines
      }

      <script id = "gfxvert" type="text/glsl">
      //vertex shader code
      </script>

      <script id = "gfxfrag" type="text/glsl">
      //fragment shader code
      </script>
      
      <body onload = "app.start()">
      <canvas id = "gfxcanvas" width = "640" height = "480"></canvas>
      </body>
      </html>
 --> 


 <script src = "https://rawgit.com/wolftype/200c/gh-pages/js/gfx.js"></script>

 <script type="text/javascript">


 var app = new GFX.App();
 var box;

 /// On Initialization of the WebGL Application (this happens once)
 app.onInit = function(){

  // A CUBE! 
  // We include each vertex on the back side TWICE so that we can attach
  // TWO separate uv coordinates to each
  var vertices = new Float32Array( [
    -1.0, -1.0, 1.0,  //bottom left front
    -1.0, 1.0,  1.0,  //top left front
    1.0,  1.0,  1.0,  //top right front
    1.0,  -1.0, 1.0,  //bottom right front

    -1.0, -1.0, -1.0, //bottom left back
    -1.0, 1.0,  -1.0, //top left back
    1.0,  1.0,  -1.0, //top right back
    1.0,  -1.0, -1.0, //bottom right back

    //second copy of back side:
    -1.0, -1.0, -1.0, //bottom left back II
    -1.0, 1.0,  -1.0, //top left back II
    1.0,  1.0,  -1.0, //top right back II
    1.0,  -1.0, -1.0, //bottom right back II

  ]); 

  var texCoord = new Float32Array([
    0.0, 0.0,   
    0.0, 1.0,  
    1.0, 1.0,
    1.0, 0.0, 
    1.0, 0.0,
    1.0, 1.0,
    0.0, 1.0,
    0.0, 0.0, 
    //uvs to attach to second copy of back face
    //for texturing top and bottom of cube:
    0.0, 1.0,
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,      
  ]);  

  //Break Object Vertices Triangles
   var indices = new Uint16Array([
     1,0,3,2,1,3, //front
     2,3,7,6,2,7, //right
     6,7,4,5,6,4, //back
     5,4,1,1,4,0, //left
     //use alternative uvs for top and bottom:
     9,1,2,10,9,2, //top
     0,8,11,3,0,11 //bottom
   ]);

  //Create and Bind two new array buffers and a new element array buffer
  box = new GFX.Mesh();

  //Allocate Some Data on the GPU and copy position data over
  box.vertexBuffer.bind();
  box.vertexBuffer.alloc( vertices.byteLength );
  box.vertexBuffer.data(vertices);

  //Allocate Some Data on the GPU and copy tex data over
  box.texBuffer.bind();
  box.texBuffer.alloc( texCoord.byteLength );
  box.texBuffer.data(texCoord);

  //Allocate Some Data on the GPU and copy index data over
  box.indexBuffer.bind();
  box.indexBuffer.alloc( indices.byteLength );
  box.indexBuffer.data(indices);
 }


 // Render the scene
 app.onRender = function() {

  var scene = this.scene;

  //rotate scene camera about y axis
  scene.camera.frame.rotateY( Math.sin( scene.time) * Math.PI / 10  );

  //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" );

    box.frame.rotateX( scene.time );

    //upload model matrix
    box.uploadModel(scene.shader)

    //Bind Vertex Buffer
    box.vertexBuffer.bind();
    //Point Buffer to Attribute in shader
    scene.shader.pointAttribute("position", 3);

    //Bind TexCoord Buffer
    box.texBuffer.bind();
    //Point Buffer to Attribute in Shader
    scene.shader.pointAttribute("uv", 2)

    //Bind Index Buffer and Draw based on Indices
    box.indexBuffer.bind();
    //Draw the indices
    box.indexBuffer.drawElements(GL.TRIANGLES);

   //or just draw the vertex array buffer directly as points (can also use GL.LINES, GL.LINE_STRIP, GL.TRIANGLES, etc)
   //  box.vertexBuffer.bind();
   //  box.vertexBuffer.drawArrays(GL.POINTS);

  scene.end();
 }

 </script>

 <!-- VERTEX SHADER -->
 <script id="gfxvert" type="text/glsl">

  #ifdef GL_ES
  precision lowp 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);
    gl_PointSize = 10.0;
  }
 </script>


 <!-- FRAGMENT SHADER -->
 <script id="gfxfrag" type="text/glsl">

  #ifdef GL_ES
  precision lowp float;
  #endif

  uniform float u_time;

  varying vec2 vuv;

  void main() {
    vec2 st = vuv;
    st = fract(st*2.0 );
    vec3 color = vec3(st.x * abs(sin(u_time)), 0., st.y * abs(cos(u_time)) );
    gl_FragColor = vec4(color,1.0);
  }
 </script>

 <body onload=app.start()>
 <canvas id="gfxcanvas" width=640 height=480> No <code> canvas </code> tag support </canvas>

 </body>
 </html>
	<html>

	<!--

	author: wolftype
	license: MIT

	Example use of GFX.js (https://rawgit.com/wolftype/200c/gh-pages/js/gfx.js)

	An ASAP (As-Simple-As-Possible) WebGL Framework For Graphics Experiments

	With Context, Vectors, Matrices, Quaternions, Frames, Scenes and Shaders

	How to use:

	<html>
	<script src = "http://rawgit.com/wolftype/200c/gh-pages/js/gfx.js"></script>

	var app = new GFX.App();

	app.onInit() = function(){
	//initialize GL objects and buffers
	}

	app.onRender() = function(){
	//drawing routines
	}

	<script id = "gfxvert" type="text/glsl">
	//vertex shader code
	</script>

	<script id = "gfxfrag" type="text/glsl">
	//fragment shader code
	</script>

	<body onload = "app.start()">
	<canvas id = "gfxcanvas" width = "640" height = "480"></canvas>
	</body>
	</html>
	-->


	<script src = "https://rawgit.com/wolftype/200c/gh-pages/js/gfx.js"></script>

	<script type="text/javascript">


	var app = new GFX.App();
	var box;

	/// On Initialization of the WebGL Application (this happens once)
	app.onInit = function(){

	// A CUBE!
	// We include each vertex on the back side TWICE so that we can attach
	// TWO separate uv coordinates to each
	var vertices = new Float32Array( [
	-1.0, -1.0, 1.0, //bottom left front
	-1.0, 1.0, 1.0, //top left front
	1.0, 1.0, 1.0, //top right front
	1.0, -1.0, 1.0, //bottom right front

	-1.0, -1.0, -1.0, //bottom left back
	-1.0, 1.0, -1.0, //top left back
	1.0, 1.0, -1.0, //top right back
	1.0, -1.0, -1.0, //bottom right back

	//second copy of back side:
	-1.0, -1.0, -1.0, //bottom left back II
	-1.0, 1.0, -1.0, //top left back II
	1.0, 1.0, -1.0, //top right back II
	1.0, -1.0, -1.0, //bottom right back II

	]);

	var texCoord = new Float32Array([
	0.0, 0.0,
	0.0, 1.0,
	1.0, 1.0,
	1.0, 0.0,
	1.0, 0.0,
	1.0, 1.0,
	0.0, 1.0,
	0.0, 0.0,
	//uvs to attach to second copy of back face
	//for texturing top and bottom of cube:
	0.0, 1.0,
	0.0, 0.0,
	1.0, 0.0,
	1.0, 1.0,
	]);

	//Break Object Vertices Triangles
	var indices = new Uint16Array([
	1,0,3,2,1,3, //front
	2,3,7,6,2,7, //right
	6,7,4,5,6,4, //back
	5,4,1,1,4,0, //left
	//use alternative uvs for top and bottom:
	9,1,2,10,9,2, //top
	0,8,11,3,0,11 //bottom
	]);

	//Create and Bind two new array buffers and a new element array buffer
	box = new GFX.Mesh();

	//Allocate Some Data on the GPU and copy position data over
	box.vertexBuffer.bind();
	box.vertexBuffer.alloc( vertices.byteLength );
	box.vertexBuffer.data(vertices);

	//Allocate Some Data on the GPU and copy tex data over
	box.texBuffer.bind();
	box.texBuffer.alloc( texCoord.byteLength );
	box.texBuffer.data(texCoord);

	//Allocate Some Data on the GPU and copy index data over
	box.indexBuffer.bind();
	box.indexBuffer.alloc( indices.byteLength );
	box.indexBuffer.data(indices);
	}


	// Render the scene
	app.onRender = function() {

	var scene = this.scene;

	//rotate scene camera about y axis
	scene.camera.frame.rotateY( Math.sin( scene.time) * Math.PI / 10 );

	//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" );

	box.frame.rotateX( scene.time );

	//upload model matrix
	box.uploadModel(scene.shader)

	//Bind Vertex Buffer
	box.vertexBuffer.bind();
	//Point Buffer to Attribute in shader
	scene.shader.pointAttribute("position", 3);

	//Bind TexCoord Buffer
	box.texBuffer.bind();
	//Point Buffer to Attribute in Shader
	scene.shader.pointAttribute("uv", 2)

	//Bind Index Buffer and Draw based on Indices
	box.indexBuffer.bind();
	//Draw the indices
	box.indexBuffer.drawElements(GL.TRIANGLES);

	//or just draw the vertex array buffer directly as points (can also use GL.LINES, GL.LINE_STRIP, GL.TRIANGLES, etc)
	// box.vertexBuffer.bind();
	// box.vertexBuffer.drawArrays(GL.POINTS);

	scene.end();
	}

	</script>

	<!-- VERTEX SHADER -->
	<script id="gfxvert" type="text/glsl">

	#ifdef GL_ES
	precision lowp 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);
	gl_PointSize = 10.0;
	}
	</script>


	<!-- FRAGMENT SHADER -->
	<script id="gfxfrag" type="text/glsl">

	#ifdef GL_ES
	precision lowp float;
	#endif

	uniform float u_time;

	varying vec2 vuv;

	void main() {
	vec2 st = vuv;
	st = fract(st*2.0 );
	vec3 color = vec3(st.x * abs(sin(u_time)), 0., st.y * abs(cos(u_time)) );
	gl_FragColor = vec4(color,1.0);
	}
	</script>

	<body onload=app.start()>
	<canvas id="gfxcanvas" width=640 height=480> No <code> canvas </code> tag support </canvas>

	</body>
	</html>