初心者でも絶対わかる、WebGLプログラミング＜基礎知識編＞
HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって？ WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング（アニメーション）など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対
ブラウザで3Dグラフィックを扱うWebGL、最新版 2.0のドラフト版が公開
ブラウザで3Dグラフィックを扱うWebGL、最新版 2.0のドラフト版が公開 増井 雄一郎（FrogApps, Inc.） 2013/9/16、WebGL Working Groupはブラウザで3Dグラフィックを扱うWebGLの最新版 WebGL 2.0のドラフト版が公開しました。 WebGL 2 Specification WebGL 2の最大の特徴は、2012年10月に標準化された組み込み向け3DグラフィックAPIのOpenGL ES 3.0の機能をベースにしているところです。 OpenGL ESは3DグラフィックをサポートするためのAPIで、WebGLではこの機能をブラウザ内で使えるようにすることで、ゲーム機の3Dグラフィックのような高度な3D表現をJavascriptから操作することが可能になります。 既に多くのブラウザではWebGL 1をサポートしており、すでにゲームを中心に使わ
WebGL対応のライブラリThree.jsを爆速にする方法 | ClockMaker Blog
前回のWebGL(Three.js)とStage3D(Away3D)の比較ですが、Mr.doobさんを始め国内外の多くの方からご指摘頂きWebGL(Three.js)版を最適化したところ、最終的にはFlash(Away3D)版と同じぐらいのパフォーマンスになりました。当初、最適化・検証不足で間違った情報を掲載してしまい申し訳ありませんでした。 さて、そのWebGL(Three.js)版を最適化した手法が有意義だったのでシェアしたいと思います。 デモの紹介 まずはこちらの2つのデモの再生を比較してみてください。WebGL対応のブラウザ(例：Google Chrome)でご覧ください。 ▼最適化前 ▼最適化後 どうでしょう？ 圧倒的に後者のほうが滑らかに再生できているのではないかと思います。 後者のほうは配置している3Dのオブジェクト数が10倍近く多いにもかかわらずです。 ※ちなみにFlash
多彩な表現力のWebGLを扱いやすくする「Three.js」
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（5/5 ページ） インタラクティブ性を取り入れる ここまで、Three.jsのさまざまな機能の使用方法を解説してきました。読者の皆さんが「これは面白い、自分でも何か作ってみよう！」と感じられていたら幸いです。 しかし、記事中で取り上げてきたサンプルコードは、いずれも一方的に映像を流し続けるだけのものでした。3次元映像を自分で操作できるのがリアルタイム3Dグラフィックの醍醐味ですから、このままでは物足りないですね。そこで、マウスによるカメラ操作などの基本的なインタラクティビティの実現方法を解説して、この記事の締めくくりとします。 リサイズへの対応など これまでのサンプルコードには、インタラクティブ性の欠如の他にも以下の欠点がありました。 WebGLをサポートしないブラウザへの対応がない 画面サ
IE11 Preview 版における WebGL 対応状況 - Qiita
IE11 より WebGL がサポートされたとの話を聞いて、少し調べてみました。 簡単なサンプルが動作するようですが、まだ、動作しないサンプルが多いようです。 ■ WebGL on IE11: welcomed but unfinished http://news.turbulenz.com/post/54340340417/webgl-on-ie11-welcomed-but-unfinished 以下のサイトにて、WebGL Device の情報を表示するスクリプトがあった為、 各ブラウザにて試してみました。 ■ Device Initialization - Samples - Turbulenz Engine http://biz.turbulenz.com/sample_assets/device_initialization.canvas.release.html テストに使用
WebGL and Three.js
Colin Barre-Brisebois - GDC 2011 - Approximating Translucency for a Fast, Che...Colin Barré-Brisebois
Aerotwist - Getting Started with Three.js
Please note: this has been tested with Three.js r82 I have used Three.js for some of my experiments, and it does a really great job of abstracting away the headaches of getting going with 3D in the browser. With it you can create cameras, objects, lights, materials and more, and you have a choice of renderer, which means you can decide if you want your scene to be drawn using HTML 5's canvas, WebG
TojiCode
Over the last year or so I've been working on Chrome's implementation of the new WebGPU API, a successor to WebGL based on more modern graphics API patterns. While working on the API I've also been busy building a lot of demos and other community resources with it, and one topic has been brought up by people I've talked to probably more than anything else: How do you keep the API state manageable
wgld.org | WebGL: 3D 描画の基礎知識 |
二次元と三次元 三次元空間――それは、我々の生きているこの現実世界に他なりません。 三次元の世界では、全てのものに縦と横、そして奥行きが存在します。そしてそれを再現しようとするのが、リアルタイム 3D レンダリングですね。しかし、三次元空間を再現しようとするとき、それを出力する先は普通、二次元のモニター上です。 パソコンや、モバイル機器などのあらゆるデバイスは、二次元のモニター上に情報を出力します。少なくとも現代ではいまのところ、奥行きのある空間を物理的に実現するデバイスはありませんね。まぁ、研究所の分厚い扉の向こう側にはあるのかもしれませんが、一般家庭には普通そんなものはありません。 WebGL を使って擬似的に三次元空間をシミュレートしたとしても、最終的にはそれをモニターという二次元空間に出力しなくてはなりません。奥行きによる前後関係や、遠近法による伸縮拡大を加味して、どこになにがどん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Buy Instagram Likes - 100% Real & Instant | Just $1.49
ShaderParticleEngine by squarefeet
http://atnd.org/events/21978
