Commit c7714fb9 by amandaghassaei

### threejs

parent 62b21b85
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
 ... ... @@ -2,7 +2,7 @@ Fluid Simulation Ink Drop ... ... @@ -295,7 +295,9 @@ ... ... @@ -303,6 +305,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.

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. 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.
... ...
 ... ... @@ -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
 /** * 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!