Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。 Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわからず、公式ドキュメントを見ると英文で何をどうすればいいのかわからないかと思います。 Three.jsをこれから勉強するには、以下のサイトを
Blenderで出力したデータを使ってWebGLで簡単に3Dモデルを表示する(その1) - 強火で進め
以前、「Blender to WebGL exporter」というBlender向けのプラグインを使うとWebGL向けのデータを出力出来る事を紹介しました。 3DモデルをWebGL向けのJavaScriptにエクスポート出来る「Blender to WebGL exporter」を使ってみた - 強火で進め http://d.hatena.ne.jp/nakamura001/20100317/1268841163 最後に「実際にプログラムへ組み込む方法は別のエントリーで解説します。」と書いたのですがまだ書いてませんでした。 読者の方から「エントリーはどこですか？」とのコメントを頂いたので重い腰を上げて書き始めました。 ちなみに自分はBlenderは入門以前の実力でWebGLもあれだけ紹介しておきながらほとんどプログラムはしてません(汗) という事で適宜、必要手順を調べながらこのエントリーを
HTML5、WebGL、WebSockets、JavaScriptを駆使して、ゲーム「QuakeII」をブラウザに移植中
HTML5、WebGL、WebSockets、JavaScriptを駆使して、ゲーム「QuakeII」をブラウザに移植中 Windows 95の時代に、自分視点での3D表示による画期的なシューティングゲームとして登場した「QuakeII」。現在、HTML5の音声再生機能、ローカルストレージ機能、現在策定中のWebブラウザ用3Dグラフィックス表示規格のWebGL、サーバと任意の通信を可能にするWebSocketsなどの機能とJavaScriptによるプログラミングを駆使することで、QuakeIIをWebブラウザ上に移植しようというプロジェクトが、グーグルのエンジニアによってオープンソースとして進められています。 すでにプロジェクト内部ではプロトタイプが稼働しており、実際に動作している様子がYouTubeで公開されています。ほとんど実用的な動作速度を実現しているようです。 実はこのことが明らか
グーグルがO3Dの方針変換。WebGLに標準を統一し、O3DはJavaScriptライブラリへ
Webブラウザ上で3D表示（立体表示ではなく、遠近法などを用いた表示）を行うための仕様として、グーグルは昨年の4月にO3Dの開発を発表し、一方でモジラを中心にしたWebGLもそれ以前から標準仕様として開発が進められていました。 先週5月7日付けのグーグルの「The Chromium Blog」にポストされたエントリ「The future of O3D」で、グーグルはO3Dはこれまでの方針を変更し、WebGLをベースとしたJavaScriptライブラリとすることを明らかにしました。これにより、Webブラウザでの3D表示の標準APIはWebGLに一本化されます。 性能と環境に対するWebGLの懸念が払拭された グーグルがWebGLではなくO3Dを開発していた理由として、WebGLに関する2つの懸念があったことを明らかにしています。 1つはWebGLの性能です。WebGLはHTML5のCanva
JavaScript でリアルタイム 3DCG を実現する WebGL の使い方 - WebOS Goodies
先日、ちょっとした思いつきで WebKit の Nightly Build をインストールし、 WebGL を試してみました。 WebGL というのは現在策定中の新しい規格で、 JavaScript を使って本格的な 3DCG を実現する API です。同じ目的を持つものとして Google の O3D がありますが、 WebGL は OpenGL ES を管理している Khronos グループを中心に Google, Mozilla, Opera, NVIDIA, AMD といった企業が参画しており、標準化という面ではリードしています。 まだ策定中の規格なので今後変化するかもしれませんが（WebGL 1.0 が正式リリースされました）、少なくとも現状の WebKit の実装については使い方がわかったので、本日はそれをご紹介します。 WebGL は Web 上の最も重要なグラフィックス A
WebGL の描画結果を HTML に正しく合成する方法 - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先日、最速チュパカブラ研究会さんのこちらの記事で、 WebGL で描画した半透明オブジェクトを HTML に重ねるとおかしな結果になることが報告されていました（同時にクールなデモも公開されているので、必見です）。この問題、実は私も以前にハマったことがあって、一応解決策も見つけました。 Render To Texture による 2 パスレンダリングでも必要になる、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Seneca-CDOT/c3dl: Repository for c3dl (Canvas 3D JS Library). See wiki for related links