ゲルストナー波

「ゲルストナー波」の編集履歴(バックアップ)一覧はこちら

ゲルストナー波」(2013/05/03 (金) 16:51:31) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

#divclass(modif){更新日:&date(), r58} #divclass(hd){#hr()} #divid(d0){} 水面の再現。 [[Simulating Ocean Water - Jerry Tessendorf (pdf)>>http://www-evasion.imag.fr/Membres/Fabrice.Neyret/NaturalScenes/fluids/water/waves/fluids-nuages/waves/Jonathan/articlesCG/simulating-ocean-water-01.pdf]] ざっと読んでみたが合ってるかよくわからない。 #javascript(){{ <script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/three.min.js"></script> <script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/Detector.js"></script> <script type="text/javascript"><!-- $(function(){ var init = function(){ var scene = new THREE.Scene(); var waveGeo = new THREE.Geometry(); // 板 var xUnits = 20, zUnits = 20; for(var i =0; i<=zUnits; i++){ for(var j=0; j<=xUnits; j++){ waveGeo.vertices.push( new THREE.Vector3(j, 0, i) ); if(i<zUnits && j<xUnits){ var refp = i*(xUnits+1)+j; waveGeo.faces.push( new THREE.Face4(refp, refp+xUnits+1, refp+xUnits+2, refp+1) ); } } } var waveMesh = new THREE.Mesh( waveGeo, new THREE.MeshPhongMaterial({color:0x003366, specular:0x0066dd}) ); scale = 8; waveMesh.scale.multiplyScalar(scale); waveMesh.position.set(-xUnits*scale/2,0,-zUnits*scale/2); scene.add(waveMesh); // xyz軸 var axes = new THREE.AxisHelper(100); scene.add( axes ); // ライト var light = new THREE.DirectionalLight( 0xffffff, 1 ); scene.add( light ); light.position.set(30,100,-20).normalize(); // カメラ var camera = new THREE.PerspectiveCamera( 30, 320/240, 1, 400 ); camera.position.set(-18,90,200); camera.lookAt(scene.position); // レンダラ var renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( 320, 240 ); var container = $('#d0'); container.append( renderer.domElement ); var ti = 0, t = 0; var waves = []; waves.push( {'A':0.7, 'q':1.5, 'k':new THREE.Vector2(0.4, 0.3), phi:0} ); waves.push( {'A':0.1, 'q':6, 'k':new THREE.Vector2(0.9, -0.4), phi:4.3} ); waves.push( {'A':0.1, 'q':4, 'k':new THREE.Vector2(0.4, -0.7), phi:2.1} ); var vrt = waveMesh.geometry.vertices; (function(){ ti++; t = ti / (1000/70); for(var i = 0; i<=zUnits; i++){ for(var j = 0; j<=xUnits; j++){ vrt[i*(xUnits+1)+j].set(j,0,i); for(var w = 0, wlen = waves.length; w<wlen; w++){ var A = waves[w].A; var q = waves[w].q; var k = waves[w].k; var phi = waves[w].phi; var omega = Math.sqrt(9.8 * q); var point = new THREE.Vector2(j,i); var th = k.dot(point) - omega * t + phi; vrt[i*(xUnits+1)+j].x -= k.x*q*A*Math.sin(th); vrt[i*(xUnits+1)+j].z -= k.y*q*A*Math.sin(th); vrt[i*(xUnits+1)+j].y += A*Math.cos(th); } } } waveMesh.geometry.computeFaceNormals(); waveMesh.geometry.computeVertexNormals(); waveMesh.geometry.normalsNeedUpdate = true; waveMesh.geometry.verticesNeedUpdate = true; renderer.render(scene, camera); setTimeout(arguments.callee, 70); })(); }; if ( Detector.webgl ){ init(); }else{ $('#d0').html('<span style="color:red;">あなたが使用中のブラウザはWebGL非対応もしくはWebGLが有効になっていません。</span>'); } }); //--></script> }} //.
#divclass(modif){更新日:&date(), r58} #divclass(hd){#hr()} #divid(d0){} 水面の再現の基本的なもの。 [[Simulating Ocean Water - Jerry Tessendorf (pdf)>>http://www-evasion.imag.fr/Membres/Fabrice.Neyret/NaturalScenes/fluids/water/waves/fluids-nuages/waves/Jonathan/articlesCG/simulating-ocean-water-01.pdf]] ざっと読んでみたが合ってるかよくわからない。 #javascript(){{ <script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/three.min.js"></script> <script type="text/javascript" src="http://cdn56.atwikiimg.com/threejs/pub/Detector.js"></script> <script type="text/javascript"><!-- $(function(){ var sinit = function(){ var scene = new THREE.Scene(); var waveGeo = new THREE.Geometry(); // 板 var xUnits = 20, zUnits = 20; for(var i =0; i<=zUnits; i++){ for(var j=0; j<=xUnits; j++){ waveGeo.vertices.push( new THREE.Vector3(j, 0, i) ); if(i<zUnits && j<xUnits){ var refp = i*(xUnits+1)+j; waveGeo.faces.push( new THREE.Face4(refp, refp+xUnits+1, refp+xUnits+2, refp+1) ); } } } var waveMesh = new THREE.Mesh( waveGeo, new THREE.MeshPhongMaterial({color:0x003366, specular:0x0066dd}) ); scale = 8; waveMesh.scale.multiplyScalar(scale); waveMesh.position.set(-xUnits*scale/2,0,-zUnits*scale/2); scene.add(waveMesh); // xyz軸 var axes = new THREE.AxisHelper(100); scene.add( axes ); // ライト var light = new THREE.DirectionalLight( 0xffffff, 1 ); scene.add( light ); light.position.set(30,100,-20).normalize(); // カメラ var camera = new THREE.PerspectiveCamera( 30, 320/240, 1, 400 ); camera.position.set(-18,90,200); camera.lookAt(scene.position); // レンダラ var renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( 320, 240 ); var container = $('#d0'); container.append( renderer.domElement ); var ti = 0, t = 0; var waves = []; waves.push( {'A':0.7, 'q':1.5, 'k':new THREE.Vector2(0.4, 0.3), phi:0} ); waves.push( {'A':0.1, 'q':6, 'k':new THREE.Vector2(0.9, -0.4), phi:4.3} ); waves.push( {'A':0.1, 'q':4, 'k':new THREE.Vector2(0.4, -0.7), phi:2.1} ); var vrt = waveMesh.geometry.vertices; (function(){ ti++; t = ti / (1000/70); for(var i = 0; i<=zUnits; i++){ for(var j = 0; j<=xUnits; j++){ vrt[i*(xUnits+1)+j].set(j,0,i); for(var w = 0, wlen = waves.length; w<wlen; w++){ var A = waves[w].A; var q = waves[w].q; var k = waves[w].k; var phi = waves[w].phi; var omega = Math.sqrt(9.8 * q); var point = new THREE.Vector2(j,i); var th = k.dot(point) - omega * t + phi; vrt[i*(xUnits+1)+j].x -= k.x*q*A*Math.sin(th); vrt[i*(xUnits+1)+j].z -= k.y*q*A*Math.sin(th); vrt[i*(xUnits+1)+j].y += A*Math.cos(th); } } } waveMesh.geometry.computeFaceNormals(); waveMesh.geometry.computeVertexNormals(); waveMesh.geometry.normalsNeedUpdate = true; waveMesh.geometry.verticesNeedUpdate = true; renderer.render(scene, camera); setTimeout(arguments.callee, 70); })(); }; if ( Detector.webgl ){ sinit(); }else{ $('#d0').html('<span style="color:red;">あなたが使用中のブラウザはWebGL非対応もしくはWebGLが有効になっていません。</span>'); } }); //--></script> }} //.

表示オプション

横に並べて表示:
変化行の前後のみ表示: