ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
(function( win, doc, THREE ) { //----------------------- // Shader //----------------------- var BLUR_VERTEX_SHADER = ` varying vec2 vUV; void main() { vUV = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; var BLUR_FRAGMENT_SHADER = ` uniform sampler2D texture; uniform vec2 renderSize; uniform float blur; uniform int useBlur; varying vec2 vUV; vec4 getBlurColor( ve
基本 <script src="examples/js/postprocessing/EffectComposer.js"></script> <script src="examples/js/shaders/CopyShader.js"></script> <!-- EffectComposerに必要 --> <script src="examples/js/postprocessing/MaskPass.js"></script> <!-- EffectComposerに必要 --> <script src="examples/js/postprocessing/RenderPass.js"></script> <script src="examples/js/postprocessing/ShaderPass.js"></script> <script src="examples/j
I need to blur the frame buffer and I don't know how to get the frame buffer using THREE.js. I want to blur the whole frame buffer rather than blur each textures in the scene. So I guess I should read the frame buffer and then blur, rather than doing this in shaders. Here's what I have tried: Call when init: var renderTarget = new THREE.WebGLRenderTarget(512, 512, { wrapS: THREE.RepeatWrapping, wr
_先日、three.jsでビルボード相当を実現する方法をいくつか試した のだけど。ポリゴンを十字っぽく配置するやり方でもビルボードっぽく見えるのかどうかが気になってきたので、そのやり方も試してみたり。 「十字っぽく配置」ってのは、要するに下のような配置。 これなら、カメラ側を向かせる等の特別な処理をしなくても、何かソレっぽいものがそこに立ってる、ように一応見えてくれるんじゃないかとちょっとは期待できるわけで。 結果は以下。 _billboard_test4.html (DEMO) 透過部分がおかしくなってる…。 _THREE.Points()を使った時 と同じ症状が出ている気がする。 いくらなんでも、単にポリゴンを並べただけでこんな悲惨な見た目になってしまうのでは、three.jsは使えないヤツ扱いされるだろう…。ということは、この症状に対して、何らかの解決策が必ず用意されているはず。 な
WebGL Advent Calender ８日目。 まずここに、７日も過ぎての投稿になってしまったことをお詫び申し上げます・・・！ 完全に忘れていたとは口が裂けても言えないですね。 Three.jsは実は沢山のライブラリがある 試しにThree.jsのGithubリポをフォークしてみると、 本体 本体のソース・ファイル（たくさんの.jsファイル） Example build用スクリプト などなど、色んなファイルが置いてありますね。 今日見ていくのは、 Example > js ディレクトリです。 examples ├── js ├── cameras ├── controls ├── crossfade ├── curves ├── effects ├── exporters ├── geometries ├── libs ├── loaders ├── math ├── modifie
Webブラウザ向けの3DCGライブラリであるthree.jsで、3D描画に2D描画*1を織り交ぜる方法を紹介します。これにより、前景と背景に自由に2D画像を描画できるようになり、ゲームのHUD表示などが可能になります。 基本的な考え方 three.jsに限った話ではありませんが、3DCGで2D描画をしたい機会は多い割に、意外と簡単ではないことが多いです。 3DCGで2D描画を行う場合、大きく分けて2つの方法が考えられます。 1. 3D描画と全く別個に描画を行う。 2. 3D描画で適切にカメラやオブジェクトをセッティングする。 1はWebGLなど3DCG支援機能を一切使わない方法です。Webならcanvas要素の前後に適当にimg要素などを配置するだけで擬似的に実現できます。欠点としては、ちゃんと要素が重なるように位置を調整する必要がある点でしょうか。 2は3DCG支援機能を利用した上で上手
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
