Grimoire.js provides effective structure to make use of WebGL representational power in Web development.
Grimoire.js - WebGL framework for Web development -
Grimoire.js provides effective structure to make use of WebGL representational power in Web development.
生WebGL入門:初音ミクの美麗3Dモデルを表示する(後編)
前の記事で、3Dモデルのミクさんの描画に成功しました。ただ現状はモデルの外形を表示出来ただけなので、せっかくここまで表示出来たからには色を塗ってみたいところです。今回の記事では、色を塗りテクスチャを貼ってみます。また、最後に別のモデルを表示して、テクスチャの威力についてもご紹介したいと思います。 前の記事はこちら→ 生WebGL入門:初音ミクの美麗3Dモデルを表示する(中編) MTLデータの読み込み、表示 その1の記事で準備した時、OBJファイルと共にMTLファイル が生成されたことを覚えていらっしゃるでしょうか。前の記事で紹介したとおり、OBJファイルはポリゴンのデータを定義するものでしたが、色の情報は一切ありませんでした。それらのデータは、MTL（マテリアル）ファイルに定義されています。というわけで、今回は色をつけるためにマテリアルファイルを扱います。 マテリアルファイルのフォーマット
生WebGL入門:初音ミクの美麗3Dモデルを表示する(中編)
前の記事では、大変長いコードを書いて、やっとポリゴンを1枚だけ表示させることに成功しました。次に目指すは、ミクさんモデルの表示です。 前の記事はこちら→ 生WebGL入門:初音ミクの美麗3Dモデルを表示する(前編) モデルデータの読み込み、表示 まずは前の記事で準備で用意した、ミクさんモデルのデータをJavaScriptで読み込みます。前の準備ではmiku.obj、miku.mtlの2つのファイルが出力されました。なんとなく眺めればわかるように、OBJファイルの方は頂点などのデータ、MTLファイルの方が色などのデータとなっています。まず、OBJファイルのデータを読み込んで、その内容を出力してみましょう。 OBJファイルのフォーマット OBJファイルのフォーマットは、ネットで少し調べればこちらのサイト等で詳しく説明されていますが、基本的には頂点データ、テクスチャデータ、法線データ、ポリゴン定
生WebGL入門:初音ミクの美麗3Dモデルを表示する(前編)
Special Thanks to @hagat and @teehah for reviewing my articles! 近年、WebGLに流行の兆しが出てきました。WebGLとは、ブラウザに何らプラグインをインストールすることなく、JavaScriptよりGPUを使用した3Dの表示を可能とする技術です。プラグインのインストールが必要ないとはいえ今までは対応ブラウザが少なくあまり実用的ではありませんでしたが、先日のiOS8で正式に対応されたことでモバイルブラウザにおいて対応率が跳ね上がり、スマートフォンにおいてブラウザベースで3Dのゲーム等を作れる可能性が急激に高まりました。 今回WebGL Advent Calendarの一環として、生WebGLで3Dのオブジェクトを表示するところまで挑戦してみます。WebGLにはthree.jsを始めとして有用なライブラリがたくさんあり、大抵の場
WebGL best practices - Web API | MDN
この文書は WebGL を使ったコンテンツの向上のための Tips について書きます。これらの提案に従うことで、多くの機器への互換性を高めたり、パフォーマンスを上げることにもなります。 WebGL のエラーを出さないように注意しましょう。エラーは getError() で得られますが、Firefox では webgl.verbose の設定を有効にすることで、ウェブコンソールに WebGL のエラーと警告を出力します。ユーザーのコンソールにエラーを吐き出す必要はないでしょう？（訳註：パフォーマンスの理由もある。下参照） #ifdef GL_ES は絶対に使ってはいけません。初期の例ではこれが使われていましたが、WebGL では必ず true になるので必要ありません。 フラグメントシェーダで highp 精度を使うのはやめましょう。mediump を代わりに使いましょう。highp を使う
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
