Commit c7714fb9 authored by amandaghassaei's avatar amandaghassaei

threejs

parent 62b21b85
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -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/>
......
......@@ -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
......
/**
* 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
......@@ -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