技術 - 3Dの記事一覧
Goo Engine - 多彩な機能をもったWebGLエンジン
Webの進化によって、今後はますますリッチなUIに注目が集まっていくでしょう。その一つとして3Dが考えられます。そし3Dを担っている技術といえばWebGLになります。そのままでは扱いづらいWebGLですが、Goo Engineを使うことで3Dコンテンツが開発しやすくなるかもしれません。## Goo Engineの使い方...
Web VR Starter Kit - WebでVRをはじめるならここから
gumiがVR専門の子会社を設立するなど、VRに対する期待は大いに高まっています。ゲームでの利用はもちろんのこと、遠隔地操作など多くの利用が考えられるだけに、その可能性を考えるとわくわくしてきます。そんなVRをWebブラウザ上で楽しむためのスターターキットと言えるのがWeb VR Starter Kitです。## We...
Blend4Web – Blenderで作った3DデータをWeb上で
WebGLの登場もあって、今後3DをはじめとしてリアルなグラフィックスがWeb上でも実現することでしょう。WebGLとOpenGLは似ているとは言え、WebGL向けにはまだ専用のツールなどは揃っていません。作るのに大きなコストがかかるのではなかなか広まらないでしょう。そこで既存の仕組みで作られたデータを取り込めるのがベ...
Teddy.js/PaintUp – Webブラウザ上で簡単に3Dオブジェクトを作成
3Dで作品を作るというのはとても敷居が高いように感じられます。ものを三次元的に捉えないといけないですし、二次元のコンピュータの中で三次元を描くのはとても面倒なイメージがあります。そんな大変さを軽減してくれるのがTeddy.js/PaintUpです。Teddyは誰でも簡単に三次元モデルを作れるソフトウェアで、Teddy....
MagicaVoxel – マルチプラットフォーム対応のVoxelエディタ
Voxelと言えばドット絵を組み合わせた3Dモデルのことですが、MineCraftであったり、LEGOっぽさもあって人気があります。精密な3Dデータを作るのは難しいですが、ブロックを重ね合わせたVoxelは手軽で、かつ暖かみ、面白さがあります。そんなVoxelを作るためのエディタがMagicaVoxel
YASAI KUDAMONO – 野菜と果物を棚に載せるシンプルなゲーム
ゲームのフレームワークとしてUnityが注目を集めています。昔は3D向けと言った感じでしたが、最近は2Dゲームの開発でもUnityが使われるようになっています。そんなUnityで作られているのがYASAI KUDAMONO
ThreePiece.js - Three.jsをラッピングして3Dをもっと扱いやすく
3Dはとかく面倒なイメージがあります。2Dに比べると考えることが多く、行列やライトなど様々な計算を行った上で表現しなければなりません。それではなかなか手出ししづらいのではないでしょうか。3D系ライブラリとして有名なThree.jsもそうです。表示するまでにやるべき面倒な（だいたい毎回同じ）ことを取り除いてくれるライブラ...
Elegans - Webベースの3Dグラフライブラリ
グラフというのは実にたくさんの種類があります。Webにおいてグラフを表示するというのは意外と面倒な問題ではありますが、それでも最近ではライブラリを増えてきて使いやすくなってきているでしょう。しかしそれは2Dに限った話かも知れません。3Dグラフとなるとさらに厄介です。そこで使ってみたいのがElegans、3Dグラフライブ...
Enraged Fowls - HTML5製。3D版Angry Bird
HTML5 Japan Cupが行われ、色々なアイディアを凝らした作品が生まれました。HTML5/JavaScriptがソースコードを隠せない仕様とあってか、オープンソース・ソフトウェア（またはソースコードを公開）しているケースも多数あります。今回はその作品の一つ、Enraged Fowlsを紹介します。## Enra...
Isomer - Canvas上に等角図で立体を描くJavaScriptライブラリ
平面で立体を表現する手法の一つに等角図があります。120度ずつのY字型でXYZ軸を表現します。工作の図面を描くのに使ったり、コンピュータであればドット絵を描く際にも使われます。面の色を変えるとぐっと立体的に見えるのが面白いです。そんな等角図をWeb上、HTML5のCanvasで表現するのがIsomerです。等角図を用い...
ViziCities - 体験必須！オープンソースの3D地図
オープンソースでもここまで出来てしまう凄さが。Appleのマップは登場当時こそ叩かれましたが、それでも改善を重ねて徐々に使えるようになってきています。そんな中、注目されているのが建物の3D表示です。同様の機能はGoogleマップやBingでも開発されています。そんな3Dマップをオープンソース・ソフトウェアで実現してくれ...
JSC3D - JavaScript/Canvasを使った3Dビューワー
3Dプリンタの発展もあって、立体物に対する注目が集まっています。しかし3Dオブジェクトは2D以上に描いたり作成したりするのが難しいです。そんな中紹介したいのがJSC3Dです。オブジェクトの作成は容易ではありませんが、Webブラウザ上で3Dオブジェクトを描画するすごいビューワーです。!一例です。女性のアバターを表示してい...
Unfolding the Box Model – 3Dを使ったCSS3テクニックのお手本にどうぞ！
CSS3の妙技満載！スタイルシートというとWeb上のテキスト装飾や配置を決定するものというイメージがありますがCSS3によってアニメーションや表示上のイフェクトをサポートするなどプログラミング並のことができるようになっています。そのためにはCSS3を駆使すれば何ができるのかを知らなければなりません。知った上でどこで活か...
マウスで回転。擬似的3Dを実現「ThreeSixty」
ThreeSixtyはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。Web上で3Dオブジェクトを描くにはWebGLを使うのが一般的ですが、技術的には敷居が高いように感じられます。そこで画像をつなぎ合わせて擬似的な3Dを実現させているのがThreeSixtyです。この中央にあるのがTh...
次世代の表現。Webページに2D/3Dを混在させる「Voodoo」
Voodooは非商用に限り無償のソフトウェア（ソースコードは公開されています）です。Webは基本2Dです。テキスト、画像、動画など2Dのオブジェクトを配置してページを作成します。3DはWebGLやFlashで表現できますが、3Dと2Dは別物と言った雰囲気があります。しかしそれらをミックスして表現できるのがVoodooで...
熱意に期待。将来Web上で初音ミクが踊る日がくるかも？「mmd.js」
mmd.jsはMikuMikuDanceのファイルをJavaScriptでWeb上に描画するライブラリです。初音ミクを踊らせることができるソフトウェア、MikuMikuDanceをWebブラウザ上で再現しようと試みるソフトウェアがmmd.jsです。まだまだ開発途上のようですが今後が楽しみです。現状はこんな感じです。理想...
CSS Shadersを知りたい人は触ってみよう「CSS Shaders with WebGL」
CSS Shaders with WebGLはWebGLを使ってCSS Shadersを実現するサンプル集です。CSS Shadersという技術があります。CSSによって要素を変形させるもので、プログラマブルシェーダーというプログラミングによって制御します。それによって何ができるのかその一例としてみておきたいのがCSS...
WebブラウザでFPSを実現するゲームエンジン「BananaBread」
BananaBreadはC++/OpenGLで作られたものをJavaScript/WebGLに置き換えたゲームエンジンです。Webブラウザでどんなことができるのか、それを追求していくMozilla。今回はBananaBreadを紹介します。C++とOpenGLで作られたゲームエンジンSauerbratenをJavaSc...
3Dプリンタ用にSTLファイルを出力するJavaScriptライブラリ「OpenJsCad」
OpenJsCadは3Dプリンタ用にSTLファイルを出力する3D描画JavaScriptライブラリです。去年くらいから3Dプリンターの注目が集まっています。削る、層を重ねるなど色々なタイプがありますが、そんな3Dオブジェクトを生成する際に使われるフォーマットがSTLファイルです。OpenJsCadはJavaScript...
Pixar社製。実際に使われている3Dレンダリング技術をオープンソース化「OpenSubdiv」
OpenSubdivはPixar社の開発したオープンソースのSubdivision surface技術実装です。リアルタイムに3Dオブジェクトのレンダリングができます。世界最高峰の3Dアニメーションを創り出す企業と言えばPixarです。現在はディズニー傘下となっているPixarがリリースしたソフトウェアがOpenSub...