2016/05/02(月) [n年前の日記]
#1 [prog] three.jsで一本道を延々と走るソレ
three.jsを使って、一本道を延々と走るソレをどうにか書けたのでアップロード。F11キーを押して全画面表示すると、コレでも結構迫力が。
_roadmake4.html (DEMO)
使用画像。
_road2.png
_bg.jpg
_tree0.png
_tree1.png
_tree2.png
_tree3.png
ソースも画像も CC0 / Public Domain ってことで。
_roadmake4.html (DEMO)
使用画像。
_road2.png
_bg.jpg
_tree0.png
_tree1.png
_tree2.png
_tree3.png
ソースも画像も CC0 / Public Domain ってことで。
◎ 課題。 :
急カーブになると、道路脇が無い部分がなんだか見苦しくて。上手い誤魔化し方はないものか…。もっとも、背景を覆い隠すぐらいにポリゴンを長くすればいいのだろうけど。
大昔の3Dゲームでは、背景の下半分を真っ黒にして、道路脇のテクスチャの端を黒へのグラデーションに、とかやってたような気もするけど。しかしソレだと、背景画像の見え方が今一つになりそうだし。
いっそ背景を夜空にしちゃうとか…。フォグを黒にすれば遠景でポリゴンがボコボコ出てくるあたりも誤魔化せるし…。
大昔の3Dゲームでは、背景の下半分を真っ黒にして、道路脇のテクスチャの端を黒へのグラデーションに、とかやってたような気もするけど。しかしソレだと、背景画像の見え方が今一つになりそうだし。
いっそ背景を夜空にしちゃうとか…。フォグを黒にすれば遠景でポリゴンがボコボコ出てくるあたりも誤魔化せるし…。
◎ 夜版も作ってみた。 :
背景を夜空にして、黒でフォグをかけてみた。
_roadmake4_night.html (DEMO)
やっぱり、遠景がボコボコ出てくる感は残ってしまう。それでも、パッと見の雰囲気は随分変わった気がする。
本来であれば、カメラの近くにスポットライトを配置して前方を照らすべきだろうけど、黒のフォグをかけただけでもそれらしく見えたので、スポットライトは配置しなかった。
眺めていて思ったけど。時々、白い服を着た女性のテクスチャを貼ったビルボードが道路脇に出現したら、ちょっと面白いかも…。いや、動作確認時、自分がダメージを受けそうだから、やめておこう…。
昼、夕方、夜、朝の背景画像を作って、透明度を変えるなりして切り替えていくのも面白いかもしれず。
使った背景画像は以下。これも CC0 / Public Domain ってことで。
_bg2.jpg
OneDriveのフォルダにも、元画像をアップロードしておきました。御自由にどうぞ。いかにもCG臭い画像なので、何かの実験用にしか使えないだろうけど。
_OneDrive - panorama_images
_roadmake4_night.html (DEMO)
やっぱり、遠景がボコボコ出てくる感は残ってしまう。それでも、パッと見の雰囲気は随分変わった気がする。
本来であれば、カメラの近くにスポットライトを配置して前方を照らすべきだろうけど、黒のフォグをかけただけでもそれらしく見えたので、スポットライトは配置しなかった。
眺めていて思ったけど。時々、白い服を着た女性のテクスチャを貼ったビルボードが道路脇に出現したら、ちょっと面白いかも…。いや、動作確認時、自分がダメージを受けそうだから、やめておこう…。
昼、夕方、夜、朝の背景画像を作って、透明度を変えるなりして切り替えていくのも面白いかもしれず。
使った背景画像は以下。これも CC0 / Public Domain ってことで。
_bg2.jpg
OneDriveのフォルダにも、元画像をアップロードしておきました。御自由にどうぞ。いかにもCG臭い画像なので、何かの実験用にしか使えないだろうけど。
_OneDrive - panorama_images
[ ツッコむ ]
#2 [prog] three.js の Points が Firefoxで表示されない不具合について
手元で色々試したけど、どうも THREE.Points だけをシーンに追加する分には、Firefox 上でも Points が問題無く表示されるっぽい。しかし、Points 以外の何かしらもシーンに追加すると、途端に Points が表示されなくなるようで。
three.js のサンプルは、Points だけをシーンに追加してるから、Firefox上でも描画できているっぽいなと…。
試しに、Points群を最初にシーンに追加してから、その後、他の Mesh をシーンに追加してみた。
_billboard_test2_c.html (DEMO)
コレだと描画される…。シーンに追加する順番で違ってくるのだろうか…。
Points の、y座標の意味も、相変わらず分からない。値を少しずつ変えて試していたら、サイズ / 3.5 を代入した時に位置が合うように見えたのだけど。どうしてそこで 3.5 なる数字になるのか…。
まあ、Points を使うと、座標が画面外に出た瞬間にパカッと消えてしまうので、どのみち使いどころが難しいような気も。ただ、three.js のサンプルは、パカッと出たり消えたりしてるようには見えないわけで。何故なんだろう…。
three.js のサンプルは、Points だけをシーンに追加してるから、Firefox上でも描画できているっぽいなと…。
試しに、Points群を最初にシーンに追加してから、その後、他の Mesh をシーンに追加してみた。
_billboard_test2_c.html (DEMO)
for (var i = 0; i < 64; i++) { var w = getRandomArbitary(128, 256); var x = getRandomArbitary(-r, r); var y = w / 3.5; // 何故この値になるのか分からない… var z = getRandomArbitary(-r, r); var geom = new THREE.Geometry(); geom.vertices.push(new THREE.Vector3(x, y, z)); var mat = new THREE.PointsMaterial({ size: w, map: texTrees[Math.floor(Math.random() * texTrees.length)], fog: true, alphaTest: 0.5, // コレを入れないと透過部分がおかしくなる }); var tree = new THREE.Points(geom, mat); scene.add(tree); } // 何故か Firefox は、Points以外を後から追加しないと正常動作しない scene.add(plane); scene.add(box);
コレだと描画される…。シーンに追加する順番で違ってくるのだろうか…。
Points の、y座標の意味も、相変わらず分からない。値を少しずつ変えて試していたら、サイズ / 3.5 を代入した時に位置が合うように見えたのだけど。どうしてそこで 3.5 なる数字になるのか…。
まあ、Points を使うと、座標が画面外に出た瞬間にパカッと消えてしまうので、どのみち使いどころが難しいような気も。ただ、three.js のサンプルは、パカッと出たり消えたりしてるようには見えないわけで。何故なんだろう…。
[ ツッコむ ]
以上、1 日分です。