WebGL w/ three.js

WebGLを勉強し始めている。
きっかけはWebGL Aquarium のデモに未来を感じたから。
ちなみにwikipediaさんによるとWebGLとはこんな技術らしい。


WebGL[1]（ウェブジーエル）は、ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。OpenGL 2.0もしくはOpenGL ES 2.0をサポートするプラットフォーム上で、特別なブラウザのプラグインなしで、ハードウェアでアクセラレートされた三次元グラフィックスを表示可能にする。技術的には、JavaScriptとネイティブのOpenGL ES 2.0のバインディングである。WebGLは非営利団体のKhronos Groupで管理されている。


今のところの印象では、JavascriptでOpenGLライクに3次元CGが手軽に試せるっていう感じ。
ラッパーライブラリである、three.jsを使うとマジで簡単にOpenGLの世界に入っていける。
# 細かい座標変換とかを学ぶには適していないけど、ざっくりわかった気になるためならthree.jsはおすすめ。

会社でこんな本を借りてソースコードざーっと眺めたらだいたいは理解出来ました。


でもでも、グラフィックスパイプラインとか座標変換周辺はまじでブラックボックスのままなので追加で違う本をよむひつようがありそう。。

コメント

コメントを投稿

このブログの人気の投稿

Callback関数を知らん人がまず理解すべきことのまとめ。

未だにへっぽこプログラマーの私が、「Callback関数なにそれ美味しいの？」状態から、 Callback関数、「それはとっかえひっかえされる関数だお(ｷﾘｯ」ってなるまでにとった行動のまとめ。 ちなみに私、C言語とPythonくらいしか喋れませんので、今回はC言語に特化した内容でお送りします。 ※Webから漁ってきた情報から手っ取り早くまとめたものなので間違いもあると思われます。間違った点はゴリゴリ指摘していただけるとマンモスウレピーです。 Callback関数とは？ ■プログラム中で、呼び出し先の関数の実行中に実行されるようにあらかじめ指定しておく関数( IT用語辞典 より引用) 初心者が読んでもわけわかめだと思います。いきなり定義が頭に入る奴なんていません。 これはまだマシな方で Wikipediaの解説 なんてクソイミフです。 アホだと自覚してる私は読む気さえ起きません。 完全理解は無理で、ある程度の理解水準に素早く到達して、 「とりあえず実装できる」状態になりましょう。 その後、徐々に理解を深めていく方が学習は早いです。 ここでは３段階で解説して、「とりあえず実装できる」状態になりましょう。 Callback関数を理解するためには、 １：ポインタの理解、２：関数ポインタの理解、３：callback関数のメリットと実装方法 を学ぶ必要があります。 １：ポインタとは？ C言語入門者を悩ませるポインタです。 まずは軽くポインタって何？ってところから。 ポインタ⇔指す人ってわけで、C言語の入門書では以下の様なコメントが書かれてます。 int *p;    // int型を変数を 指す ポインタ int data; // int型の変数 p = &data; // pはdataを 指す １行目： いつも「指す」って何やねんってなります。 私は、 ポインタはアドレスを格納する変数 だと思ってます。 だからpはアドレスを格納するための変数です。 指すとか意味分かんないからアドレスを格納するただの変数だと思うのです。 ２行目： int data;　って書いた瞬間に、メモリ上でプログラムが使える領域に対し
続きを読む

C言語でBluetoothスタックを叩きたい人のBluetooth開発入門その1

会社ではCでデバドラを書いてる私は、密かにBluetooth関連のお仕事をかっさらおうと画策中。 しかしながらスタックの知識、実装面等おぼつかない部分があるので、 スタンダードなことを勉強していこうと思い下記の本を会社の資料室で借りた。 めっちゃいい感じ。 PythonとかCでBluetoothスタックを叩いて実装の雰囲気を感じ取れる教科書。 入門じゃぁ！と思って意気込んでプロトコルとか読み漁るよりも、 はじめはざっくり雰囲気でよくわかんねぇけど実装は出来る状態に持っていく。 その上で深さ優先探索していってお勉強が完了するイメージですすめるほうが、 技術の習得においては手っ取り早い。 この教科書、Linux前提で話が進むので、 とりあえず私はWindowsをホストコンピュータとして、 Virtualbox上にUbuntu入れてお勉強進めます。 この本に載ってるソースコードでは、 しょっぱなから　#include <bluetooth/bluetooth.h>　やってるんですけど、 usr/include　以下を調べてもヘッダ無いんですよねこれが。 何かインストールしなきゃいけないんだろーと思って調べたところ、 bluezなるものをインストールする必要があるとのことでした。 アプリを実装するためにはヘッダ、バイナリが必要なので、 具体的にはコマンドを実行してヘッダを落としてきましょう。 $ sudo apt-get install libbluetooth-dev # bluezの開発環境をインストール！ あとは ここ のサイトを参考にしてsimplescan.c を書いちゃって、 $ gcc -o simplescan simplescan.c -lbluetooth # bluetoothライブラリをリンクしてコンパイル！ はい、実行できた。 きょうはここまで。
続きを読む

C++プログラミング入門(1) // 倉庫番プログラムの実装

イメージ
うまく修論が通れば大学院を卒業して，晴れて社会人になる． 入社試験でC++のプログラミングを課されるくらいなので，きっと仕事でC++を使うんだろう． そこで，軽く文法等を覚えるために入社前に勉強することにした． 【現状】 研究ではもっぱら数値計算用ソフト(MATLAB)のみを使っており，メモリ等を意識してプログラムを組むことは無い． 変数の宣言やメモリの確保のような行儀の良いプログラムを書くのは３年前くらいにCでかじった程度． 純粋に文法を勉強するのもあほらしいので， ゲームプログラマになる前に覚えておきたい技術 っていう分厚い本を買って読むことにした． 第一章ではいわゆる倉庫番のプログラムのお勉強． 読みすすめていくと，プログラムから醸しだされる著者の優秀さを感じ取った． 優秀なプログラマの書くプログラムは読んでて感動する． 本を読んでみて重要だと思った点をコメントアウトで追記しつつプログラムを組んだ． 以下はコンソール上で倉庫番を楽しむプログラム． コピペしてコンパイルすれば動くはず． #include<iostream> using namespace std; // ステージのオブジェクトの定義 // 列挙型に出来るときはなるべく使う． // 利点は２つ．変な値が入らない＋デバッグの際に列挙型の名前で確認できる． // 区別のために要素は大文字． enum Obj{ // 列挙型は単なるint型 SPACE, // 0 WALL, // 1 GOAL, MAN, MAN_ON_GOAL, BLOCK, BLOCK_ON_GOAL, UNKNOWN, }; // ステージ // グローバル変数はどこからも見えるので接頭辞をつけて区別する． // いじらない変数にはconstをつける． // キャメル記法推奨． // 文字列定数の途中で改行する場合は文末に\が必要． const char gStage[] = "\ ##########\n\ #    p   #\n\ #  .o  0 #\n\ #        #\n\ ##########"; // 幅と高さ const int gHeight = 5,gWidth = 10; void initia
続きを読む