Skip to content

F
FluidSimulation
Commit c7714fb9 authored by amandaghassaei's avatar amandaghassaei
Browse files
Options

threejs

parent 62b21b85
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 44295 additions and 1 deletion
dependencies/three.js 0 → 100755
View file @ c7714fb9
This diff is collapsed.
dependencies/three.min.js 0 → 100755
View file @ c7714fb9
This source diff could not be displayed because it is too large. You can view the blob instead.
index.html
View file @ c7714fb9
......@@ -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/>
......
js/main.js
View file @ c7714fb9
......@@ -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
......
js/threeView.js 0 → 100644
View file @ c7714fb9
/**
* 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
main.css
View file @ c7714fb9
......@@ -16,6 +16,14 @@ canvas {
overflow: hidden;
}
#threeContainer{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#about{
position: absolute;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment