2015年8月2日日曜日

ポリゴンの並びによるライティング結果の違い





計算の精度の問題なのか,左のように対角線が上から下(逆でも良い)に揃える場合と,対角線が一筆書きのようにつながるようにした場合で,ポリゴンの切れ目が見える場合と見えない場合がある.

法線については,各三角形の2辺から外積により求め,それを各頂点に足していき,最後に正規化するという手を取っている.

正直何故こうなるのか,いまいち分からないので詳しい人がいたら教えてほしい.

2015年6月5日金曜日

「ゲームプログラマのためのコーディング技術」を読んで

「ゲームプログラマのためのコーディング技術」を読みました.

正直なところ,大圖さんのSlideshareの資料を見て,理想論ではあるんだけれど,そこまでやるのも大変そうだな,と思っていたので,この本も理想論を語っているのではないか,と疑っていましたが,読んでみるとそうでもありませんでした.

この本のタイトルには「ゲームプログラマのための」と書いてあります.実際,例として使われているものがゲームを作っていると見かけるようなものであったりするので,ゲームプログラマ,もしくはゲームプログラマを目指している学生の方が飲み込み易いかもしれませんが,その他のC++を使っていて初心者を抜け出したいプログラマにも是非是非読んでみて欲しい内容になっています.

C++の入門書を読み終えて,いくつか自分でプログラムを書いてみたら,この本の第1章「分かりやすいコードを書くためのテクニック」を読みながら,自分が書いたプログラムを読み返してみましょう.

第1章では,分かりにくいコード例から分かりやすいコードにするまで,何故こう変更するのか,ということを丁寧に説明しています.そして,ここが初心者にとってありがたいのではないか,と思ったのが,どういう場合に関数にすれば良いのか,どういう場合にクラスにすれば良いのか,といったコツを説明しているところです.

新人プログラマと話していて,どういう部分を関数にすれば良いか分からない,どういうものをクラスにすれば良いのか分からない,という言葉は良く聞きます.余裕があるときであれば,新人の書いたコードを見て,例を示したりするわけですが,今後は取り敢えずこの本を読め,と渡すだけで済みそうです.

この本を読んだ初心者ではないつもりの人は,途中でこう思うかもしれません.こんな風に書いてたら,ゲームだと処理が重くなって使えないのでは,と.そう思うタイミングで,実行速度の低下とかはちゃんと対策があるし,コンパイラを活用しよう,といった感じの話が入っていて,上手いなぁ,と感じました.

第2章の「シンプルな設計のための原則とパターン」からは,初心者だとちょっと難しいかもしれません.というのも,実際の問題にぶつかったことが無いか少ないため,こういう設計の方が良い,と言われても感覚が理解できないかもしれないからです.しかし,何かしらの仕事であったり課題であったりを終えた後に読み返してみれば,きっと色々と修正したいポイントが出てくることでしょう.

第3章の「ソースコードの品質計測」は,初心者どころか中級者でも全く知らない人もいるかと思います.理由としては,著者も挙げていますが,C++のコードの品質を計測するツールには商用の高価なものが多く,会社や学校で導入していないと触れる機会がなかなか無いからです.この本では,無償のツールが紹介されているので,自分で書いたコードを自分で計測してみることは可能です.

この本で紹介されているようなコードの品質の指標を利用することで,経験者の勘に頼ること無く,自分でコードの善し悪しに気付くことも可能になるため,是非とも導入したいところです.とりあえず,しばらくは時間がありそうなので,まずは自分の手元だけでも実践して,社内に布教していきたいですね.

この本は,初心者から中級者向け,となっていますが,新人に教える人のための教材としても使えると思うので,C++でプログラムを書く人は買って損は無いのでは,と思います.

2015年5月22日金曜日

透視投影におけるカメラのNearとFarと最終的なZの関係

通常,3Dグラフィックスでは奥行きのZが-1から1の範囲に変換されます.
ただし,0から1というような環境もあります.

この際に,透視投影カメラを使うと,Zの座標がNearからFarまで変化したとき(横軸),最終的なZの値(縦軸)との関係は,下の図のようになります.



見て分かるように,Nearに近いZ座標の変化は,最終的なZ座標の変化でも大きな差になっているのに対して,Farに近いZ座標の変化は,最終的なZ座標の変化では差が小さくなっています.

つまり,遠くのものほど,Zの違いが最終的なZの違いにならない,ということです.すると,モデルの前後関係が崩れてちらつきが発生するZファイティング,という現象が起こりやすくなります.

Zファイティングが起きる場合に,接しているモデルを少し離して起きないようにする,という対策も間違いではないですが,Nearを大きくして,表示したいもののZの差が最終的なZの差に反映されるようにするのも一つの手です.

2015年5月11日月曜日

明解WebGLを頂きました.

WebGL開発支援サイト wgld.orgWebGL総本山を運営する@h_doxas(杉本 雅広)さんがリックテレコムから「明解WebGL iOS/Androidも対応した3D CGプログラミングのWeb標準」を出版されました.

本を頂き,発売前に読む機会を得たので,感想を書きたいと思います.

明解WebGLは,「WebGLそのもの」について解説した入門書です.最近は,Unreal Engine 4やUnityもWebGLをサポートしており,WebGLを使ったコンテンツも増えてきており,WebGLへの注目も高まっています.しかし,意外なことに,何らかのライブラリを用いてWebGLを使った何かを作る方法を解説した本はいくつも出版されているものの,「WebGLそのもの」について解説した和書は2012年以来出版されていなかったのです.(確認漏れがあったらゴメンナサイ.)

ライブラリを使って面倒な部分を省略するのも悪くは無いのですが,それは基礎という土台があってこそです.基礎という土台が無ければ,何が省略されているのかも分からないので,何か困ったことがあったときに,思いつけることが限られてしまいます.

本書は,次のような方にお薦めです.
  • コンピュータグラフィックスに興味があるが,まだ触れたことが無い
  • 細かい解説を読むよりも,まずは手を動かして覚えたい
本書のあちこちに似たような表現が登場するのですが,本書では「まず動かしてみる」ということを重視しています.いきなり全てを理解する必要はない,まずは「できた」という感覚を大切にして欲しい,少しずつ学んで行けば良い,などなどです.

そのため,既にOpenGLなどを触ったことがある人には,少々物足りない内容に感じるかもしれません.

しかし,本書にはWebGLについて調べる場合のヒントや,実際に表示するモデルデータを入手する方法,WebGLでのデバッグ方法など,各種端末での実行やデバッグ方法など,入門書を読み終えた後に困りそうなポイントについても,さりげなくフォローされているため,OpenGLを触ったことがある人がさっとWebGLを覚えるのにも良いでしょう.

本書を読み終えた後は,WebGL開発支援サイト wgld.orgWebGL総本山を参照し,更に理解を深め,アイデアを磨いていくと良いでしょう.

個人的には,何か新しいことを覚える場合にはまず手を動かしてみることを重視しているので,この本は今からWebGLを学ぼうと考えている人にはお薦めです.

紙面の都合上,プログラムの全てが載っているわけではないので,どうしてもサンプルサイトを見ながら書き写すことになり,ついコピーして貼り付けしたくなるかもしれませんが,是非一度は自分でプログラムを打ち込んでみてください.実際に手を動かしてみると,色々とミスをするかもしれませんが,それを解決していくことも経験になると思います.

実際,自分も仕事ではOpenGL系のAPIを利用しているのですが,WebGLで色々と試して学んでいたことで,仕事で問題が起きたときの気付きへとつながったことが何度もありました.

今後WebGLはますます盛り上がっていくと思います.皆さんも本書を読んで,WebGLに触れてみませんか?

2015年5月6日水曜日

WebGLContextAttributesの切り替え

WebGLでは,canvasからgetContext()でWebGLRenderingContextを取得する際に,WebGLContextAttributesといういくつかの設定を渡すことができる.
var canvas = getElementById('canvas');
var options = { alpha : true };
var gl = canvas.getContext('webgl', options) || canvas.getContext('experimental-webgl', options);

この設定は,コンテキストの生成時にのみ利用され,それ以降は変更することができない.

実験的に色々切り替えてみたいときに不便だし,なんとかならないかなぁ,と思っていたけれど,生成時にしか設定できないなら,canvasを生成し直せば良いのでは,と思ったのでやってみた.

// アルファチャンネルのオンオフを設定するチェックボックスの要素を取得
var alpha = document.getElementById('alpha');

alpha.addEventListener('change', function(){
  // ノードを複製する
  var newCanvas = canvas.cloneNode(true);

  // WebGLContextAttributes設定用オブジェクトの生成
  var options = {};
  options.alpha = alpha.checked;

  // WebGLRenderingContextの差し替え
  gl = newCanvas.getContext('webgl', options) || newCanvas.getContext('experimental-webgl', options);

  // canvas要素の入れ替え
  canvas.parentNode.replaceChild(newCanvas, canvas);
  canvas = newCanvas;
}, false);

とりあえずいくつかのブラウザで試してみたが,上手く動いているみたい.

他に良い方法があれば知りたい.

以下サンプル.背景のクリアカラーを設定できて,アルファチャンネルの有無を切り替えられる.
















2015年2月21日土曜日

失敗から学ぶユーザインターフェースの読書感想

失敗から学ぶユーザインターフェース (出版社紹介ページへ)

色々な本を読んでいるが,基本的に自分にとっては有益でも他人にとってはどうか分からない本は紹介しないようにしている.しかし,この本はUIに関わる人であれば必ず読むべきだと思ったので紹介しておく.

この本をざっと読んで思ったのが,よくもこれだけ可笑しなユーザーインターフェースを集めたものだ,ということだ.この本に載っているユーザーインターフェースを見れば,おそらく多くの人は,「誰だっ,このユーザーインターフェースを設計したのは!」と言いたくなるだろう.(某料理漫画の人物を思う浮かべて欲しい).

しかし,この本を読まず,色々なユーザーインターフェースを考慮せず,自分で良いと思うユーザーインターフェースを考えてデザイン優先でユーザーインターフェースを作ると,こういうことが起こるのでは,と思うのも確かだった.

自分が良いユーザーインターフェース,良くないユーザーインターフェースについての講義を受けたのは10年も前になるが,未だにそういったものが世の中にあふれていることを考えると,未だに多くのユーザーインターフェースデザイナーは見た目でユーザーインターフェースを考えていて,ユーザーがどう受け止めるか,アフォーダンスを考慮できていないのではないか,と考えてしまう.

10年前に受けた講義以降,ときおり遭遇したユーザーインターフェースについての善し悪しを考えるのだけれど,未だにどう見ても押すデザインなのに引く必要があったり,引くか押すかのデザインに見えるのにスライドするドア,なんてものがあったりする.

ちなみに,自分の知っているユーザーインターフェースデザイナーはそういった点も考慮した上でのデザインを考えているので,皆がそうだとは思えない.

とにかく,ユーザーインターフェースデザイナーもユーザーインターフェースプログラマーも,是非,この本は読んでみてもらいたい.(とりあえず会社では紹介しておこうと思う).

最後に一言を言うとすれば,タイトルのユーザは情報系では常識なものの,この本を読むであろうユーザーインターフェイスデザイナ的にはユーザーの方が良かったのでは,と言っておきたい.

(。ではなく.を使うのは情報系の日本語論文はそうするものだ,と教えられた癖である).

2015年2月10日火曜日

PopcornFXのUE4デモを見るまで

先日行われたVFX技術者交流会に参加し,PopcornFXというエフェクトツールの名前が出て,気になったのでUE4デモを落としてみました.

その際の手順が英語でちょっと分かりにくいので,手順を紹介します.

  1. PopcornFXのUE4用サイトにアクセスします.
  2. 手順に従い,登録サイトで登録を行います.
    • ログインはユーザーIDのことです.アルファベットにしておくのが良いでしょう.
    • パスワードは適当に.ある程度長めが良いでしょう.
    • 苗字と名前は日本語でOK.
    • メールアドレスは,この後の手順でメールを送るので,その際に使用するアドレスと同じにしておいた方が良いでしょう.
  3. 登録が出来ると,管理者の承認待ち,と表示された画面に移ります.
  4. PopcornFXのUE4用サイトの手順2に従い,メールを送ります.メールアドレスは,スパム対策として@ が at,. (ドット) が dot と太字で書かれています.ここでメールアドレスを書いてしまうと台無しになるので,サイトの方を見てアドレスを確認してください.
    • メールの内容は,自分の名前とPopcornFXへの興味を少々,とのことです.とりあえず,1行興味があるんです,ということを英語で書いて送ったらOKだったので,英語は苦手,という方もGoogle翻訳を使うなどしてみましょう.
  5. しばらく待っていると,承認メールが届きます.
  6. ダウンロードページにアクセスし,必要なファイルをダウンロードします.なお,理由は分かりませんが,私がダウンロードした際は非常にダウンロード速度が遅かったので,しばらく放置するくらいの覚悟でいてください.
PopcornFX_UE4_demoというファイルをダウンロードすると,中にUnreal Engine 4のプロジェクトファイルが入っているので,起動するとデモを確認できます.
なお,7zipというフォーマットの圧縮データを解凍できる解凍ツールが必要になります.