Commit c7714fb9 by 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 @@ ... @@ -2,7 +2,7 @@ Fluid Simulation Ink Drop ... @@ -295,7 +295,9 @@ ... @@ -295,7 +295,9 @@ ... @@ -303,6 +305,7 @@ ... @@ -303,6 +305,7 @@
? ? ... @@ -318,6 +321,7 @@ ... @@ -318,6 +321,7 @@ Instructions: Click and drag to apply a force to the fluid. Over time, the colored material in the fluid will dissipate. Instructions: Click and drag to apply a force to the fluid. Over time, the colored material in the fluid will dissipate.

Real-time ink simulation using a grid-particle method Fast Fluid Dynamics Simulation on the GPU - a very well written tutorial about programming the Navier-Stokes equations on a GPU. Fast Fluid Dynamics Simulation on the GPU - a very well written tutorial about programming the Navier-Stokes equations on a GPU. Though not WebGL specific, it was still very useful.
Though not WebGL specific, it was still very useful.
Fluid Simulation (with WebGL demo) - this article has some nice, interactive graphics that helped me debug my code.
Fluid Simulation (with WebGL demo) - this article has some nice, interactive graphics that helped me debug my code.
... ...
 ... @@ -19,6 +19,8 @@ var rho = 1;//density ... @@ -19,6 +19,8 @@ var rho = 1;//density var GPU; var GPU; var threeView; window.onload = initGL; window.onload = initGL; function initGL() { function initGL() { ... @@ -43,6 +45,13 @@ function initGL() { ... @@ -43,6 +45,13 @@ function initGL() { window.onresize = onResize; 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(); GPU = initGPUMath(); // setup a GLSL programs // setup a GLSL programs ... ...
js/threeView.js 0 → 100644
 /** * 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 { ... @@ -16,6 +16,14 @@ canvas { overflow: hidden; overflow: hidden; } } #threeContainer{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #about{ #about{ position: absolute; 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!