2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022Read less
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022Read less
Three.jsのGPGPUのサンプルが難しすぎるから解体して勉強してみる - Qiita
概要 本エントリーはGPUパーティクルを飛ばすために筆者が勉強した軌跡です。 本エントリーの対象者 シェーダーが何なのかは知ってる ちょっとくらいならGLSL書いたことある だけどGPUに演算をさせるのはやったことない サンプルのスクリプトがわけわからん こんな人を想定して書いてます。 GLSLについての基本中の基本については解説しません。 そこらへんがまだわからない方は本エントリーについてはさらっと目をとおして、 初心者向けの学習資料を読み漁ってください！ GPGPUでパーティクルたくさん飛ばしたいからサンプルを覗いてみる three.jsの素晴らしいサンプル達 https://threejs.org/examples/webgl_gpgpu_birds.html https://threejs.org/examples/webgl_gpgpu_protoplanet.html http
エフェクト作成入門講座 Three.js編 RPGのセーブポイント風の魔法陣 - ICS MEDIA
昨今のWebサイトではWebGLを利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。 しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。 デモを別ウインドウで再生する ソースコードを見る ※このデモはThree.js r146とTypeScript 4.9によって書かれています。 本記事では、セーブポイント風なエフェクトの作成を通して、T
three.jsでジェネラティブアートっぽいことするのに必要な知識 - Processing中毒者の嘔吐物
タイトルの通り。 去年末くらいからWebGLというかthree.jsの勉強始めて、ある程度複雑な作品が作れるようになった。現在7つほどhttp://p5aholic.me/で作品を公開している。 点と線が繋がってごにょごにょするやつとか、近い点で面作ってごにょごにょするやつとか、そういうのをthree.jsで作るにはどんな知識が必要かというのを書いておく。本当はthree.jsの入門サイト作って体系的に解説したいところだけど、入門サイトはP5 Code Schoolで手一杯です。入門サイト運営するのくっそ面倒なんですわ。 大前提 JavaScriptはオブジェクトとか含めてしっかり理解していること。 three.jsの基礎知識 当たり前だけど、three.jsの基礎は押さえてないといけない。僕はLearning Three.js読んだ。英語だけどすごい読みやすいのでオススメ。 Learni
THETAのDualfisheye動画をThree.jsで表示してみた - Qiita
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ライブストリーミングをブラウザで
珠玉の Three.js を使ったデモ多数！ アーティストでもある作者のセンスが光る Experiments - WebGL 総本山
WebGLコンテンツをjQueryで作るJavaScriptライブラリ『jThree』
WebGLコンテンツをjQueryで作るJavaScriptライブラリ『jThree』
Three.jsのRaycasterを使って、画面内のオブジェクトを得る - Qiita
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 で音楽のビジュアライズを試してみるテスト（その４） - jsdo.it - Share JavaScript, HTML5 and CSS
WebGLの能力を引き出すプログラマブルシェーダー
Three.js How To Tutorial
Part III of the particle engine breaks 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ページを開く
gmork.in
[three.js] 炎のパーティクル (1) | にゃあプロジェクト
Three.js Blue Particles - jsdo.it - Share JavaScript, HTML5 and CSS
ニコニコ動画（Re:仮）
WebGL/OpenGL: Rotate camera according to device orientation
寿司ゆき - 3D
relax. let the music engulf you.
WebGL procedural terrain [three.js]