初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ | ClockMaker Blog
HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ HTML5で3Dを実現するWebGL対応のフレームワークAway3D TypeScriptが10月に発表されました。WebGLで3Dを実現する類似ライブラリとしてMr.doob氏らが開発しているThree.jsが名前が知られていますが、Away3D TypeScriptは同等以上に高機能であり高いパフォーマンスを有しています。今回は公式サンプル(Githubでソースコードが公開されている)を通して、Away3Dでどのような表現が可能であるのか紹介していきます。 Away3Dとは Away3DはFlash Stage3Dでもっとも使われているフレームワークの一つです。アドビが提供するAdobe Gaming SDK(フレームワークやツールのパッケージ群)にもAway3Dは採用されています。
初心者でも絶対わかる、WebGLプログラミング＜基礎知識編＞
HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって？ WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング（アニメーション）など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対
three.jsで遊んでみる（９） « Everyday Pieces ::
前回からだいぶ日が経ってしまいましたが、 ミクさんに物理演算を適用すべくチマチマやっておりました。 ただ残念ながら期待したようにはなってくれてません。 よく分からなかったり、うまく行ってくれなかったり、 自分の力不足な所が大きいと思うのですが、 JavaScriptでは荷が重いのかもしれません。 しばらく動作させるとハングアップしたりします・・・(^_^;) これ以上はうまく行きそうにない感じなので、 中途半端ではありますが、この辺りで〆にしようと思います。 それでも、それなりに得たものがないこともないので、 それをまとめておこうと思います。 前回でも触れましたが、 three.jsで物理演算をやるには、 BulletのJavaScript版であるammo.jsを使いますが、 three.jsからは直接ammo.jsを使いません。 physi.jsを仲介してその機能
three.jsで遊んでみる（８） « Everyday Pieces ::
前回の続きです。 今回はちょっと趣向を変えた内容となっています。 さて、 three.jsでは様々な形状をgeometryという形で 簡単に生成できるようになっています。 例えばこちらで見られるように、 平面、直方体、球、円柱、 四面体、八面体、二十面体、 ドーナツ形、結び目形など。 ただ、 デフォルトではカプセル形状が無かったので、今回やってみた次第です。 ここで言うカプセルとは、 球を両手でつかんで真ん中から引き伸ばした形状と思ってください。 あるいは円柱の両端に半球をくっつけた形状と言ったほうが分かりやすいかな。 three.jsには、geometryとgeometryあるいはgeometryとmeshを合成できる THREE.GeometryUtils.merge() という関数が用意されているので、 これを使います。 まず円柱geometryを作ります。
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（３／３）～
本稿では新しいWEBページ用の言語であるHTML5＋WebGLを利用して、 ウェブブラウザ上で、物理シミュレーションの計算と描画をリアルタイムに実行する「物理シミュレータ」の作成までの手順を記述します。 本稿では、物理シミュレータの例として、任意の初期条件に対する２重振り子の時間発展を４次のルンゲクッタ法を計算する「２重振子シミュレータ」を構築します。また、本稿では WebGL を簡単に利用することができるWebGLライブラリとして著名な Three.js を用いています。 物理や工学とは無関係に、初めて Three.js を利用する人がチュートリアルとしても利用できることも意図しております。 パート１では、主に Three.js の使い方について触れました。 パート２では、拘束力のある運動の代表例である単振子を取り上げ、物理演算結果のリアルタイム描画＋物理量の時間発展の様子をグラフ化しま
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（２／３）～
本稿では新しいWEBページ用の言語であるHTML5＋WebGLを利用して、 ウェブブラウザ上で、物理シミュレーションの計算と描画をリアルタイムに実行する「物理シミュレータ」の作成までの手順を記述します。 本稿では、物理シミュレータの例として、任意の初期条件に対する２重振り子の時間発展を４次のルンゲクッタ法を計算する「２重振子シミュレータ」を構築します。また、本稿では WebGL を簡単に利用することができるWebGLライブラリとして著名な Three.js を用いています。 物理や工学とは無関係に、初めて Three.js を利用する人がチュートリアルとしても利用できることも意図しております。 パート１では、主に Three.js の使い方について触れました。 パート２では、拘束力のある運動の代表例である単振子を取り上げ、物理演算結果のリアルタイム描画＋物理量の時間発展の様子をグラフ化しま
tQuery API - extensions for three.js
tQuery API : three.js + jQuery Three.js Power + jQuery API Usability tQuery API is a thin library on top of three.js It is an extension system for people to write plugins. To help them share their code and build on top of each other. It mimics jquery api, well know for its usuability. tQuery API aims for "it should not be harder than playing with lego bricks." Download Boilerplate Try it Online Po
「HTML5による物理シミュレーション」出版決定（発売日：2013年2月22日）
特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。 | More ≫ HTML5による物理シミュレーション JavaScriptでThree.js/jqPlot/jQuery UIを使う 著者 遠藤 理平 出版社 株式会社カットシステム 発売日 2013年2月22日 判型 B5変型判、392頁 税込価格 3,990円（本体 3,800円） ISBN 978-4-87783-303-9 最新のthree.jsで利用するために必要な変更点をまとめました：three.js仕様変更による変更点（PDF） 本書の続編となる「HTML5による物理シミュレーション【拡散・波動編】」が2013年5月25日
3Dクラスタ監視ツール
最近クラスタの負荷状況を3Dで表示するようなツールを作ってます。 クラスタ監視ツールって既存のものもあるのに、なぜ今更？と思うかもしれませんが、 既存のもので足りないと思っているのは、 1. 十数台くらいまでなら良いがそれ以上になるとグラフを見るのがつらい 2. CPU毎、ディスク毎に見れない 自分の目的としては数百台とかの規模でHadoopを実行し、負荷状況を見れること、 後からも実行時の状況を調べてボトルネック等を分析出来るようにすることです。 そこでこんな感じのものを作りました。 構成はこんな感じです。使用技術は、 fluentd + node.js + websocket + webgl (Three.js) といった感じでかなり流行りの技術を使ってる感じです。 各サーバーの負荷状況をfluentdで集めています。自作プラグインfluent-plugin-statでC
CSS の背景画像を Three.js で描画する方法 - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先日、 HTML5Rocks で「Canvas-driven background images」という記事が公開され、 canvas や WebGL で描画した画像を CSS の背景画像として適用できる -webkit-canvas の使い方が解説されていました。 canvas や WebGL はアニメーション GIF などに比べて圧倒的に滑らかなアニメーション
The Lessons - Hack The WebGL (WebGL勉強会)
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
Opera 12がリリース、遂にWebGLに対応(デフォルトではOFF) - 強火で進め
Opera 12、随分アルファやベータ版の期間が長かったですが最近やっと正式版がリリースされました。 アルファ版の頃から搭載されていたWebGLは正式版でも搭載されたか気になっていたのですが結果は「対応しているるけどデフォルトでは無効化されている」というちょっとだけ残念な状態です。 OperaでWebGLを有効にする方法 WebGLを有効化する方法を解説。 まずはアドレスバーに以下のコマンドを入力。 opera:config#UserPrefs|EnableWebGLすると以下の画面が表示されますのでここの値を 1 します。 次に下の方にスクロールすると表示される「保存」ボタンを押すと再起動の指示が表示されるのでOperaを再起動するとWebGLを有効になります。 しかし、自分が最初に試した環境ではこの設定をした後にWebGLを使ったページを表示してもWebGL非対応のブラウザ扱いをされて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kripken/ammo.js: Direct port of the Bullet physics engine to JavaScript using Emscripten
GitHub - chandlerprall/Physijs: Physics plugin for Three.js
GitHub - jeromeetienne/tquery: extension system for three.js
Buy Instagram Likes - 100% Real & Instant | Just $1.49
Blogger
three.js - JavaScript 3D library
TechCrunch | Startup and Technology News
