mieki256's diary

  var mat = new THREE.MeshBasicMaterial({
    map: texTree,
    fog: true,
    side: THREE.DoubleSide,

    // コレを指定しないと透過部分がおかしくなる
    alphaTest: 0.5,

    // alphaTest指定があれば transparent指定が無くても透過になる
    //transparent: true,
  });

• 表と裏で異なるUV値を割り当てるとか。
• ポリゴン枚数が増えるけど、ポリゴンが交差しないように、かつ、片面ポリゴンだけで配置するとか。
• 左右対称でも不自然に見えないテクスチャを作るとか。

◎ THREE.Points()を使う版でもalphaTestを指定してみた。 :

_billboard_test2_b.html (DEMO)

位置の指定の仕方は相変わらず不明だけど、それらしく表示されるようになった。

それはともかく、別の不具合に気が付いた。

◎ THREE.Points()がFirefoxで表示できない。 :

◎ 課題。 :

◎ 夜版も作ってみた。 :

背景を夜空にして、黒でフォグをかけてみた。

_roadmake4_night.html (DEMO)

やっぱり、遠景がボコボコ出てくる感は残ってしまう。それでも、パッと見の雰囲気は随分変わった気がする。

本来であれば、カメラの近くにスポットライトを配置して前方を照らすべきだろうけど、黒のフォグをかけただけでもそれらしく見えたので、スポットライトは配置しなかった。

眺めていて思ったけど。時々、白い服を着た女性のテクスチャを貼ったビルボードが道路脇に出現したら、ちょっと面白いかも…。いや、動作確認時、自分がダメージを受けそうだから、やめておこう…。

昼、夕方、夜、朝の背景画像を作って、透明度を変えるなりして切り替えていくのも面白いかもしれず。

使った背景画像は以下。これも CC0 / Public Domain ってことで。

_bg2.jpg

OneDriveのフォルダにも、元画像をアップロードしておきました。御自由にどうぞ。いかにもCG臭い画像なので、何かの実験用にしか使えないだろうけど。

_OneDrive - panorama_images

  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);

◎ 結果。 :

◎ Skyboxのやり方。 :

  // テクスチャ読み込み
  var r = "images/skybox1/";
  var urls = [
    r + "posx.jpg",
    r + "negx.jpg",
    r + "posy.jpg",
    r + "negy.jpg",
    r + "posz.jpg",
    r + "negz.jpg",
  ];
  var texCube = new THREE.CubeTextureLoader().load(urls);
  texCube.format = THREE.RGBFormat;
  texCube.mapping = THREE.CubeReflectionMapping;

  // skybox用のマテリアルを生成
  var cubeShader = THREE.ShaderLib["cube"];
  var cubeMat = new THREE.ShaderMaterial({
    fragmentShader: cubeShader.fragmentShader,
    vertexShader: cubeShader.vertexShader,
    uniforms: cubeShader.uniforms,
    depthWrite: false,
    side: THREE.BackSide,
  });

  cubeMat.uniforms["tCube"].value = texCube;

  // Skybox用ジオメトリ生成
  var d = 10000;
  var cubeGeo = new THREE.BoxGeometry(d, d, d);
  cubeMesh = new THREE.Mesh(cubeGeo, cubeMat);
  scene.add(cubeMesh);

      ┌──┐
      │posy│
      │    │
┌──┼──┼──┬──┐
│negx│posz│posx│negz│
│    │    │    │    │
└──┼──┼──┴──┘
      │negy│
      │    │
      └──┘

◎ 球に貼り付けるやり方。 :

  // テクスチャ読み込み
  var texEqu = new THREE.TextureLoader().load("images/bg.jpg");
  texEqu.anisotropy = renderer.getMaxAnisotropy();
  // texEqu.mapping = THREE.EquirectangularReflectionMapping;
  texEqu.mapping = THREE.UVMapping;

  // 背景用ジオメトリ生成
  var d = 6000;
  var geo = new THREE.SphereGeometry(d, 32, 32);
  geo.scale(-1, 1, 1); // コレを指定しないと背景が左右反転してしまう
  var mat = new THREE.MeshBasicMaterial({
    map: texEqu,
    fog: false,
  });
  bgMesh = new THREE.Mesh(geo, mat);
  scene.add(bgMesh);

◎ 背景コンバータ :

◎ THETATools :

◎ Panorama To Cubemap Converter :

◎ Cube2DM :

C:/Ruby/Ruby22/lib/ruby/gems/2.2.0/gems/ruby-beautify-0.97.4/lib/ruby-beautify.rb:152:in `indented_line': invalid byte sequence in UTF-8 (ArgumentError)
    from C:/Ruby/Ruby22/lib/ruby/gems/2.2.0/gems/ruby-beautify-0.97.4/lib/ruby-beautify.rb:38:in `block in pretty_string'
    from C:/Ruby/Ruby22/lib/ruby/gems/2.2.0/gems/ruby-beautify-0.97.4/lib/ruby-beautify.rb:27:in `each'
    from C:/Ruby/Ruby22/lib/ruby/gems/2.2.0/gems/ruby-beautify-0.97.4/lib/ruby-beautify.rb:27:in `pretty_string'
    from C:/Ruby/Ruby22/lib/ruby/gems/2.2.0/gems/ruby-beautify-0.97.4/bin/rbeautify:24:in `print_or_die'
    from C:/Ruby/Ruby22/lib/ruby/gems/2.2.0/gems/ruby-beautify-0.97.4/bin/rbeautify:34:in `<top (required)>'
    from c:/Ruby/Ruby22/bin/rbeautify:23:in `load'
    from c:/Ruby/Ruby22/bin/rbeautify:23:in `<main>'

• irb --noreadline で起動する。
• もしくは、~/.irbrc に IRB.conf[:USE_READLINE] = false を追加。

◎ readline.dllをインストールしてみたらどうなるだろう。 :

◎ rb-readlineなるライブラリがあるらしい。 :

◎ Linux上で試してみた。 :

◎ 線分が交差するか判別する処理をテスト。 :

違う方法を試すにしても、線分が交差しているか、交点はどこにあるかを求める処理が必要になるなと思ったので別途スクリプトを書いてテスト。

_crossing_check_demo.rb

線分の始点や終点をマウスでドラッグすると、交差してるかどうかで色が変わって、かつ、交点の位置が表示される。処理としては上手くいってるっぽい。

以下を参考にしました。ありがたや。

_線分交差判定 - Qiita
_４点からなる交点の求め方　画像処理ソリューション
_もっと簡単に−線分交差判定−

• lang=en を lang=ja に。
• xkeyboard=jp を追加。
• tz=Asia/Tokyo を追加。

◎ VMware Player上でUSBメモリからOSを起動。 :

◎ 感情をトリガーとして変身する設定。 :

◎ 自由意思で変身できるヒーローと条件が満たされないと変身できないヒーロー。 :

◎ Hな気分になると変身できるヒーロー、を妄想。 :

◎ アニメソングを歌うと変身するヒーロー、を妄想。 :

◎ 余談。 :

日本国内で配布されてる3Dモデルのライセンスって色々と面倒臭いモノが多いけど。その点、大崎一番太郎は、実に清々しいよなと…。

_CC事例その1：大崎一番太郎 | クリエイティブ・コモンズ・ジャパン
_大崎一番太郎 | Arc Project | クラウドを利用した3DCGデータ利活用実験

彼はCC0ライセンスなので、何に使ってもいいという。3Dモデル使ってレンダリングして大崎一番太郎の薄い本を作っても許されてしまうわけですよ。これほどまでに漢気に溢れたキャラクターが居ますか。可愛い顔してなんたる豪傑キャラ。

件のサービスも、「皆でいじりまくろう！(ただし大崎一番太郎だけを)」にしておいたら全然問題が起きなかったんだろうなと…。いや、それもそれでハードルが高いサービスになりそうですけど。彼のナニをどうイジればいいんだ…。どんな挑戦状だ…。

ハードル高いなあ。

◎ 気のせいじゃないな。 :

◎ タブレット絡みの設定が関係してるらしい。 :

◎ 妄想その1。 :

◎ 妄想その2。 :

◎ 妄想その3。 :

1. レイヤーを右クリック → 不透明部分を選択範囲に。
2. 選択 → 選択範囲の反転。これで透明部分が選択範囲になる。
3. 選択 → 選択範囲の拡大。数ドットを指定。
4. 切り取り。
5. 新規レイヤーを作って貼り付け。

• 策その1。白いフリンジが残ってるのだから、白い部分を透明にしてみるのはどうか。色 → 色を透明度に、で白を指定してやる。
• 策その2。境界以外の不透明部分を拡大して境界部分に載せてやれば誤魔化せないかなと。とりあえず、切り抜いただけのオリジナルのレイヤーをコピーして、ガウスぼかしをかけて、境界部分レイヤーから選択範囲を得て、その選択範囲で切り抜いて載せる。

◎ 一応画像も置いときます。 :

◎ 2015/05/19追記。 :

◎ vmdkファイルをマウントしたい。 :

◎ Windows XP単体をインストールしてみる。 :

mks.enableD3DRenderer = "TRUE"
mks.enableDX11Renderer = "FALSE"

MemTrimRate = "0"
mainMem.useNamedFile= "FALSE"
sched.mem.pshare.enable = "FALSE"
prefvmx.useRecommendedLockedMemSize = "TRUE"
MemAllowAutoScaleDown = "FALSE"

◎ 参考ページ。 :

◎ 使用例。 :

◎ 問題点。 :

◎ 応用。 :

◎ ゲームのネタ出しに使えないかな。 :

直線 → 円弧 → 直線

直線 → クロソイド曲線 → 円弧 → クロソイド曲線 → 直線

◎ マテリアル設定をメモ。 :

一応、参考動画やページを真似して設定した際の Node画面をスクリーンショットでメモ。

葉っぱのマテリアル。

幹のマテリアル。

IBLの設定。

◎ 参考動画・参考ページ。 :

◎ 使用例。 :

◎ Ubuntu 15.10 を 16.04 LTS にアップグレード。 :

sudo aptitude install update-manager-core
sudo aptitude update
sudo do-release-upgrade
一度再起動
sudo do-release-upgrade -d
もう一度再起動
lsb_release -a

◎ blenderをインストール。 :

sudo add-apt-repository ppa:thomas-schiex/blender
sudo apt-get update
sudo apt-get install blender

◎ LuxRenderをインストール。 :

libembree.so
libembree.so.2
libembree.so.2.4.0
libgomp.so.1
libgomp.so.1.0.0
liblux.so
luxconsole
luxcoreui
luxmerger
luxrender
luxvr
pylux.so
pyluxcore.so

◎ blender上からLuxRenderを使えるようにしておく。 :

◎ LuxRenderサーバを起動。 :

$ luxconsole -s

[Lux 2016-May-30 15:37:02 INFO : 0] Lux version 1.6.0  Build 0 of May 16 2016 at 09:28:23
[Lux 2016-May-30 15:37:02 INFO : 0] Threads: 4
[Lux 2016-May-30 15:37:02 INFO : 0] Using cache directory '/tmp/luxrender-1001/cache'
[Lux 2016-May-30 15:37:02 INFO : 0] Launching server mode [4 threads]
[Lux 2016-May-30 15:37:02 INFO : 0] Server listening on [::]:18018
[Lux 2016-May-30 15:37:02 INFO : 0] Server listening on 0.0.0.0:18018