Ugly version of basic simulation implemented:

1. Using Brandon Jones webgl 2 project as frame work: https://github.com/toji/webgl2-particles 2. Transform feedback for gl_position works 3. UBO not working yet, converting vertex array to textures currently.
zammiez · Nov 24, 2015 · 5f9d6d6 · 5f9d6d6
1 parent ebb8883
commit 5f9d6d6
Show file tree

Hide file tree

Showing 19 changed files with 38,579 additions and 50 deletions.
diff --git a/Presentation/Milestone 1.pdf b/Presentation/Milestone 1.pdf
diff --git a/Presentation/WebGL Cloth Simulation.pdf b/Presentation/WebGL Cloth Simulation.pdf
diff --git a/helvetiker_bold.typeface.js b/helvetiker_bold.typeface.js
diff --git a/index.html b/index.html
@@ -1,54 +1,301 @@
+
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <title>Basic Three trytry.js App</title>
-    <script src="lib/jquery-2.1.4.min.js"></script>
-    <script src="lib/es6-promise.min.js"></script>
-
-    <script src="lib/three.js"></script>
-    <script src="lib/OrbitControls.js"></script>
-    <script src="lib/OBJLoader.js"></script>
-    <script src="lib/webgl-debug.js"></script>
-    <script src="lib/seedrandom.min.js"></script>
-
-    <script src="lib/stats.min.js"></script>
-    <script src="lib/dat.gui.js"></script>
-
-	<script src="glMatrix-0.9.5.min.js"></script>
-
-	<script id="massSpring-SpringVP" type="x-shader/x-vertex">
-
-		attribute vec3 aVertexPosition;
-	    uniform mat4 uMVMatrix;
-	    uniform mat4 uPMatrix;
-
-	    void main(void) {
-	        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-	    }
-	</script>
-
-	<script id="shader-fs" type="x-shader/x-fragment">
-	    precision mediump float;
-
-	    void main(void) {
-	        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
-	    }
-	</script>
-	<script src="js/main.js"></script>
-	<script src="js/BasicTry.js"></script>
-
-	<script>
-	window.onload = function () 
-	{
-		mainInit();
-	}
-	</script>
-
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
     <style>
-      html, body { margin: 0; padding: 0; overflow: hidden; }
+      body {
+        font-family: Monospace;
+        background-color: #000000;
+        margin: 0px;
+        overflow: hidden;
+      }
+
+      #info {
+        color: #ffffff;
+
+        font-family: Monospace;
+        font-size: 13px;
+        text-align: center;
+        font-weight: bold;
+
+        position: absolute;
+        top: 0px; width: 100%;
+        padding: 5px;
+      }
+
+      a {
+
+        color: #0040ff;
+
+      }
     </style>
   </head>
   <body>
-	<canvas id="canvas" width="800px" height="600px"></canvas>
+
+    <script src="js/three.js"></script>
+    <script src="js/GPGPU.js"></script>
+    <script src="js/GeometryUtils.js"></script>
+    <script src="js/gpgpu/SimulationShader.js"></script>
+
+    <script src="js/leap-0.6.4.min.js"></script>
+    <script src="js/leap-plugins-0.1.6.1.js"></script>
+    <script src="js/leap.rigged-hand-0.1.3.min.js"></script>
+
+    <script src="helvetiker_bold.typeface.js"></script>
+
+    <!-- WebGL 1 shaders -->
+    <script id="vs-particles" type="x-shader/x-vertex">
+      uniform sampler2D map;
+      uniform float width;
+      uniform float height;
+      uniform float pointSize;
+
+      varying vec2 vUv;
+      varying vec4 vPosition;
+
+      void main() {
+        vUv = position.xy + vec2( 0.5 / width, 0.5 / height );
+
+        vec3 color = texture2D( map, vUv ).rgb;
+
+        gl_PointSize = pointSize;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4( color, 1.0 );
+      }
+    </script>
+
+    <script id="fs-particles" type="x-shader/x-fragment">
+      uniform sampler2D map;
+
+      varying vec2 vUv;
+      varying vec4 vPosition;
+
+      void main() {
+        float depth = smoothstep( 10.24, 1.0, gl_FragCoord.z / gl_FragCoord.w );
+        gl_FragColor = vec4( (vec3(0.0, 0.03, 0.05) + (texture2D( map, vUv ).xyz * 0.25)), depth );
+      }
+    </script>
+
+    <!-- WebGL 2 shaders -->
+    <script id="vs-particles-2" type="x-shader/x-vertex">
+      uniform float pointSize;
+
+      varying vec3 vPosition;
+
+      void main() {
+        vPosition = position;
+        gl_PointSize = pointSize;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+      }
+    </script>
+
+    <script id="fs-particles-2" type="x-shader/x-fragment">
+      varying vec3 vPosition;
+
+      void main() {
+        float depth = smoothstep( 10.24, 1.0, gl_FragCoord.z / gl_FragCoord.w );
+        gl_FragColor = vec4( (vec3(0.0, 0.03, 0.05) + (vPosition * 0.25)), depth );
+      }
+    </script>
+
+    <script>
+      function getQueryString(name, defaultValue) {
+        var query = window.location.search.substring(1);
+        var vars = query.split("&");
+        for (var i = 0; i < vars.length; i++) {
+          var pair = vars[i].split("=");
+          if (pair[0] == name) {
+            return unescape(pair[1]);
+          }
+        }
+        return defaultValue;
+      }
+
+      function getQueryValue(name, defaultValue) {
+          var value = getQueryString(name, null);
+          if (value == null) {
+              return defaultValue;
+          }
+          return parseInt(value, 10);
+      }
+
+      var container, canvas, gl;
+
+      var cloth_w, cloth_h;
+
+      var scene, camera, light, renderer;
+      var vbo_pos, vbo_pos2;
+      var originGeometry, cube, mesh, material;
+      var roomMesh;
+
+      var data,texture, points;
+
+      var controls;
+
+      var fboParticles, rtTexturePos, rtTexturePos2, simulationShader;
+
+      var width = getQueryValue('width', 1024);
+      var height = getQueryValue('height', 1024);
+      var pointSize = getQueryValue('pointSize', 2);
+
+      var maxFingers = 42;
+      var fingers = [];
+      var fingertipSize = 0.18;
+      var handOffset = new THREE.Vector3(0,-2.5, 0.0);
+
+      var leapController = new Leap.Controller();
+
+      var isWebGL2 = false;
+
+      function init() {
+          container = document.createElement('div');
+          document.body.appendChild(container);
+
+          canvas = document.createElement('canvas');
+
+          var tryGL2 = getQueryValue('webgl2', 1);
+
+          if (tryGL2) {
+              // Try creating a WebGL 2 context first
+              gl = canvas.getContext('webgl2', { antialias: false });
+              if (!gl) {
+                  gl = canvas.getContext('experimental-webgl2', { antialias: false });
+              }
+              isWebGL2 = !!gl;
+              if (isWebGL2) {
+                  console.log("I can haz flag, so WebGL 2 is yes!")
+              }
+          }
+
+          renderer = new THREE.WebGLRenderer({ canvas: canvas, context: gl });
+          renderer.setSize(window.innerWidth, window.innerHeight);
+          renderer.sortObjects = false;
+          container.appendChild(renderer.domElement);
+
+          scene = new THREE.Scene();
+
+          camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1024);
+          camera.position.y = 1.5;
+          camera.position.z = 4;
+          camera.lookAt(scene.position);
+          scene.add(camera);
+
+          light = new THREE.DirectionalLight(0xffffff, 0.5);
+          light.position.set(0, 100, 0);
+          scene.add(light);
+
+          var backImage = THREE.ImageUtils.loadTexture("media/Back.png");
+          var ceilImage = THREE.ImageUtils.loadTexture("media/Ceiling.png");
+          var floorImage = THREE.ImageUtils.loadTexture("media/Floor.png");
+          var sideImage = THREE.ImageUtils.loadTexture("media/Side.png");
+
+          var roomMaterialArray = [
+            new THREE.MeshBasicMaterial({ map: sideImage, side: THREE.BackSide }),
+            new THREE.MeshBasicMaterial({ map: sideImage, side: THREE.BackSide }),
+            new THREE.MeshBasicMaterial({ map: ceilImage, side: THREE.BackSide }),
+            new THREE.MeshBasicMaterial({ map: floorImage, side: THREE.BackSide }),
+            new THREE.MeshBasicMaterial({ map: backImage, side: THREE.BackSide }),
+            new THREE.MeshBasicMaterial({ map: backImage, side: THREE.BackSide })
+          ];
+          var roomMaterial = new THREE.MeshFaceMaterial(roomMaterialArray);
+          var roomGeometry = new THREE.BoxGeometry(10.24, 4, 5.12);
+          roomMesh = new THREE.Mesh(roomGeometry, roomMaterial);
+          roomMesh.doubleSided = true;
+          scene.add(roomMesh);
+
+          //
+          if (!isWebGL2 && !renderer.context.getExtension('OES_texture_float')) {
+              alert('OES_texture_float is not :(');
+          }
+
+          // Start Creation of DataTexture
+          cloth_h = 100;
+          cloth_w = 100;
+
+          data = new Float32Array(cloth_w * cloth_h * 4);
+          for (var i = 0, t = 0, x = 0; x < cloth_w; x++) {
+              for (var y = 0; y < 100; y++) {
+                  data[i + 0] = x * 1.0 / cloth_w;
+                  data[i + 1] = 1.0;
+                  data[i + 2] = y * 1.0 / cloth_h; //-y * 1.0 / cloth_h;
+                  data[i + 3] = t;
+                  i += 4;
+                  t++;
+              }
+          }
+          if (isWebGL2) {
+              vbo_pos = new THREE.BufferGeometry();
+              vbo_pos.addAttribute('position', new THREE.BufferAttribute(data, 4));
+              vbo_pos.addAttribute('prev_pos', new THREE.BufferAttribute(data, 4));
+              vbo_pos2 = vbo_pos.clone();
+              material = new THREE.ShaderMaterial({
+                  uniforms: {
+                      "pointSize": { type: "f", value: pointSize }
+                  },
+                  vertexShader: document.getElementById('vs-particles-2').textContent,
+                  fragmentShader: document.getElementById('fs-particles-2').textContent,
+                  blending: THREE.AdditiveBlending,
+                  depthWrite: false,
+                  depthTest: true,
+                  transparent: true
+              });
+
+              gpgpu = new GPGPU2(renderer);
+              gpgpu.init(data);
+              simulationShader = new GPGPU2.SimulationShader2(renderer, maxFingers);
+          } else {
+              debugger;
+              //WebGL 1+
+          }
+
+          mesh = new THREE.PointCloud(vbo_pos, material);
+      }
+
+      function onWindowResize() {
+          camera.aspect = window.innerWidth / window.innerHeight;
+          camera.updateProjectionMatrix();
+          renderer.setSize(window.innerWidth, window.innerHeight);
+      }
+
+      window.addEventListener( 'resize', onWindowResize, false );
+
+      var timer = 0;
+      var count = 0;
+      function render() {
+          requestAnimationFrame(render);
+
+          //timer += 0.002;
+
+          //if (timer >= 4) timer = 0;
+          simulationShader.setTimer(0.00002);
+          timer += 1;
+
+          // Ugly hack to make the particle mesh always draw last
+          scene.remove(mesh); scene.add(mesh);
+
+          if (isWebGL2) {
+              if (count % 2 === 0) {
+                  gpgpu.pass(simulationShader, vbo_pos2, vbo_pos);
+                  mesh.geometry = vbo_pos2;
+              } else {
+                  gpgpu.pass(simulationShader, vbo_pos, vbo_pos2);
+                  mesh.geometry = vbo_pos;
+              }
+          } else {
+              //webFL 1
+          }
+
+          count++;
+
+          renderer.render(scene, camera);
+      }
+
+      init();
+
+      render();
+
+    </script>
   </body>
-</html>
+</html>
diff --git a/js/BasicTry.js b/js/BasicTry.js
@@ -26,7 +26,26 @@ window.requestAnimFrame =
 
 (function() {
     'use strict';
-
+    function getQueryString(name, defaultValue) {
+        var query = window.location.search.substring(1);
+        var vars = query.split("&");
+        for (var i = 0; i < vars.length; i++) {
+            var pair = vars[i].split("=");
+            if (pair[0] == name) {
+                return unescape(pair[1]);
+            }
+        }
+        return defaultValue;
+    }
+
+    function getQueryValue(name, defaultValue) {
+        var value = getQueryString(name, null);
+        if (value == null) {
+            return defaultValue;
+        }
+        return parseInt(value, 10);
+    }
+
 	var canvas,camera,renderer;
     //var shaderProgram;
 
@@ -170,7 +189,6 @@ window.requestAnimFrame =
 
 		createVBO(gl);
 
-		gl.createTransformFeedback(1,tfID);
 		//1. fill in positions
 		//2. fill in indices
 		//3. disable vsync & setup springs