WebGL製の簡易ミニゲームを作ったので公開するなどその他近況
こんばんは。
WebGL 開発者フォーラムで、WebGL 製のゲーム投稿イベントを開催していたのですが、私自身も微妙に間に合わないという体たらくで、結局ほとんど作品も集まらず……という感じで今回は非常に残念な結果になってしまいました。
突発参加で作品を寄せてくれた @nyamadan さん、本当にありがとうございました。投稿作品ゼロという悲劇だけは回避できました (^o^)
作品は以下の URL からご覧いただけます。マインスイーパー風のゲームですね。
https://dl.dropboxusercontent.com/u/27815754/webgl-minesearch/index.html
自分の作品も少し遅くなりましたが、せっかく動くようにはなったので公開しておこうと思います。
当初、もっと壮大なスケールでゲームを完成させることを目論んでいたので、メッセージを表示するためのウィンドウ制御、ゲーム内の UI を汎用的に表示するロジックなど、いろいろなものが中途半端に実装されていながら、しかも使われていないという非常に中途半端な仕上がり……笑
今回は約 2 か月あまりの製作期間があったにもかかわらず、こんな程度のものしか仕上がらなかった。やはり、いろいろ同時進行でやるにはそれなりの期間が必要なのだとあらためて実感させられました。
今から年末に向けて、なにか早めに動き出せたらいいなと思ったのでした。
さて、近いところでは Tokyo WebGL Meetup が間もなくというところに迫っています。6 月 13 日 (金) 開催予定のミートアップでは、個人的憧れのエンジニアさんたちがたくさん参加してくれるみたいで、非常に楽しみです。
どうも最近はプライベートが非常にばたついていまして、ろくにプログラミングをする時間もなくて困っています。
なんとか、あと数カ月で持ち直したいと思っています。がんばろう。
Kindle 本出版への長い道のり
先日、Amazon で Kindle 本を出版しようと思い立ち、米国内国歳入局（IRS）に EIN というやつを取得するために FAX を送った。
ネットの情報をいろいろ漁った感じだと 4 日ほどかかるという話だったけど、6 日経ってやっと返信が来た。朝 4 時にね……
さっそく、Amazon のサイトに行って残りの手続きをノリで済ませんたんだけど、これも話によれば 10 日ほどかかるものらしい。
出版したいというだけでこれほど面倒というのは困ったものだなあ。
正確には、出版自体というよりは税金のからみでこのような手続きをすることが「推奨される」ということだ。これをやっていないと米国でも源泉徴収税を取られてしまうらしいから、ちゃんと手続きしておくにこしたことはない。
これで、Amazon 側で問題がなければ、本来いただける正しいロイヤリティで Kindle 本が出版できるはず。
このボロ XP を早く買い替えたい……
いったいいつになるんだろう……
WebGL 関連では、5 月中にひとつゲームを仕上げないといけないというミッションに取り掛かっていて、少しの間、これをメインでプライベートな時間を使うことになる。
幸い、6 月に予定されている WebGL Meetup Tokyo の資料はほとんど出来上がっている。あとは細かい部分を煮詰めるだけだ。
wgld.org の更新が若干スローペースになるかもしれないけれど、ゲームなどの人の目を引くコンテンツを作ることも WebGL の普及の助けとなるはず。バランスよく、ゲームやテキストの執筆とを両立していきたい。
Kindle 本の原稿は、気持ちに余裕のあるときに少しずつ書きためていく。
いざ手続きが通ったとなったら、一日でも早く出版できるようにしたい。
いや、ほんとに、冗談抜きで経済的に苦しい。このままでは、この XP が仮に本当にお亡くなりになってしまったとき、開発どころかテキストの執筆もできなくなってしまう。
がんばらないと。
WebGL と GLSL と ray marching 。そして Kindle 本の話。
おうち PC がたびたび恐怖のブルースクリーンをかましてくるので不安でしょうがない今日この頃。
wgld.org の GLSL 部門を開設してからちょくちょくと更新を重ね、マンデルブロ集合も解説したので、次はジュリア集合を GLSL のみでレンダリングするというところまでは最低でもテキストを書く。
wgld.org のテキストに関しては、ここでひとつ GLSL 部門は区切りとして、再度 WebGL 部門の記事を少し拡充したい。
具体的には、WebGL の拡張機能のひとつである instanced array を用いた処理について。
なんとびっくりなことに、おうち PC は一昔前の XP なのだが、ハード的にこのインスタンス描画ができないっぽいという驚愕の事実。
おぅ……神よ。
とりあえずサンプル作って会社の PC で動かしたら動いたから、たぶん行ける。
でも動作しない環境でテキスト書くのってどうなのそれ。
誰か、パソコン買ってください。
wgld.org のテキストは、そんな感じでまだまだ解説したいネタはいろいろとあり、問題は書く時間を捻出することだけ。気合いでなんとかしよう。うん。
並行して、６月に向けてゲームの開発も進めていかないといけない。
このブログの前回の記事で「ローポリな感じの」という表現をしたけど、要は景観についてはマインクラフトのようにボックスモデルを使おうと考えている。
真面目に景色をモデリングしてた(約2万頂点くらいの)んだけど、どうしても最終的なレンダリング結果がミスマッチな感じになってしまっていっそのことボクセル化してしまえというやっつけである。
見た目はともかく、ちょっとくらい遊べる仕様にしたいのと、なにより問題なのは開発環境なのである。
ちょっと重い処理をかませると、おうち PC は死亡するのである。家で勘でプログラムを書いて会社でデバッグとか酷過ぎるだろ。
誰か、パソコン買ってください。
あまりにも貧弱なハード。
そしてそのハードが時折危篤になるというこの状況。
真面目にこれは買い替えなくちゃならんと思いつつもどこからも金が出てこないので、いっそのこと Amazon で Kindle 本を自分で出版してやる！ と意気込んでいたりもするんだけど、じゃあその中身はいつ書くんだという問題が付きまとう。
なんか税金関係もめんどくさそうで、結局手つかずなままだ……。
そもそも、誰か買ってくれるのか？
個人的には wgld.org が十分に書籍並の内容になっているはず！ と自分では思っているので、Kindle 本を出すにしてもプラスアルファつけないと購入者に対して申し訳ない。どうせ書くなら、ある程度しっかり時間を取っていい内容にしたい。
WebGL に関わることに対する情熱だけでは、どうしても乗り越えられない局面がどうも多い気がする。
なんだか悶々とする毎日である。
とりあえず、誰かパソコン買ってください。（しつこいわｗｗｗ）
GLSL をつかって楽しくシェーダプログラミング
掲題のとおり、最近は GLSL を使ってシェーダプログラミングばかりしているけど、実に楽しい。
さらに、wgld.org に GLSL カテゴリを追加して、少しずつテキストを書いている。
並行して、６月に開催予定の WebGL Meetup Tokyo で使用する予定のスライドも作っている。
悩ましいのは、wgld.org で先にスライドの内容と重複する部分まで書くべきかというところ。個人的には、先に書いておくのもいいのかなとも思うんだけども、どうなんだろうか。
参加してくれる人の気持ちを考えると、先公開も後公開も、いずれもメリットはあると思う。先に公開されていれば、その分予備知識を持ってミートアップに参加できるけど、新しいロジックは出てこない。後から公開するとミートアップに参加してくれた人が先行して新しいロジックを知ることができる一方、いざやってみようと思っても資料がなければ頓挫する場面も出てくるだろう。
ミートアップと同時にテキストを公開する手もあるが……これはもう少し、考えてみよう。
進捗どうですか状態なのは、ゲーム開発。
実は、こっちのほうが期限が決まっているだけに早めに固めておかないといけない部分だったりする。
今考えているのは、一見ローポリな感じの雰囲気のゲーム。
いっそのこと、モデルを出力する自前のプログラムを書いたほうがいいような気がしてる。そこからやって間に合うのか？ という気もするが。
悩んでいても仕方がないし、ツールを作ってから、その自作ツールでモデルデータを JSON にして出力。実際に WebGL を使ってレンダリングするということで進めようと思う。
６月以降は、いわゆるデモシーンの作成に挑戦してみたい。
レイトレーシングやレイマーチングを用いて、WebGL でどこまでハイレベルなデモシーンを生成することができるのか。
おそらく一番のネックは、描画速度云々も勿論そうなんだけども、音楽との同期だと考えてる。処理落ちするようなスペックで、どうやって javascript で再生されている音楽と描画結果を同期すればいいんだ？ これはいろいろ考える必要がありそうなので、いざそのときになったらじっくりと取り組んでいきたい。
WebGL だけで飯を食っていけるところはないかなあ。
wgld.org に GLSL 部門を新設しました
しばらく前からやりたかった GLSL 部門の新設。
やっと、最初のテキストを投下することができた。ひとまず、よかった。
今回のサンプルはただグラデーションが掛かっただけの矩形が表示されるのみ。めちゃくちゃ地味だけど、枠組みはほとんど全て含まれている。これをベースにして、あとは GLSL で、しかもフラグメントシェーダのみを書いていくだけ。これは簡単だ。
最低でも、ジュリア集合をレンダリングするところまでは一気にテキストを書いていきたい。
従来の wgld.org のテキストに比較して、フラグメントシェーダの解説のみを行うこの部門では、絶対的に文字数は少なくできるような……気がする。
できるだけサクサクと更新できるように努めたい。
同時に、自分自身が理解している部分の拡張をしていかないと、あっという間にネタがなくなりそうな気もするので良くも悪くも気が抜けない感じだ。
一方で、WebGL 製のゲームを作るという話がまるで進んでいない。
先日まで作っていた城のモデルデータも、ちょっと今回は使えないかなって思い始めた。
イメージしているゲームの雰囲気に、なんとなく合わないんじゃないかなって思ってしまったことに起因するのだけども、いずれにしてもモデリングの難しさを実感する日々。いろいろと、スキルが足りない。
大切なのは、頂点数を増やして精巧に精密にモデルを設計することじゃない。
頂点数、適用する質感、テクスチャやレンダリングする際に適用する様々なエフェクト。いろんなものが混ざり合って、スクリーンに世界が描かれる。
自分がイメージしたものに、どれだけ近い統一感で世界を作り出すことができるか――
もう少し時間をかけながら、６月までに形にしていこう。
同じく６月と言えば、WebGL Meetup もある。
発表する内容のテキストも書かないとなあ。
やることがいっぱいあるよ。
いいことだな。
今後の wgld.org の方向性
先週と今週とで、久しぶりに WebGL 関連のテキストを wgld.org に追加できた。
今回は拡張機能に関するテキストを連投したのだけれど、なんというか調べてみたりするなかではやっぱり英語ちゃんと理解できないのはつらい。半分ノリで理解しつつ、とりあえずやってみてから問題点や注意点をさらにググりつつ探すという感じ。
WebGL に関する情報はほとんどなくても、似たような技術を用いた情報、OpenGL や DirectX による実装なんかは結構豊富に見つかる。要は、探究心と忍耐力さえあれば WebGL に限らずなんとかなる気がする。
wgld.org については、そろそろ GLSL のみでシーンをレンダリングしていく、いわゆるデモシーンやレイトレーシング的な分野のテキストを書いていきたい。上の画像は、GLSL だけでジュリア集合をモノクロでレンダリングしたものだ。こういうことができるのは非常に楽しい。
この分野については自分自身の理解がぜんぜんまだまだなんだけども、アウトプットすることがさらなる理解につながることは多分にあるわけで、勉強しながらテキストを書いていこうと思う。ぶっちゃけた話、WebGL だって最初からそうだった。
なんとか動くようになる。
そしてテキストを書く。
ずっと繰り返してきた。これからも、それは変わらない。
思い返してみると、wgld.org にテキストを 10 本くらい書いたときでさえ、自前で法線を算出する方法とかわかってなかったし、「単位球だから法線は位置情報がそのまま使える」とかの意味もわかってなかった（爆）
我ながら、よくここまでこれたなと思うわ。
それとはまた別の話で、6 月には Tokyo WebGL Meetup が予定されている。
yomotsu さんがいろいろと動いてくれていて、この手のイベントに参加したことのない私は頼りっぱなしである。本当にありがたい。しかも聞く側じゃなくて話す側っていうのがハードル高い。でも楽しみ。
このイベントでは、やっぱり GLSL を使ったシーンのレンダリングについて話ができたらと思ってる。少しでも興味を持ってもらえるように、wgld.org のテキスト執筆もがんばらなくては。
会場では Twitter や Web 上でのやりとりしかしたことのない人たちに会えると思うし、それも楽しみだ。ずっと独学でプログラミングをやってきて、サンデープログラマよろしく先生らしい先生もおらずここまできた。ここらでいっちょ、気軽に質問できるような人ほしい。
さらにミートアップに先立つこと一か月。
5 月には、WebGL 開発者フォーラムのイベント第二弾として、ゲーム投稿イベントを行う予定だ。これは完全に自分が主導な感じだし、せっかくだからちゃんとゲームを出品できるようにしようと思う。
前回のバレンタインデー企画のときよりも、フォーラムに登録してくれている人も増えている。作品、たくさん集まるといいな。
出来の良し悪しじゃなくて、みんなでやったっていう事実が楽しいじゃない。
これ読んでる人で興味が湧いた方。ぜひ、気軽に参加してほしい。まだ投稿期限まで一か月以上あるし！
しかし、こうして自分で書き出してみると、やることがてんこ盛り盛りですごいなあ。
正確には、やりたいことがいっぱいあるだけで、やるかどうかは自分次第だと思う。Unity ですごく WebGL 界隈が盛り上がっているし、スクラッチでコードを書くストイックさで、乗り遅れないようにがんばろう（笑）
wgld.org をとりあえず外見だけリニューアル完了
かねてよりやりたかった wgld.org のリニューアルを敢行。
白地ベースだったデザインを黒地ベースに変更。
実際には、サーバーサイドの処理を書いて今までは javascript で生成していたサイドバーのリンク一覧などを静的に吐き出すようにした。ここが一番修正したかった部分だったので、デザイン変更は実はついでだったりする。
wgld.org に関しては、まずこのリニューアルが個人的に最優先事項だった。
先述のとおりサーバーサイドな処理を追加したかった都合上、ソースが全体的に手入れされる予定だったため新しいテキストを書くことにためらいがあったんですよね。
リニューアルが無事に済んだことで、いよいよテキストを書いていくことができる。同時に、過去のテキストに関しても修正を行いたい欲求がある。これは単に、当時の自分が理解半分に適当に書いた（と今となっては思える）ものが散見されるから。
新しくテキストを書いていくうえでも、やりたいことが複数あって取捨選択に困ってしまう。
ひとつは、WebGL の拡張機能のうちのいくつかを解説するテキスト群。二つ目は、GLSL を用いたフラグメントシェーダベースのデモ作成入門テキスト。三つ目は、二つ目とかぶる部分もあるがレイトレーシングやレイマーチングに関するテキスト群。
実は、こういった書きたいテキストが多岐に渡るというシーンは以前から wgld.org にはあった。というより、自分の場合はそういう風になることが実は多かったり。
というのは、まず自分が仕組みや理論をしっかり理解して、それを拡張したり自在に修正したりすることができるようになってからテキストを書く、というサイクルでサイトを更新するようにしているから。
テキストを書こうと思った時には、おおよそ自分は入門者という枠組みをやっと出ることができたかな……と感じられる程度にはなっていなくてはいけない。そうでなくては、入門者が理解しやすいような柔らかい文章が書けない気がする。
同時に、自分が理解に苦しんだものや、使いこなすのに時間がかかったものが多ければ多いほど、新しくそれにチャレンジしようとする人の助けになる文章が書けるんだと思う。
従来の wgld.org のテキストのように、単純に WebGL に関するテキストを引き続き拡充しつつ、GLSL 関連の新しい分野の情報を取り入れていきたい。そのためには、もう少し自分自身の理解が深まっていないといけないように思う。
特にレイトレの分野はいまひとつわからない。数学をちゃんとやっておけばよかったと思うことがほんとに多い。ま、だから今遅ればせながら勉強しているわけなんですけども。
レイマーチングでは、上の画像のようにトーラスをねじったりすることもできる。この分野に触れる前には思いもよらなかったような方法で、トーラスを表示したりライティングしたり、あるいはこうして変形させて表示させたりできるのだから本当にすごい。この感動を早く多くの人に味わってもらいたいと思う。
さしあたって、フラグメントシェーダのみでノイズの生成と、そのノイズを使った地形のレンダリングができるようになることを当面の目標としていた。これに関しては達成できたので、基本的なレイマーチングの部分はもうテキストを書いてもいいかなと思ってる。
時間がいっぱいあれば、書けると思うんだけどな。
焦らず、がんばろう。
