サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチングGPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022
概要本エントリーはGPUパーティクルを飛ばすために筆者が勉強した軌跡です。本エントリーの対象者シェーダーが何なのかは知ってる ちょっとくらいならGLSL書いたことある だけどGPUに演算をさせるのはやったことない サンプルのスクリプトがわけわからん こんな人を想定して書いてます。 GLSLについての基本中の基本については解説しません。 そこらへんがまだわからない方は本エントリーについてはさらっと目をとおして、 初心者向けの学習資料を読み漁ってください！ GPGPUでパーティクルたくさん飛ばしたいからサンプルを覗いてみる three.jsの素晴らしいサンプル達 https://threejs.org/examples/webgl_gpgpu_birds.html https://threejs.org/examples/webgl_gpgpu_protoplanet.html http
昨今のWebサイトでは3D表現を利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。 しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。 デモを別ウインドウで再生する ソースコードを見る ※このデモはThree.js r175（WebGPU）とTypeScript 5.8によって書かれています。本記事では、セーブポイント風なエフェクトの作
タイトルの通り。 去年末くらいからWebGLというかthree.jsの勉強始めて、ある程度複雑な作品が作れるようになった。現在7つほどhttp://p5aholic.me/で作品を公開している。 点と線が繋がってごにょごにょするやつとか、近い点で面作ってごにょごにょするやつとか、そういうのをthree.jsで作るにはどんな知識が必要かというのを書いておく。本当はthree.jsの入門サイト作って体系的に解説したいところだけど、入門サイトはP5 Code Schoolで手一杯です。入門サイト運営するのくっそ面倒なんですわ。 大前提JavaScriptはオブジェクトとか含めてしっかり理解していること。 three.jsの基礎知識 当たり前だけど、three.jsの基礎は押さえてないといけない。僕はLearning Three.js読んだ。英語だけどすごい読みやすいのでオススメ。 Learni
RICOH THETA SのDualfisheye動画(変換前の動画)をThree.jsで表示してみた。 計算とか教えてもらいながら自分なりに考えて実装したのでおかしいところがあるかもしれないが忘れないようにメモしておく(計算難しい)。 ソースコード：https://gist.github.com/mechamogera/5635338a1075baadba0b 動作サンプル：http://bl.ocks.org/mechamogera/5635338a1075baadba0b (2016/01/25追記 コミットミスってソースコード & 動作サンプルぶっ壊してました、修復しました) 上のコードだとmp4動画を視聴しているが、WebRTCで取得したTHETAのライブストリーミング画像でもちゃんと表示できた。 2016/01/26追記 THETA S のUSBライブストリーミングをブラウザで
貴重な実装例がたくさん！ 今回ご紹介するのは、Greg Tatum 氏の新しい作品を収録した Three.js Sandbox です。 Sandbox と名前にありますが、GLSL Sandbox のようなシェーダがメインのコンテンツではなく、より実践的な Three.js の実装を収録したデモ集のような感じのコンテンツになっています。ゲームやアートも手がける多彩な才能を持つ Greg Tatum 氏のデモをぜひご覧になってみてください。 様々なテクニックを駆使した作品たち 今回の作品は、題名に Experiments と入っているだけあって、いくつかのデモが収録された作品群という形になっています。 全体的に幾何学模様を描くものが中心ですが、どれも凝った演出がなされており、見ていて非常に楽しい出来栄えになっています。 こちらは SoundCloud と連携するデモ。 静止画ではわかりませ
WebGLコンテンツをjQueryで作るJavaScriptライブラリ『jThree』
Three.jsのRaycasterクラスを使って、画面内のオブジェクトを取得するサンプル。 ざっくり手順を書くと、 マウス位置を取得 マウス位置をWebGL内の座標系に変換 マウス位置からまっすぐに伸びる光線ベクトルを生成 その光線とぶつかったオブジェクトを得る という手順。色々めんどくさいこともThree.jsがやってくれるので、以下のようにするだけで該当オブジェクトをさくっと得ることができる。 [2015.01.18 upate] unprojectメソッドは、Vectorクラスに移動したようです。 function onmousemove(e) { var rect = e.target.getBoundingClientRect(); // スクリーン上のマウス位置を取得する var mouseX = e.clientX - rect.left; var mouseY = e.c
Three.js には豊富なシェーダも付属していますが、オリジナルのシェーダを書くことも出来ます。開発段階では付属のシェーダを使うのがお手軽ですが、見た目を追及するにはシェーダに手を入れる必要も出てきます。ということで、 Three.js でのオリジナルシェーダの書き方を調べてみました。 今回は次のサイトを参考にしました。 SHAGERS-part2- ShaderMaterial THREE.ShaderMaterial を使うとオリジナルシェーダを書くことが出来ます。上記のサイトでは THREE.MeshShaderMaterial を使っていますが、現状は内部的に同じものになっています。 26 行目からの initShaderMaterial() 内で ShaderMaterial を作成し、あとで作る Mesh に適用しています。 ShaderMaterial を作成しているところ
Three.js で音楽のビジュアライズを試してみるテスト（その４） ＜対応した点＞ ・TimeDomainData と FrequencyData の両方を表示するよう対応。 getByteTimeDomainData(Uint8Array array) …Uint8Array に信号の生データを取得する。 getByteFrequencyData(Uint8Array array) … Unit8Array にスペクトル情報を取得する。 ・「stop」ボタンを追加。 ＜変更履歴＞ 2015/03/20 音声データをogg形式→mp3形式に変更 2014-08-03 初版 ＜参考＞ ■ Canvas で音楽のビジュアライズを試してみるテスト（その２） http://jsdo.it/cx20/etk3 // forked from cx20's "Three.js で音楽のビジュアライズ
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
Three.js How To TutorialPart III of the particle enginebreaks down the sphere type and fire. Fireball //fireball var settings = { positionStyle : Type.SPHERE, positionBase : new THREE.Vector3( 0, 0, 1 ), positionRadius : 0.5, velocityStyle : Type.SPHERE, speedBase : 1, speedSpread : 0, particleTexture : THREE.ImageUtils.loadTexture( 'images/smokeparticle.png' ), sizeTween : new Tween( [0,4], [0,10] ), opacityTween : new
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
