threejs

c7714fb9 · amandaghassaei · 62b21b85 · c7714fb9 · c7714fb9 · c7714fb9
Commit c7714fb9 authored Apr 04, 2017 by amandaghassaei
6 changed files
--- a/dependencies/three.js
+++ b/dependencies/three.js
--- a/dependencies/three.min.js
+++ b/dependencies/three.min.js
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <title>Fluid Simulation</title>
+    <title>Ink Drop</title>

    <link rel="stylesheet" type="text/css" href="dependencies/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="dependencies/flat-ui.min.css">
@@ -295,7 +295,9 @@

    <script type="text/javascript" src="dependencies/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="dependencies/flat-ui.min.js"></script>
+    <script type="text/javascript" src="dependencies/three.js"></script>

+    <script type="text/javascript" src="js/threeView.js"></script>
    <script type="text/javascript" src="js/GLBoilerplate.js"></script>
    <script type="text/javascript" src="js/GPUMath.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
@@ -303,6 +305,7 @@
 <body>

 <canvas id="glcanvas"></canvas>
+<div id="threeContainer"></div>

 <a href="#" id="about">?</a>

@@ -318,6 +321,7 @@
                <b>Instructions:</b> Click and drag to apply a force to the fluid.  Over time, the colored material in the fluid will dissipate.
                <br/><br/>
                To learn more about the math involved, check out the following sources:<br/>
+                <a href="https://pdfs.semanticscholar.org/84b8/c7b7eecf90ebd9d54a51544ca0f8ff93c137.pdf" target="_blank">Real-time ink simulation using a grid-particle method</a>
                <a href="http://http.developer.nvidia.com/GPUGems/gpugems_ch38.html" target="_blank">Fast Fluid Dynamics Simulation on the GPU</a> - a very well written tutorial about programming the Navier-Stokes equations on a GPU.
                Though not WebGL specific, it was still very useful.<br/>
                <a href="http://jamie-wong.com/2016/08/05/webgl-fluid-simulation/" target="_blank">Fluid Simulation (with WebGL demo)</a> - this article has some nice, interactive graphics that helped me debug my code.<br/>

--- a/js/main.js
+++ b/js/main.js
@@ -19,6 +19,8 @@ var rho = 1;//density

 var GPU;

+var threeView;
+
 window.onload = initGL;

 function initGL() {
@@ -43,6 +45,13 @@ function initGL() {

    window.onresize = onResize;

+    threeView = initThreeView();
+    var mesh = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial());
+    threeView.scene.add(mesh);
+    threeView.render();
+
+
+
    GPU = initGPUMath();

    // setup a GLSL programs

--- a/js/threeView.js
+++ b/js/threeView.js
+/**
+ * Created by ghassaei on 9/16/16.
+ */
+
+function initThreeView() {
+
+    var scene = new THREE.Scene();
+    var camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -10, 100);//-40, 40);
+    var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
+
+    var animationRunning = false;
+    var pauseFlag = false;
+
+    init();
+
+    function init() {
+
+        var container = $("#threeContainer");
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        container.append(renderer.domElement);
+
+        // scene.background = new THREE.Color(0xffffff);
+        var directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.5);
+        directionalLight1.position.set(100, 0, 100);
+        scene.add(directionalLight1);
+        // var directionalLight4 = new THREE.DirectionalLight(0xffffff, 0.3);
+        // directionalLight4.position.set(0, 0, -100);
+        // scene.add(directionalLight4);
+        // var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.4);
+        // directionalLight2.position.set(100, 0, -30);
+        // scene.add(directionalLight2);
+        // var directionalLight3 = new THREE.DirectionalLight(0xffffff, 0.8);
+        // directionalLight3.position.set(-100, 0, -30);
+        // scene.add(directionalLight3);
+        var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+        scene.add(ambientLight);
+
+        //scene.fog = new THREE.FogExp2(0xf4f4f4, 1.7);
+        //renderer.setClearColor(scene.fog.color);
+
+        camera.up = new THREE.Vector3(0,0,1);
+        camera.zoom = 10;
+        camera.updateProjectionMatrix();
+        camera.position.z = 10;
+
+        renderer.setClearColor(0x000000, 0);
+
+        render();
+    }
+
+    function render() {
+        if (!animationRunning) {
+            _render();
+        }
+    }
+
+    function startAnimation(callback){
+        console.log("starting animation");
+        if (animationRunning){
+            console.warn("animation already running");
+            return;
+        }
+        animationRunning = true;
+        _loop(function(){
+                callback();
+            _render();
+        });
+
+    }
+
+    function pauseAnimation(){
+        if (animationRunning) pauseFlag = true;
+    }
+
+    function _render(){
+        renderer.render(scene, camera);
+    }
+
+    function _loop(callback){
+        callback();
+        requestAnimationFrame(function(){
+            if (pauseFlag) {
+                pauseFlag = false;
+                animationRunning = false;
+                console.log("pausing animation");
+                render();//for good measure
+                return;
+            }
+            _loop(callback);
+        });
+    }
+
+    function onWindowResize() {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.left = -window.innerWidth / 2;
+        camera.right = window.innerWidth / 2;
+        camera.top = window.innerHeight / 2;
+        camera.bottom = -window.innerHeight / 2;
+        camera.updateProjectionMatrix();
+
+        renderer.setSize(window.innerWidth, window.innerHeight);
+
+        render();
+    }
+
+    return {
+        render: render,
+        onWindowResize: onWindowResize,
+        startAnimation: startAnimation,
+        pauseAnimation: pauseAnimation,
+        scene: scene,
+        camera: camera
+    }
+}
\ No newline at end of file
--- a/main.css
+++ b/main.css
@@ -16,6 +16,14 @@ canvas {
    overflow: hidden;
 }

+#threeContainer{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+

 #about{
    position: absolute;