WebGL のレンダリングパフォーマンスを感覚的に知る | TECH BLOG
three.js で WebGL のはなし。（というか requestAnimationFrame だな。） stats.js で 60fps 出てるからだいじょーぶーと思っていても、実際のレンダリング時間が 1/60 秒で終わってるか 1/200 秒でおわってるかはわからねいのですね。それはブラウザ (Chrome) がリフレッシュレートに同期して (VSync) requestAnimationFrame を動かしているからで、通常の液晶モニターだとリフレッシュレートは 60Hz なので、60fps に制限される、というわけ。画面が書き換わる速度以上にデータを書き換えても無駄だから。 Chrome ではその VSync をしないように設定できる。しないようにすると、画面書き終わったあとにつぎの周期をまたなくなるので、可能な限り最大限の速度で requestAnimationFrame
WebGLで伝わる立体地図コンテンツ。 御嶽山噴火時の証言を集めた『NHK 御嶽山「噴火の証言」』開発秘話 - WebGL 総本山
御嶽山噴火時、その場にいた人たちの証言を集めたコンテンツ『NHK 御嶽山「噴火の証言」』。 Three.jsの利用やDOMとの連携など、製作者の立場から、WebGLでコンテンツを作る利点や注意すべき点について語ります。 ※本稿は実際にサイト作成に関わった面白法人カヤックのフロントエンドエンジニアのごんさんからご寄稿いただきました！ ありがとうございます！ 50名以上の方が亡くなり、戦後最悪の火山災害となった2014年9月27日の御嶽山噴火。 『NHK 御嶽山「噴火の証言」』は、御嶽山の噴火時、その場にいた人たちの証言を集めたWebサイトです。 3Dモデル上にプロットされた証言をクリックしたり、カメラを自由に動かして、御嶽山を眺めることで、噴火当時の状況を見ることができます。 今回は、開発を担当した面白法人カヤックのフロントエンジニアが、全面WebGLで制作した本サイトの内容について、制作面
WebGLを極めるならJSライブラリを使わず書こう！モバイルでも動くHTML5の3次元スライドショーを作ってみた - ICS MEDIA
WebGLを極めるならJSライブラリを使わず書こう！モバイルでも動くHTML5の3次元スライドショーを作ってみた 2014年9月にリリースされたiOS 8においてWebGLが動作するようになったことで、スマートフォン環境での3D表現に可能性を感じ、興味を持った方も多いと思います。そこで今回、写真を読み込んで3D空間上に配置し、パーティクルに分解して次の画像に切り替わるスライドーショーのデモをJSライブラリ（Three.jsなど）を使わずにイチからHTML5とWebGLで作ってみました。WebGLが動作する端末ならモバイルでもなめらかに動作するので、是非試してみてください。マウスやタッチの操作でビューを回転させることができます。 デモを再生する（別ウインドウが開きます） ソースコード (JavaScript) 制作環境について 今回のデモを作成するにあたり、WebGLのAPIを直接呼び出す形
Javascript + WebGL « OutsideOfSociety
Some Js+WebGL experiments and tests. Using three.js. (Note. You need a modern browser that supports WebGL for this to run the way it is intended. For example. Google Chrome 9+ or Firefox 4+. Also since WebGL is kinda “new”, some of these might break over time.) Box (Local version) / christmasexperiments.com 2017 #codevember 2017 Winter (Local version) / christmasexperiments.com 2015 Spring Replica
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
たった3KBのコードで3DCGモデルが歌って踊ってアングルも操作できる！ jQueryベースのライブラリでMMDデータを活用したWebGLコンテンツを作ろう
はじめに 数あるHTML5の機能の中でも、特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今一つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。 three.jsの登場により、実装のハードルはだいぶ下がりました。しかし、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。 今回紹介する「jThree（ジェイスリー）」は、そんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら、手軽にWebGLコンテンツを作ることができます。 本記事で
MozillaとUnity、WebGLに対応したUnityゲームエンジンのアドオンを提供へ
米Mozillaは3月19日(現地時間)、プラグインを必要としない形でUnityで開発したゲームをWeb上に公開するためのツールを発表した。 このツールは、WebGLやasm.jsといったMozillaが開発・標準化を行なってきた技術を利用して提供する。このUnityのWebGLアドオンは、2014年中にリリースされる「Unity 5.0」と共に提供開始となる。 Mozillaのエンジニアリングディレクターで、WebGL考案者でもあるVlad Vukicevic氏は「Unityはゲーム開発分野で最も革新的な企業の一つ。この開発によって、Unity開発者はWebの可能性を最大に活用できるようになる」とコメントしている。 なお、MozillaはYouTubeで、海外で人気のゲーム「Dead Trigger 2」をFirefox上で実行しているデモを公開している。
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 を用いて
フラクタル地形 - ずっと君のターン
先日THREE.jsでのポリゴンとテクスチャの使い方を覚えたので、なんか面白い使い道ないかなと検索して「フラクタル地形」というのを見つけました。 Wikipediaによると 正方形を4つの同じ大きさの小さい正方形に分割し、その中心の点を無作為な値で垂直方向に変位させる。この過程を4つに分けられた各正方形についても繰り返し、再帰的に実施して必要な詳細レベルに到達するまで行う。 ということらしく、このたった2文とアニメーションGIFでだいたい理解できる程度には簡単そうだったのでやってみました（説明とアニメーションGIFが合ってないけどまぁ言いたいとは分かる・・・）。 おお、たしかに山っぽい。 もちろんリロードするとまた別の地形が生成されます。 ソース見てないけどTHREE.jsについてくるこれとかもたぶん同じ事やってるんじゃないかな。 ・・・ 今回特にTHREE.js的な見所はほとんどないんで
Web ブラウザで動くとは思えない、凄い WebGL デモ・アプリ 65 個 - WebOS Goodies
今月の 22 日に GTUG Girls のイベントで WebGL (Three.js) のハンズオンをやります。内容は初心者向けで、簡単な物体を表示してみたりして Three.js の基礎を学ぼうというものです。女性限定ですが、興味のある方はぜひご参加ください。 【告知】第10回GTUG Girls Meetup 「キラリとひかるモノ作り！WebGL(Three.js)入門編」 募集開始！ で、本日は宣伝も兼ねて WebGL を使ったデモやアプリケーションのまとめエントリを書いてみました。いずれも Web ブラウザで動くとは思えないほどインパクトのあるものばかり。 WebGL 対応のブラウザで（Chrome か Firefox の最新版が無難です）、おもいっきり堪能しちゃってください！ 長編デモ 音楽に合わせてインパクトのある映像を展開していく、ちょっとしたストーリー性のあるデモなどを集
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
WebGLの能力を引き出すプログラマブルシェーダー
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
tmlib.js x three.js(WebGL) で10000個のパーティクルを表示してみた | TM Life
tmlib.js x three.js(WebGL) でパーティクル表示してみました! 10000 個表示しても 30 fps でるのは脅威!! jsdo.it で作ってあるので実際に実行したり, fork して遊んでもらえると幸いです. Table of contens tmlib.js とは？ three.js とは？ コード 解説 『Global Game Jam 2013 【新宿会場】with tmlib.js』やります!! tmlib.js とは？ そもそも tmlib.js って何って方のために軽く紹介. 簡単に言うとゲームやツールを簡単に作るための JavaScript ライブラリです. 詳しくは下記のリンクにて tmlib.js とは 以前, 勉強会で発表させていただいたスライドです. GitHub tmlib.js は GitHub で管理しています. Documents
『Three.jsとBlenderによるWebGL』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。 html5、javascript、flashなどのクライアント開発を メインに担当しております、 菅家(@KA_ka_YY)と申します。 弊社3月に行われました、エンジニア、デザイナーを対象とした アプリコンテストというイベントにて WebGLを使用した野球盤ゲームを作成しました。 その際利用したThree.js（WebGLのjavascriptライブラリ）を用いた WebGLの使用方法を紹介させていただこうと思います。 （1）レンダリングまずは Blender というフリーの3Dモデリングソフトで 以下のようなキャラクターを作りました
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本で three.js といえばこの人！ 見事な three.js 実装を多数公開中 ヨモツネット - WebGL 総本山
WebGL + OculusRift で室内を歩き回れる素晴らしいデモンストレーション - どくらぼ
Psych - Official Website
Three.js - examples
three.js editor
WebGL procedural terrain [three.js]