emadurandal / glboost Goto Github PK

やはり、Safariをサポートしたいですね。
VAO拡張をサポートしていないくらいでサポート切るのはよく考えるとひどい話なので。

VAOなど、現状のサファリがサポートしていない機能は使わないように実装を変更します。

「消しゴム」のように、６面が異なる画像のモデルを作成したい。
下記は参考情報です。

[簡易版] WebGL で消しゴムを表示させてみるテスト
http://jsdo.it/cx20/48E8

シャドウマッピングの実装です。
いわゆるNVIDIA SHADOWを有効にするためにはどのような条件が必要なのかの調査・実験も必要になってくると思います。

対象オブジェクトをワイヤフレーム表示できる機能が欲しい。
一応、現状でも、primitiveType を変更することで、疑似的にワイヤフレーム表示だが、ライブラリ標準機能として欲しい。
下記は疑似的にワイヤフレーム表示を行った例。

var geometry = new GLBoost.Sphere(10, 12, 12);
geometry._primitiveType = GLBoost.LINE_STRIP;

以下のサンプルが、Safari (OSX / iPhone) だと表示されない。

[WebGL] GLBoost + glTF Loader を試してみるテスト（その１）
http://jsdo.it/cx20/G5nJ

glTF-Embedded （Data URI Scheme ）のものがダメな感じがするが、Babylon.js だとSafari でも表示可能。

[WebGL] Babylon.js + glTFFileLoader を試してみるテスト
http://jsdo.it/cx20/yptM

以下は参考情報です。

＜確認した環境（GLBoostによる表示結果）＞
[OK] Windows 10 + Chrome 48.0.2564.109 m
[OK] Windows 10 + Firefox 44.0.2
[OK] Windows 10 + Microsoft Edge 25.10586.0.0(EdgeHTML 13.10586)
[OK] Windows 10 + 11.103.10586.0
[NG] Mac OSX 10.10.5 + Safari 601.2.7
[OK] Mac OSX 10.10.5 + Firefox 38.0
[OK] Mac OSX 10.10.5 + Chrome 47.0
[NG] iPhone 9.2.1 + Safari 601.1

＜使用したモデルデータ＞

■ glTF/sampleModels/box/glTF-Embedded/
https://github.com/KhronosGroup/glTF/tree/master/sampleModels/box/glTF-Embedded

Let's create GLBoost Official Logo!

ロゴを作りたいです。

かっこよくて、それでいてギーク向け（カスタマイズ性高い）ようなことがわかる感じがいいですかねー。

そもそもどうやって作ったらいいですかねw　プロに頼むのがいいんでしょうかやはりw

three.js/examples/js/controls/
https://github.com/mrdoob/three.js/tree/master/examples/js/controls

• DeviceOrientationControls.js
• DragControls.js
• EditorControls.js
• FirstPersonControls.js
• FlyControls.js
• MouseControls.js
• OrbitControls.js
• OrthographicTrackballControls.js
• PointerLockControls.js
• TrackballControls.js
• TransformControls.js
• VRControls.js

影の表現が出来るようにして欲しい。

glboost

three.js

Mesh 表示時に、Bounding Box と XYZ の矢印を出す機能があると便利だと思いました。

tmlib は古いライブラリである為、
for_tmlib のサンプルを for_phina に移植し for_tmlib は、削除する方針とする。

おそらく今のパフォーマンスボトルネックの一番の要因だと思われます。

動的にシェーダを変更する機能。
経過時間に応じて、SimpleShader → HalfLambertShader → PhongShader のようにシェーダを変更するようなサンプルを実現する。

ちょうど、Three.jsのような形になります。

現在の欠点として、同じ形状のもの「Cubeとか」を大量に生成すると、データ的に無駄が発生しますね。VBO作られまくり。
そういう場合は、共通の単一Geometryを複数の新Meshクラスで持たせればいいと思ってます。

現在、法線のマージ処理を省いてしまっています。
ちゃんと実装しないと・・・。

現在、clearColor の指定だけ、色の指定方法が異なっている。
他と同様に、Vector 形式で指定できても良いのでは？

var renderer = new GLBoost.Renderer({
    canvas: canvas,
    clearColor: {red: 0.0, green: 0.0, blue: 0.0, alpha: 1}
});

var renderer = new GLBoost.Renderer({
    canvas: canvas,
    clearColor: new GLBoost.Vector4(0.0, 0.0, 0.0, 1.0)
});

また、色の指定方法として、別の書き方も出来ると便利そう。

new GLBoost.Cube(..., new GLBoost.Vector3(1,0,0));
new GLBoost.Cube(..., {red: 0.0, green: 0.0, blue: 0.0});
new GLBoost.Cube(..., "#000000");
new GLBoost.Cube(..., 0x000000);
new GLBoost.Cube(..., [0.0, 0.0, 0.0]);

ユーザー定義の頂点属性を使ったカスタムシェーダーのサンプルを追加したいと思います。

円柱ジオメトリがあると、色々応用できそうです。

• 円柱型のお菓子
• ピラミッド
• 飛行石
• 六角形の箱

Plane（平面）クラスを拡張します。

メッシュの細かさ（分割数）も指定できるようにします。

例えば、以下のコード部分とかです。

毎回設定しているので、そりゃ遅いです。是非ともdirtyフラグとか使って、頻度下げたいですね。

以下のことについて改善します。

• 多くのクラスで、そもそものcanvasの指定の必要性をなくす

gl関数系の処理のタイミングをどうするか、という実装方針にも関わってくる問題ですね。

ObjLoaderクラスで四角形を含むobjファイルにも対応する。

他のElementを子にできる、Groupというクラスを新設します。

Cube のデータ配列を標準的な仕様に合わせてほしい。

• GLBoost の Cube のデータ配列と他のライブラリのデータ配列を比較したところ並び順が異なっていた。
• その為、UV 座標データ（texcoord）などを他のサンプルから移植しようとした場合に、想定外のマッピングがされてしまう。
• 標準的な仕様があれば、そちらに合わせてほしい。

＜GLBoost の例＞

■ glboost.js
https://github.com/emadurandal/GLBoost/blob/master/src/js/primitives/Cube.js

// Top    : v0-v1-v2-v3
// Bottom : v4-v5-v6-v7
// Front  : v7-v6-v2-v3
// Back   : v4-v5-v1-v0
// Right  : v5-v6-v2-v1
// Left   : v4-v7-v3-v0
// 
//         [0]------[1]
//        / |      / |
//      [3]------[2] |
//       |  |     |  |
//       | [4]----|-[5]
//       |/       |/
//      [7]------[6]
//

＜Mozilla の「WebGL チュートリアル」や「WebGL Lesson」の例＞

■ WebGLチュートリアル
https://developer.mozilla.org/ja/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL

■ WebGL Lesson
https://sites.google.com/site/hackthewebgl/learning-webglhon-yaku/the-lessons/lesson-4

■ glCubic.js
https://github.com/doxas/glcubic.js/blob/master/src/gl3Mesh.js

// Front  : v0-v1-v2-v3
// Back   : v4-v5-v6-v7
// Top    : v2-v3-v7-v6
// Bottom : v0-v1-v5-v4
// Right  : v1-v2-v6-v5
// Left   : v0-v3-v7-v4
// 
//         [7]------[6]
//        / |      / |
//      [3]------[2] |
//       |  |     |  |
//       | [4]----|-[5]
//       |/       |/
//      [0]------[1]
//

パーティクルの高速描画を行うためのMesh系クラス「Particle」クラスを作ろうと思います。

• ジオメトリインスタンシング対応
• GPUによる座標更新対応
• GPU実行の衝突判定（WebGL2.0限定）

箱を半透明にしたいが、ボールが隠れて見えなくなっている。

GLBoost + Oimo.js で箱にボールを入れてみるテスト（改）
http://jsdo.it/cx20/AndF

glboost

three.js

JavaScript実行Webサービスの中には、jsdo.it など、ファイルのアップロードに対応しているものがあります。
しかし、例えばjsdo.itの場合だと、アップロードしたファイルのファイル名はハッシュ化を経て、ユーザーが予測がつかないものになります。

これは、objファイルをロードするにあたって問題になります。objファイルは同名のmtlファイルを参照したり、mtlファイルがさらに各種テクスチャ画像ファイルを参照したりしているからです。

そこで、jsdo.itなどのサイトでもobjファイルを読み込めるように、ObjLoaderクラスを以下のように改修したいと思います。

• ObjLoaderクラスのloadObjメソッドに、新たな引数として、mtl文字列を追加。
• mtl文字列とは、mtlファイルの内容に相当するJavaScript文字列。
  （ユーザーは、本来のmtlファイルが参照しているテクスチャ画像ファイルをjsdo.itにアップロードする。そうして得られたハッシュ化済みのテクスチャ画像URLを新しいmtlファイルの内容として記載し、その新しいmtlファイルの内容をJavaScript文字列としてObjLoaderクラスのloadObjメソッドに渡せば良い）

今までなんとなくカメラ座標系でやってんたんですが、やっぱり無駄が多くてメリット少ないですね。
いっそもうローカル座標系でやってしまおうと思います。
ライトベクトルとかをCPU側で一度ローカル座標系にしてしまえば、もう頂点シェーダで行列変換しなくて良くなりますからね。行列関連のUniform変数の設定の必要もなくなります。メリットばかりな気がする。
（もちろん、バンプマッピングをするときは頂点座標系である必要があるので、その時は頂点シェーダで行列変換する必要がありますが）

現在、GLBoostをGoogleのWebGL Inspectorエクステンションを使って調べようとすると、エラーが起きます。
WebGLの拡張命令を使っているとエラーになるのではないか？　と疑っています。
拡張命令への依存を下げる方向で、解決を図ろうと思います。

Babylon.js の Playground では、コード補完も使えるようです。
GLBoost でもコード補完が使える Playground があると、便利かもしれません。

http://www.babylonjs-playground.com/

Safari で Data URI Scheme 形式のテクスチャが読み込めない
Safari で下記のようにテクスチャを読み込もうとするとエラーとなる。

var texture = new GLBoost.Texture('data:image/jpeg;base64,/9j/4AA...');

実行結果

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

glTF ファイルの Embedded ファイル形式の時も、同様のエラーが出ていた為、恐らく同様の対策が必要と思われる。

参考：_loadBinaryFile()

ObjLoaderクラスで、値が浮動小数点でなく、整数値で入っているObjファイルにも対応する。

グラウンドに芝を敷き詰めたいです。

テクスチャパラメータ - wgld.org
https://wgld.org/d/webgl/w028.html

タイトル文字のサイズも調整する。

表現力向上の為、バンプマップ等が使えると良いです。

• バンプマップ
• 法線マップ
• 鏡面マップ

http://jsdo.it/cx20/vcVy
http://jsdo.it/cx20/78Dn