その楽しさ・凄さは外見だけじゃない！ 超完成度の高いパーティクルデモ A Particle Dream が圧巻！ - WebGL 総本山
今まで見たパーティクルネタで個人的には一番かも 今回ご紹介するのは、比較的よくある「パーティクル」を使ったデモです。 three.js を利用すると簡単にパーティクルが利用できることもあり、パーティクル関連のデモは従来から数が非常に多いです。しかし今回のデモは、外見だけでなく様々な部分に工夫が凝らされた、非常に素晴らしい出来栄えになっています。 アニメーションや慣性をうまく利用した表現 パーティクルを使った表現として、比較的よく見かけるのがパーティクルの変形アニメーション。 なんらかのアクションによって、パーティクルが形成するシルエットが変化するというやつですね。今回のパーティクルデモにも、この変形アニメーションが仕込まれています。 これはとある図形に変形するその過程をキャプチャしたものです。 今回のデモの面白いところは、線形にまっすぐ形状移行するのではなく、慣性付きの波打つような動きで徐
Seascape
This help only covers the parts of GLSL ES that are relevant for Shadertoy. For the complete specification please have a look at GLSL ES specification Language: Version: WebGL 2.0 Arithmetic: ( ) + - ! * / % Logical/Relatonal: ~ < > <= >= == != && || Bit Operators: & ^ | << >> Comments: // /* */ Types: void bool int uint float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 uvec2 uvec3 uvec4 ma
マウスで簡単に間取り図を作成しWebGLで立体化して中を動き回れる「Wanaplan」
家を購入したり、新しい土地へ引っ越す時に、不動産屋を訪ねて物件を回るのはなかなか骨が折れるもの。そんな時に便利な、クリックしていくだけで簡単に3D間取り図を作成＆立体化させて「この間取りの部屋に住むとどういう感じになるのか？」ということを体験できるのが「Wanaplan」です。WebGLで作られており、平方メートル単位で細かく間取りを設定することもでき、家具や扉などの小物を配置して自分の理想のおうちを仮想体験することもでるようなので、実際に使用してみました。 Wanaplan - WebGL application to create 2D/3D plans http://www.wanaplan.com/en/plan/ 3D間取り図を作成するには、「Try Wanaplan」をクリック。 すると2Dの間取り図が開きます。 壁のラインをドラッグして移動させると間取りの拡大・縮小が可能。
wgld.org | WebGL |
WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ
3Dプログラミング勉強会をやりました - ✘╹◡╹✘
( Hatsune Miku / Crypton Future Media inc. / CC BY-NC ) 週末、3Dプログラミングに興味のある自称初心者が7人集まって勉強会をした。皆適当にピザ食べたりして語らないながら各自作業を進めて、終わって琉球料理食べて成果報告とか最近のプログラミング界隈の話とかをした。MikuMikuDanceをブラウザで動かす奴を作ろうと思って、MMDのモデルデータの歴史・仕様を調べ、PMD形式とその後継のPMX形式があること、PMDは仕様の詳細が公にされていないがPMXはPMX仕様.txtに少し書いてあること、PMXファイルはバイナリデータであること、ブラウザでバイナリデータを読み込むにはArrayBufferやDataViewが使えることなどを勉強した。PMXのデータ構造をBNFで記述してそれを元にコードを自動生成しようとしたのだけど、規則が色々複雑で、
多彩な表現力のWebGLを扱いやすくする「Three.js」
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（1/5 ページ） Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリだ。サンプルコードと見比べながら、効率良く学習しよう Three.jsの基礎 本連載も5回目を迎え、いよいよ佳境に入ります。今回の題材は、Webブラウザ上で3次元グラフィックを実現する「WebGL」です。ただし、これまでと違ってAPIを直接は触れず、「Three.js」を利用します。Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリです。Mr.Doob氏を中心にオープンソースで開発が進められており、WebGL界隈ではデファクトスタンダードに近い地位を築いています。 Three.jp公式サイト WebGLはこれまで解説し
WebGLの能力を引き出すプログラマブルシェーダー
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
http://www.syntensity.com/static/ammo.html
http://webglsamples.googlecode.com/hg/aquarium/aquarium.html