「ゲルストナー波」の編集履歴(バックアップ)一覧はこちら
「ゲルストナー波」(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>
}}
//.