斎藤 健二

WebGL を書く仕事をしています。 http://archive.kenji-special.info 趣味でBlender、Unity/UE4、Deep Learningを勉強したり、スト5やDBFZといった格ゲーをしたり、観たりするのが好きです。

WebGLフレームワークを作る Part2 作ってみる

フレームワークを作るプロセス

フレームワーク作成は基本的に以下のプロセスを繰り返しました。

1. 勉強する。わかったかもという自信。

2. 勉強したことを実践するため、サンプル作成。

3. サンプル作成中のWeGL側のエラー、もしくはエラーがなくても真っ白の画面しか出てこず、どこから着手すればいいのか。心折れそうになる。

4. 勉強資料を読み返す、ひたすらググる、自分の作成しているものに

もっとみる

WebGLフレームワークを作る Part1 なぜ作るのか

はじめに

WebGLに関して「コピべで慣れる生WebGL」という記事を1年近く前に書きました。

three.jsの次のステップとしてまずはWebGL APIを直接使ってWebGLをレンダリングしていくきっかけになればと思い、作成しました。

未だにちょくちょく読まれているようで、嬉しい限りです。

私が仕事でも個人制作でも使っているWebGLフレームワークについて説明したいと思います。

現在

もっとみる

Google Earth Studio + After Effectsで動画作成

Google Earth StudioとAfter Effectsを使って動画作成をしていきます。

今回は簡単なサンプルとして、有名な建物の近くに文字を配置してみました。

Google Earth Studioでアニメーションを作成、書き出しするだけでなく、書き出したアニメーションをAfter Effectsに読み込み、アニメーション上に文字や図形を配置することが出来ます。

1. 動画を作成

もっとみる

360°背景(立体vs球体) WebGLパフォーマンス

デモ:  https://kenjispecial.github.io/webgl-performance-note/note00/

行ったこと

背景として360度の画像を使う場合、立方体にキューブマップテクスチャーを貼り付けるものと球体に2Dテクスチャーを貼り付けるものとを比較しました。

素材

フリー素材を使用しています。ハイクオリティのHDRIをダウンロードできます。

フルHDのスク

もっとみる

RustでシンプルOpenGLアプリ作成

はじめに

WebGLでcubemapテクスチャーを使用する際にcubemapテクスチャーを立方体の見取り図のまま(下画像の左部分)として使用できず、テクチャーを6枚にスライス(下画像の右部分)して使用しないといけません。(しなくてもできるのかなと思いつつ。それぽいデモやwebglのapiもなかったので断念)

Lysというソフトウェアを使ってHDRからcubemapのテクチャーの書き出しをします

もっとみる