コピペで慣れる生WebGL#00はじめに
私はWebGLを専門とするプログラマーで、2016年12月からアムステルダムにあるSuperhero Cheesecakeという制作会社で働いています。
もともとWebGLを使うフロントエンドデベロッパーとして仕事していましたが、WebGL面白いなということで現在の仕事に転職しました。
企業サイト、企業のプロモーションサイトの一部、ゲームなどのためにWebGLのプログラムを作ります。
会社で最近関わったプロジェクト
フリーランスとして最近関わったプロジェクト
three.jsやpixi.jsといったWebGLライブラリを使用していたのですが、フロントエンドの方から”ファイルサイズ大きいから、ライブラリを使用しないでほしい”とか言われたり、ライブラリが巨大すぎて最終局面での最適化が面倒、100％自信を持って最適化されたと言えない状況がありました。
three.jsは非常に優れていますが、BufferGerometryとShaderMaterialをいくら書いてもWebGLを理解しているとは言えなかったです。mozillaの出しているWebGLの最適化についての記事もthree.jsしか触ったことないと、理解してるとは言い難い状況でした。
ゼロからわかるために自分でWebGLフレームワーク作ったほうがいいのかなと思っていました。
そんな時、フランスのmakemepulseという会社がnanoglという最小限の機能だけのフレームワークを自分で作って、使用しているという記事を読みました。
現在、nanoglに対抗してtubuglという自分仕様のフレームワークを作成し、個人制作以外に仕事でも使ってます。Github上にコードはアップしているので、興味のある方はご覧ください。
自分でフレームワーク作成する中で、最初はよく分からないエラーと悪戦苦闘しながら、難しいと言われるWebGL APIの理解がかなり深まりました。
わからなくなったら、three.jsのレンダリング部分や他のWebGLライブラリを読み、参考にしました。
シェーダーを書かないで、簡単にWebGLが作成できるというthree.jsのライブラリの設計はやはり感心するものがありますし、勉強になる部分しかないです。
試行錯誤した結果、WebGL APIは『慣れ』だということがわかりました。
慣れたら難しいと感じなくなりました。
エラーが出ても怖くなくなりました。
習いながら慣れるのが一番いいと思っています。
習うだけだと慣れる前に忘れますし、慣れるだけだと最適化やエラーなど個別の問題に柔軟に対応するのは難しいです。
WebGL APIを解説した記事・書籍は『WebGLとは何か』から始まり、2D、3D描画という風に徐々にステップアップしてしていく形が多いように思います。
( 入門の記事・書籍は非常に重要です。私はWebGL FundamentalsとWebGL Programming Guideなどを使用し、WebGLや3Dグラフィックプログラミングを学習してきました。もしもライブラリを使わずゼロからきちんと学びたい方はそちらを読み込むことをオススメします。)
何度かWebGL APIを仕事の中でやろうと思った時、理解の足りなさや謎のエラー、手っ取り早く使えるサンプル・デモが少ないなもあり、締切もせまり、、結局ライブラリを使うい、慣れる前にWebGL APIを忘れることががありました。
three.jsのように手っ取り早く使えるサンプル・デモが十分にあればいいのにと思っていました。
WebGL APIで書けるようになってきて、仕事でよく使えそうなネタが何個かあるので、noteにちょっとずつコピペで慣れる生WebGLというシリーズでアップしていこうと思いました。
5週間ぐらいに渡り1週間に1つの記事をアップしていく予定です。
仕事で使えそうなサンプルをWebGL API(以降、生WebGLとします。英語だとRaw WebGLとかVanilla WebGLとか言ったりする人がいます。）で作成し、簡単な解説を行います。解説と言っても、バッファーとは何かやベクトル・行列を詳しく解説はしません。
生WebGLは触ったことあるし、多少理解している人向けです。こういうの作りたいときにライブラリ使えばわかるけど、生WebGLだとエラーが出てわからないという方のお役に立てればと思います。
使えそうなサンプルをアップしていくので、それを利用し生WebGLに慣れてもらえればと思います。
サンプルはthree.jsと生WebGLのコードを両方作成する予定ですので、比較することで生WebGLの理解が深まればと思います。
よく理解できなくても、写経して、慣れてもらったらと思います。コピペで仕事などに使っていただいても一切気にしないので、使用してください。
平日フルタイムで仕事していますが、週末や平日夜を利用しフリーとしても活動しています。
フリーとしてWebGLの仕事などをやっていますので、興味ありましたらk.saito.1985@gmail.comにメールかhttps://twitter.com/kenji_specialにDMしていただけると気軽に相談にのりますのでご連絡ください。よろしくお願いいたします。
この記事が気に入ったらサポートをしてみませんか？