three.js をさらにラップしたフレームワーク 今回ご紹介するのは、WebGL 使いなら誰もが知っていると言っても過言ではない three.js を、さらにもう一段ラップすることでより使いやすくするフレームワーク、WhitestormJS です。 Github や公式サイトには Examples が掲載されていますが、WebGL ヘルパーライブラリである three.js など、コア部分に外部のライブラリを組み込むことによって、驚くほど少ないコードの記述で 3D のシーンを構築できるように工夫されています。 物理演算などのゲーム開発に必要となる機能も追加することで、かなり利便性の高いフレームワークになっているようです。 使いやすさを重視した設計、ドキュメントも完備 この WhitestormJS ですが、実は結構昔からその存在は知っていました。 ちょっと前に見た時は、一見すると開発が止
three.js で WebGL のはなし。（というか requestAnimationFrame だな。） stats.js で 60fps 出てるからだいじょーぶーと思っていても、実際のレンダリング時間が 1/60 秒で終わってるか 1/200 秒でおわってるかはわからねいのですね。それはブラウザ (Chrome) がリフレッシュレートに同期して (VSync) requestAnimationFrame を動かしているからで、通常の液晶モニターだとリフレッシュレートは 60Hz なので、60fps に制限される、というわけ。画面が書き換わる速度以上にデータを書き換えても無駄だから。 Chrome ではその VSync をしないように設定できる。しないようにすると、画面書き終わったあとにつぎの周期をまたなくなるので、可能な限り最大限の速度で requestAnimationFrame
昨今のWebサイトでは3D表現を利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。 しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。 デモを別ウインドウで再生する ソースコードを見る ※このデモはThree.js r175（WebGPU）とTypeScript 5.8によって書かれています。 本記事では、セーブポイント風なエフェクトの作
Mozilla主催のフロントエンド開発者のためのカンファレンス「ViewSource Conference」が、北米・オレゴン州ポートランドにて11月2～4日に開催された。カンファレンスでは、Mozillaが現在開発中の、Webブラウザで体験できるバーチャルリアリティ（仮想現実：VR）技術「WebVR」に関するセッションとデモ展示が行われた。今回は、WebVRの開発に携わるジョシュ・カーペンター氏に、WebVRの特徴と今後の展望についてインタビューを実施した。 聞き手：近藤佑子（編集部）、矢倉眞隆氏 協力：清水智公氏（Mozilla Japan）、浅井智也氏（同） ジョシュ・カーペンター（Josh Carpenter）氏 ジョシュ・カーペンター氏のセッション情報 セッション動画「Building a Virtual Reality Web Experience」 WebVRはステーキに対す
今まさに隆盛の VR コンテンツがカヤックから登場！ 今回は、カヤックのエンジニアで @edo_m18 の HN でお馴染みの比留間さんから寄稿をいただきました。 カヤックではつい先日、VR 部という新しい活動をスタートしています。カヤックのエンジニア自身の言葉で語られるカヤック VR 部とは？ ぜひご覧になってみてください！ 先日公開されたカヤックVR部のサイト。実はこのサイト自体がWebVR化されており、Oculus Riftやハコスコ（スマートフォン向け簡易VRグッズ）を使うことで今話題の「VR」を手軽に楽しむことができるようになっています。 いっけん普通のサイトだけど実は… カヤックVR部のサイトにアクセスするとまず、ノイズでちりちりと動く「VR部」という大きなロゴが目に入ります。 その下にはOculus Riftの画像が続き、そのままカヤックが手がけたVRコンテンツの数々が動画や
WebGLのシェーダーGLSLでの画像処理の作り方（モノクロ、セピア、モザイク、渦巻き） WebGLを使うと画像処理が実現でき、HTMLコンテンツに多彩なグラフィカル表現をもたらすことができます。たとえば、表示をモノクロームやモザイクにするといった画像エフェクトは簡単に実現できます。 WebGLはGPUの恩恵を受けられるため高速に実行でき、他の代替手法（canvas要素Context2Dオブジェクトによる画像処理等）よりも負荷が軽いのが利点です。 今回はWebGLの定番JSライブラリ「Three.js」とGLSLというシェーダー言語を使った、9種類の画像処理の実装方法を紹介します。ソースコードは「GitHub」からダウンロードして読み進めてください。 サンプルを試してみよう 次のサンプルでは複数のシェーダーを適用できます。画面左上のチェックボックスで画像加工を選択でき、ラジオボタンから画像
今回は、Three.jsの「TextGeometry 」について書きます。 こちらは、3Dのテキストを表示させることができるジオメトリ （形状）です。 こんなのが表示できます。 横から見ると、 こんな感じです。 TextGeometryを使用するには、気をつけることが、一つあります。 TextGeometryを使うには、typeface.js形式のフォントファイルを読み込む必要があります！ typeface.js形式のフォントファイルは、Three.jsダウンロードフォルダ内の examples/fonts/〜typeface.js にあります。 6,7種類あると思います。 で、Three.jsのファイル読み込み後に、 <script src="helvetiker_bold.typeface.js"></script> を追加してください。今回は、helvetiker_bold.type
また three.js か！ と思ったら…… 今回ご紹介するのは three.js を利用した WebGL デモンストレーションです。 個人的には最近どうも three.js 関連の作品ばかり紹介しているので、最初はまた three.js か……と思ってしまったのですが、今回のやつはちょっとすごいのでご紹介します。 正直な話、あくまでも良い意味でですがここまで「three.js っぽくない three.js 作品」は初めてかもしれない…… カスタムシェーダを大量に利用したハイレベルデモ 今回のデモはページが表示されるとまずクオリティレベルを選択するページが表示されます。 タブレットやスマートフォンでも再生されることを想定してこのような作りになっているようですね。 low を選択した場合には各種のエフェクト処理が省略され簡易的に表示できるみたいですが、それでも十分に綺麗に見えると思います。逆
御嶽山噴火時、その場にいた人たちの証言を集めたコンテンツ『NHK 御嶽山「噴火の証言」』。 Three.jsの利用やDOMとの連携など、製作者の立場から、WebGLでコンテンツを作る利点や注意すべき点について語ります。 ※本稿は実際にサイト作成に関わった面白法人カヤックのフロントエンドエンジニアのごんさんからご寄稿いただきました！ ありがとうございます！ 50名以上の方が亡くなり、戦後最悪の火山災害となった2014年9月27日の御嶽山噴火。 『NHK 御嶽山「噴火の証言」』は、御嶽山の噴火時、その場にいた人たちの証言を集めたWebサイトです。 3Dモデル上にプロットされた証言をクリックしたり、カメラを自由に動かして、御嶽山を眺めることで、噴火当時の状況を見ることができます。 今回は、開発を担当した面白法人カヤックのフロントエンジニアが、全面WebGLで制作した本サイトの内容について、制作面
没入型3Dヘッドアップディスプレイの「Oculus Rift」向けに、JavaScriptライブラリーのthree.jsを使い仮想空間内で3Dアニメーションをリアルタイムで作成可能なライブコーディングWebアプリが開発されました。開発者のBrian Peirisさんは、実際にアプリを使って仮想空間内で3Dアニメーションを作成している様子をYouTubeに公開しています。 Live coding in VR with the Oculus Rift, Firefox WebVR, JavaScript and Three.js - YouTube 仮想空間にさっそうと現われたコードエディター。 カタカタカタとコードが入力されると…… 仮想空間の上の方に黒いボックスが出現しました。 黒いボックスは小型化して、色が赤に変化。 さらにコードが入力されていき…… 赤い立方体は9つに増えました。 位置
はじめに 数あるHTML5の機能の中でも、特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今一つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。 three.jsの登場により、実装のハードルはだいぶ下がりました。しかし、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。 今回紹介する「jThree（ジェイスリー）」は、そんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら、手軽にWebGLコンテンツを作ることができます。 本記事で
three.js は skeletal animation （ボーンやリグ）を持った 3D モデルを読み込み、再生することができます。3D モデルを three.js 用に書き出すため一番いいツールは Blender です。 Blender 上でボーンとアニメーションをつけていきます。Dope Sheet を使って、アニメーションを複数持たせると、three.js 上でも異なる複数のアニメーションとして利用することができます。 なお、Blender 上のボーンをつけて書きだすまでの操作は動画にしているので合わせて参考にどうぞ。 1. アニメーションを Bake するFK のみでアニメーションをさせている場合には、この設定は必要ありません。 three.js 上では基本的に FK のみ対応しています。IK や物理演算による自動計算には対応していません。そのため、FK 以外で動かしているボーン
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
昨日公開した作例 Santa’s Boxes! の内容をざっくりまとめました。 Ground 去年のアドベントカレンダーに書いた内容をそのままで、ディフューズ マップを変更して雪原を作りました。three.js の機能でバンプ マップを適用したところ、IE 11 でレンダリングできなかったため、ディフューズ マップのみ適用しています。 単品 demo Skybox three.js で cube ジオメトリーを作成し、スカイボックス用のディフューズ マップを適用しているだけです。立方体の内側を表面として表示するためには material の side プロパティーに THREE.BackSide を指定します。 スカイボックス用に利用したテクスチャーは以下のような、シームレスな 6 面になっています。 単品 demo Snowing 雪は THREE.ParticleSystem を用いて
※この記事は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ソフトからのアニメーションの出力が可能になってきています。慣れたツールで直接出力で
スマホでも動く物理演算で転がる3Dサイコロを作ったのでその解説 カテゴリ：3D 2013年9月 1日 16:46 CSS3DRendererはexamplesの中 ルービックキューブの解説は少しお休みして、Three.jsのCSS3DRendererを使ってサイコロを作った話をしようと思います。といっても、ルービックキューブを作る上で使用した概念などもあるので、まったくの無関係というわけではありません。 今回のポイントは「CSS3DRenderer」です。 これ、実はThree.jsだけを読み込んでも使用できません。実験段階だからなのか、Three.jsのgithubのリポジトリ内にある「examples」の中にこっそり含まれています。 実装サンプル なので、まずはこれを取り出してThree.jsと一緒に読み込ませます。 ちなみに今回作成したものは以下のようなサイコロです。（CANNON.
先日THREE.jsでのポリゴンとテクスチャの使い方を覚えたので、なんか面白い使い道ないかなと検索して「フラクタル地形」というのを見つけました。 Wikipediaによると 正方形を4つの同じ大きさの小さい正方形に分割し、その中心の点を無作為な値で垂直方向に変位させる。この過程を4つに分けられた各正方形についても繰り返し、再帰的に実施して必要な詳細レベルに到達するまで行う。 ということらしく、このたった2文とアニメーションGIFでだいたい理解できる程度には簡単そうだったのでやってみました（説明とアニメーションGIFが合ってないけどまぁ言いたいとは分かる・・・）。 おお、たしかに山っぽい。 もちろんリロードするとまた別の地形が生成されます。 ソース見てないけどTHREE.jsについてくるこれとかもたぶん同じ事やってるんじゃないかな。 ・・・ 今回特にTHREE.js的な見所はほとんどないんで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
