わずか数十行のコードで物理演算付きシーンを構築できる WebGL フレームワーク WhitestormJS - WebGL 総本山
three.js をさらにラップしたフレームワーク 今回ご紹介するのは、WebGL 使いなら誰もが知っていると言っても過言ではない three.js を、さらにもう一段ラップすることでより使いやすくするフレームワーク、WhitestormJS です。 Github や公式サイトには Examples が掲載されていますが、WebGL ヘルパーライブラリである three.js など、コア部分に外部のライブラリを組み込むことによって、驚くほど少ないコードの記述で 3D のシーンを構築できるように工夫されています。 物理演算などのゲーム開発に必要となる機能も追加することで、かなり利便性の高いフレームワークになっているようです。 使いやすさを重視した設計、ドキュメントも完備 この WhitestormJS ですが、実は結構昔からその存在は知っていました。 ちょっと前に見た時は、一見すると開発が止
WebGL のレンダリングパフォーマンスを感覚的に知る | TECH BLOG
three.js で WebGL のはなし。（というか requestAnimationFrame だな。） stats.js で 60fps 出てるからだいじょーぶーと思っていても、実際のレンダリング時間が 1/60 秒で終わってるか 1/200 秒でおわってるかはわからねいのですね。それはブラウザ (Chrome) がリフレッシュレートに同期して (VSync) requestAnimationFrame を動かしているからで、通常の液晶モニターだとリフレッシュレートは 60Hz なので、60fps に制限される、というわけ。画面が書き換わる速度以上にデータを書き換えても無駄だから。 Chrome ではその VSync をしないように設定できる。しないようにすると、画面書き終わったあとにつぎの周期をまたなくなるので、可能な限り最大限の速度で requestAnimationFrame
エフェクト作成入門講座 Three.js編 RPGのセーブポイント風の魔法陣 - ICS MEDIA
昨今のWebサイトではWebGLを利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。 しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。 デモを別ウインドウで再生する ソースコードを見る ※このデモはThree.js r146とTypeScript 4.9によって書かれています。 本記事では、セーブポイント風なエフェクトの作成を通して、T
オープンなWebのカルチャーをVRに取り入れたい――WebVR開発者、ジョシュ・カーペンター氏に聞く
Mozilla主催のフロントエンド開発者のためのカンファレンス「ViewSource Conference」が、北米・オレゴン州ポートランドにて11月2～4日に開催された。カンファレンスでは、Mozillaが現在開発中の、Webブラウザで体験できるバーチャルリアリティ（仮想現実：VR）技術「WebVR」に関するセッションとデモ展示が行われた。今回は、WebVRの開発に携わるジョシュ・カーペンター氏に、WebVRの特徴と今後の展望についてインタビューを実施した。 聞き手：近藤佑子（編集部）、矢倉眞隆氏 協力：清水智公氏（Mozilla Japan）、浅井智也氏（同） ジョシュ・カーペンター（Josh Carpenter）氏 ジョシュ・カーペンター氏のセッション情報 セッション動画「Building a Virtual Reality Web Experience」 WebVRはステーキに対す
えっ!? WebVRってそういうこと？ サイト自体をVRで楽しめる「カヤックVR部」サイト - WebGL 総本山
今まさに隆盛の VR コンテンツがカヤックから登場！ 今回は、カヤックのエンジニアで @edo_m18 の HN でお馴染みの比留間さんから寄稿をいただきました。 カヤックではつい先日、VR 部という新しい活動をスタートしています。カヤックのエンジニア自身の言葉で語られるカヤック VR 部とは？ ぜひご覧になってみてください！ 先日公開されたカヤックVR部のサイト。実はこのサイト自体がWebVR化されており、Oculus Riftやハコスコ（スマートフォン向け簡易VRグッズ）を使うことで今話題の「VR」を手軽に楽しむことができるようになっています。 いっけん普通のサイトだけど実は… カヤックVR部のサイトにアクセスするとまず、ノイズでちりちりと動く「VR部」という大きなロゴが目に入ります。 その下にはOculus Riftの画像が続き、そのままカヤックが手がけたVRコンテンツの数々が動画や
WebGLで抑えておきたいシェーダーの定番画像処理8選 – ICS MEDIA
WebGLのシェーダーGLSLでの画像処理の作り方（モノクロ、セピア、モザイク、渦巻き） WebGLを使うと画像処理が実現でき、HTMLコンテンツに多彩なグラフィカル表現をもたらすことができます。たとえば、表示をモノクロームやモザイクにするといった画像エフェクトは簡単に実現できます。 WebGLはGPUの恩恵を受けれるため高速に実行でき、他の代替手法（canvas要素Context2Dオブジェクトによる画像処理等）よりも負荷が軽いのが利点です。 今回はWebGLの定番JSライブラリ「Three.js」とGLSLというシェーダー言語を使った、9種類の画像処理の実装方法を紹介します。ソースコードは「GitHub」からダウンロードして読み進めてください。 サンプルを試してみよう 次のサンプルでは複数のシェーダーを適用できます。画面左上のチェックボックスで画像加工を選択でき、ラジオボタンから画像と
カスタムシェーダによるハイレベルな CG 表現！ 被写界深度や環境マッピング、ブルーム表現など盛りだくさん！ - WebGL 総本山
また three.js か！ と思ったら…… 今回ご紹介するのは three.js を利用した WebGL デモンストレーションです。 個人的には最近どうも three.js 関連の作品ばかり紹介しているので、最初はまた three.js か……と思ってしまったのですが、今回のやつはちょっとすごいのでご紹介します。 正直な話、あくまでも良い意味でですがここまで「three.js っぽくない three.js 作品」は初めてかもしれない…… カスタムシェーダを大量に利用したハイレベルデモ 今回のデモはページが表示されるとまずクオリティレベルを選択するページが表示されます。 タブレットやスマートフォンでも再生されることを想定してこのような作りになっているようですね。 low を選択した場合には各種のエフェクト処理が省略され簡易的に表示できるみたいですが、それでも十分に綺麗に見えると思います。逆
WebGLで伝わる立体地図コンテンツ。 御嶽山噴火時の証言を集めた『NHK 御嶽山「噴火の証言」』開発秘話 - WebGL 総本山
御嶽山噴火時、その場にいた人たちの証言を集めたコンテンツ『NHK 御嶽山「噴火の証言」』。 Three.jsの利用やDOMとの連携など、製作者の立場から、WebGLでコンテンツを作る利点や注意すべき点について語ります。 ※本稿は実際にサイト作成に関わった面白法人カヤックのフロントエンドエンジニアのごんさんからご寄稿いただきました！ ありがとうございます！ 50名以上の方が亡くなり、戦後最悪の火山災害となった2014年9月27日の御嶽山噴火。 『NHK 御嶽山「噴火の証言」』は、御嶽山の噴火時、その場にいた人たちの証言を集めたWebサイトです。 3Dモデル上にプロットされた証言をクリックしたり、カメラを自由に動かして、御嶽山を眺めることで、噴火当時の状況を見ることができます。 今回は、開発を担当した面白法人カヤックのフロントエンジニアが、全面WebGLで制作した本サイトの内容について、制作面
たった3KBのコードで3DCGモデルが歌って踊ってアングルも操作できる！ jQueryベースのライブラリでMMDデータを活用したWebGLコンテンツを作ろう
はじめに 数あるHTML5の機能の中でも、特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今一つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。 three.jsの登場により、実装のハードルはだいぶ下がりました。しかし、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。 今回紹介する「jThree（ジェイスリー）」は、そんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら、手軽にWebGLコンテンツを作ることができます。 本記事で
Three.js - billboard effect, maintain orientation after camera pans
I have a plane geometry that is always set to face the camera via: plane.lookAt(camera.position); in the update loop. I am using OrbitControls to control the camera. When rotating or zooming the scene, the plane continues to face the camera as expected. However, after panning the scene, while the plane continues to face the camera, rotating the camera appears to rotate the plane as well, so that f
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 を用いて
【WebGL特集】第6回：他のCGツールからBlenderへの移植｜株式会社モックス
※この記事は2013年の記事を2018年6月に加筆修正したものです。three.jsの使用バージョンはr92です。 【前記事】 【WebGL特集】第1回：WebGLって何？ 【WebGL特集】第2回：回転する立方体 【WebGL特集】第3回：カメラをグリグリ 【WebGL特集】第4回：Blenderでモデル出力 【WebGL特集】第5回：Blenderでアニメーション出力 ちょっと番外編です。前回まででBlednerからのキャラクターアニメーションのwebGL出力が実現しました。 では、Maya,3dsMaxなどの他の3DCGソフトではどうなるのでしょうか。 2013年頃では、アニメーションの出力には対応できていませんでした。しかし2018年の現在では制限があるものの、Maya,3dsMaxなどの他の3DCGソフトからのアニメーションの出力が可能になってきています。慣れたツールで直接出力で
フラクタル地形 - ずっと君のターン
先日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 の最新版が無難です）、おもいっきり堪能しちゃってください！ 長編デモ 音楽に合わせてインパクトのある映像を展開していく、ちょっとしたストーリー性のあるデモなどを集
多彩な表現力のWebGLを扱いやすくする「Three.js」
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（2/5 ページ） さまざまな形状を扱う 前のページでは球体を1つだけ表示しましたが、もちろんThree.jsで表示できる形状は球体だけではありません。Three.jsで表示する形状を定義する方法には、大きく分けて以下の3つがあります。 プリセットの形状を利用する プログラムで形状を生成する CGツールで作成したデータを読み込む 以降では、これら3つの方法を個別に解説します。サンプルコードは前ページのサンプルからの変更部分のみを掲載しますので、ソース全体が見たい方は、「実際のサンプルを見る」のリンクでサンプルを表示し、そのページのソースを表示させてください。 プリセットの形状を表示する 前ページのサンプルではSphereGeometryを使って球体を生成しましたが、Three.jsにはほかにも
WebGLの能力を引き出すプログラマブルシェーダー
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
Creating skeletal animation in Blender and exporting it to three.js. | DevMatrix
Today I’ve faced a rather difficult problem to solve. Creating model in Blender, animating it with armature and exporting the animation to three.js (r56) JSON format. I was working on for 2 days now and it was really a harsh job to be done, especially that three.js is still in alpha version and a lot of features are not stable and fully reliable. So now I’m gonna explain how to perform the mention
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本で three.js といえばこの人！ 見事な three.js 実装を多数公開中 ヨモツネット - WebGL 総本山
Three.js - examples
Sign in - Google Accounts