WebGLで伝わる立体地図コンテンツ。 御嶽山噴火時の証言を集めた『NHK 御嶽山「噴火の証言」』開発秘話 - WebGL 総本山
御嶽山噴火時、その場にいた人たちの証言を集めたコンテンツ『NHK 御嶽山「噴火の証言」』。 Three.jsの利用やDOMとの連携など、製作者の立場から、WebGLでコンテンツを作る利点や注意すべき点について語ります。 ※本稿は実際にサイト作成に関わった面白法人カヤックのフロントエンドエンジニアのごんさんからご寄稿いただきました！ ありがとうございます！ 50名以上の方が亡くなり、戦後最悪の火山災害となった2014年9月27日の御嶽山噴火。 『NHK 御嶽山「噴火の証言」』は、御嶽山の噴火時、その場にいた人たちの証言を集めたWebサイトです。 3Dモデル上にプロットされた証言をクリックしたり、カメラを自由に動かして、御嶽山を眺めることで、噴火当時の状況を見ることができます。 今回は、開発を担当した面白法人カヤックのフロントエンジニアが、全面WebGLで制作した本サイトの内容について、制作面
Mozilla、クロスプラットフォームのWebGLゲームエンジン「PlayCanvas Engine」公開 | OSDN Magazine
Mozillaは6月4日、オープンソースのクロスプラットフォームのゲーム構築用JavaScriptライブラリ「PlayCanvas Engine」をリリースした。「世界で最も容易に利用できるWebGLゲームエンジン」としている。 PlayCanvas Engineは3Dグラフィックを利用したゲーム開発向けのJavaScriptエンジン。Webブラウザ上で利用できる3DグラフィックスAPIである「WebGL」を利用する。プロジェクトは、WebGLがデフォルトで有効となった「Firefox 4.0」のリリース（2011年3月）後に立ち上げられており、パートナーとしてMozillaのほか、米ARMやゲーム開発を手がける米Activisionが名を連ねている。 対応OSはWindowsおよびMac OS X、Android、iOSで、グラフィックスのほか物理演算エンジンやアニメーション、2D/3D
three.js 用にボーンアニメを持つ 3D モデルを書き出すために | Yomotsu net
three.js は skeletal animation （ボーンやリグ）を持った 3D モデルを読み込み、再生することができます。3D モデルを three.js 用に書き出すため一番いいツールは Blender です。 Blender 上でボーンとアニメーションをつけていきます。Dope Sheet を使って、アニメーションを複数持たせると、three.js 上でも異なる複数のアニメーションとして利用することができます。 なお、Blender 上のボーンをつけて書きだすまでの操作は動画にしているので合わせて参考にどうぞ。 1. アニメーションを Bake するFK のみでアニメーションをさせている場合には、この設定は必要ありません。 three.js 上では基本的に FK のみ対応しています。IK や物理演算による自動計算には対応していません。そのため、FK 以外で動かしているボーン
From Unity to Three.js | HelloEnjoy™
Over the last several years, Unity has been quietly revolutionising the way we create interactive content. Since we started using it in 2009, it has evolved into a powerful solution for 3D and now 2D development, with remarkable smooth workflows. Although HTML5 isn’t (yet) among the many platforms Unity supports, we can still take advantage of its robust toolset for our WebGL projects. The Three.j
Behind The Scene of "WebGL でクリスマス" | Yomotsu net
昨日公開した作例 Santa’s Boxes! の内容をざっくりまとめました。 Ground 去年のアドベントカレンダーに書いた内容をそのままで、ディフューズ マップを変更して雪原を作りました。three.js の機能でバンプ マップを適用したところ、IE 11 でレンダリングできなかったため、ディフューズ マップのみ適用しています。 単品 demo Skybox three.js で cube ジオメトリーを作成し、スカイボックス用のディフューズ マップを適用しているだけです。立方体の内側を表面として表示するためには material の side プロパティーに THREE.BackSide を指定します。 スカイボックス用に利用したテクスチャーは以下のような、シームレスな 6 面になっています。 単品 demo Snowing 雪は THREE.ParticleSystem を用いて
アドビの新プロジェクト：JavaScript で WebGL シェーダを記述できる ShaderDSL.js - akihiro kamijo
アドビの新しいオープンソースプロジェクトが公開されました。WebGL のシェーダを JavaScript で記述できるよう開発されたフレームワーク ShaderDSL.js です。 WebGL の場合は、シェーダーの記述に使用される言語は GLSL が一般的です。そのため、一般的な Web 開発者にとっては、WebGL を使うには、機能だけでなく、新しい言語を学ぶという手間も発生します。 また、複数のの言語を使って Web ページを記述するのは、メンテ等も大変そうです。そこで、JavaScript で WebGL のシェーダーが記述できたたらよいね！と思ったアドビが新しいフレームワークの開発に着手したというお話です。 （なぜアドビがこんなフレームワークを開発しているのか妄想してみると楽しいかもです） ShaderDSL.js は、内部的に Gladder と RiverTrail を利用し
スマホでも動く物理演算で転がる3Dサイコロを作ったのでその解説 | CSS-EBLOG
スマホでも動く物理演算で転がる3Dサイコロを作ったのでその解説 カテゴリ：3D 2013年9月 1日 16:46 CSS3DRendererはexamplesの中 ルービックキューブの解説は少しお休みして、Three.jsのCSS3DRendererを使ってサイコロを作った話をしようと思います。といっても、ルービックキューブを作る上で使用した概念などもあるので、まったくの無関係というわけではありません。 今回のポイントは「CSS3DRenderer」です。 これ、実はThree.jsだけを読み込んでも使用できません。実験段階だからなのか、Three.jsのgithubのリポジトリ内にある「examples」の中にこっそり含まれています。 実装サンプル なので、まずはこれを取り出してThree.jsと一緒に読み込ませます。 ちなみに今回作成したものは以下のようなサイコロです。（CANNON.
HTML5 Canvas 2D Context で描いた内容を WebGL の テクスチャにする
高確率で思い込みによる説明．間違っていることが多い．/「無知だったり、勘違いしていたり、底意を押しつけたり、いいかげんだったり、噂や疑惑を信じていたりして、狂気じみてさえいるかもしれません」( http://bit.ly/gs23zg ) 追記 2013/10/23: 書いた「WebGLのTextureをCanvasに文字(Web Fonts)を書いて動的に作ってみる(jQuery/ThreeJS使用, Firefox 24.0/Safari 6.0.5で動作)」 一応まとめておく． やってみた． ここのこちらをベースにする． ０．他のjsファイルの呼び出しをどうにかしておく downloadして配置した場合はパスを変えておく．以下の3種が必要となる． <script type="text/javascript" src="./webgl-utils.js"></script> <scri
Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング（仮題） - 最速チュパカブラ研究会
MAX 打ち上げのときに川崎さんに「英語の記事書いたら絶対ウケるから書くべきだよ」と言われていつ書こうかなーと思ってたら、そういえば11日は休日だったので、日本語の下書きだけでも一気に書いてみることにしました。 といっても、欲を出してあれもこれも書こうとして、結局まだ書ききれてませんけど。 タイトル案 Javascript と Canvas によるフルスクラッチ3Dプログラミング Javascript と Canvas 3Dプログラミング入門 ドキッ JSだらけの あと、今日（11日）は私の誕生日でもあります。25になりました。そろそろ鏡を見るのが怖くなってきますね。 以下、書きかけ Introduction Adobe MAX 2009 で Spark Project は、拡張現実（AR）のデモを展示し、来場者の注目を集めていた。Shibuya.JS のメンバーもこのデモに感激し、是非
『Three.jsとBlenderによるWebGL』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。 html5、javascript、flashなどのクライアント開発を メインに担当しております、 菅家(@KA_ka_YY)と申します。 弊社3月に行われました、エンジニア、デザイナーを対象とした アプリコンテストというイベントにて WebGLを使用した野球盤ゲームを作成しました。 その際利用したThree.js（WebGLのjavascriptライブラリ）を用いた WebGLの使用方法を紹介させていただこうと思います。 （1）レンダリングまずは Blender というフリーの3Dモデリングソフトで 以下のようなキャラクターを作りました
Three.js doc
top THREE.PerspectiveCamera File doc/three.js/src/cameras/PerspectiveCamera.js Instance Variables fov aspect near far fullWidth fullHeight x y width height projectionMatrix Superclass THREE.Camera Examples (122) doc/three.js/examples/canvas_geometry_birds.html (source) doc/three.js/examples/canvas_geometry_cube.html (source) doc/three.js/examples/canvas_geometry_earth.html (source) doc/three.js/ex
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebGL + OculusRift で室内を歩き回れる素晴らしいデモンストレーション - どくらぼ
ブラウザ版Assassin's Creed Piratesが無償公開 ～MicrosoftとUbisoftが開発
Three.js - examples
three.js editor
WebGL procedural terrain [three.js]
IDEA * IDEA
