タグ別アーカイブ: WebGL

[three.js] CreateJSとの組み合わせ (2)

three.jsCreateJS を組み合わせてみるよ。 :boy:
CreateJS の上に three.js を重ねてるよ。three.js の背景を透過させてるのね。 :bouzu:

threejs_createjs2

WebGLRendererで描画するよ。
BoxGeometry, LineBasicMaterial, Line, Group を使ってみたよ。 :bouzu:
頂点表記には、SpriteMaterial, Sprite を使ってみた。 :girl:
んでもって、ImageUtils, Texture も使ったりして。 :beer:

CreateJSのスライダーで、直方体を回転できるようにしてるよ。 :sun:
続きを読む [three.js] CreateJSとの組み合わせ (2)

[three.js] CreateJSとの組み合わせ (1)

three.jsCreateJS を組み合わせてみるよ。 :boy:
three.js の上に CreateJS を重ねてるよ。CreateJS の背景を透過させてるのね。 :bouzu:

threejs_createjs1

WebGLRendererで描画するよ。
BoxGeometry, LineBasicMaterial, Line, Group を使ってみたよ。 :bouzu:
頂点表記には、SpriteMaterial, Sprite を使ってみた。 :girl:
んでもって、ImageUtils, Texture も使ったりして。 :beer:

CreateJSのスライダーで、直方体を回転できるようにしてるよ。 :sun:
続きを読む [three.js] CreateJSとの組み合わせ (1)

[three.js] 直方体 (5) ~辺と頂点と面~

three.jsを使って、直方体を作るよ。 :boy:

threejs_cuboid5

WebGLRendererで描画するよ。
BoxGeometry, LineBasicMaterial, Line, Group を使ってみたよ。 :bouzu:
頂点表記には、SpriteMaterial, Sprite を使ってみた。 :girl:
んでもって、ImageUtils, Texture も使ったりして。 :beer:

OrbitControls で、ぐるんぐるん動かせるようにしてみたよ。 :sun:
続きを読む [three.js] 直方体 (5) ~辺と頂点と面~

[three.js] 直方体 (4) ~辺と頂点~

three.jsを使って、直方体を作るよ。 :boy:

threejs_cuboid4

WebGLRendererで描画するよ。
BoxGeometry, LineBasicMaterial, Line, Group を使ってみたよ。 :bouzu:
頂点表記には、SpriteMaterial, Sprite を使ってみた。 :girl:
んでもって、ImageUtils, Texture も使ったりして。 :beer:
続きを読む [three.js] 直方体 (4) ~辺と頂点~

[three.js] 直方体 (3) ~辺と頂点~

three.jsを使って、直方体を作るよ。 :boy:

threejs_cuboid3

WebGLRendererで描画するよ。
BoxGeometry, LineBasicMaterial, Line, Group を使ってみたよ。 :bouzu:
頂点表記には、TextGeometry, MeshBasicMaterial, MeshFaceMaterial, Mesh を使ってみた。 :girl:
続きを読む [three.js] 直方体 (3) ~辺と頂点~

[three.js] モデル (5) ~ねぎ振りミク (影付き)~

three.jsを使って、モデルを作るよ。 :boy:

threejs_model5

WebGLRendererで描画するよ。
ColladaLoader を使ってみたよ。 :bouzu:

さらに、DirectionalLight も使ったよ。 :cake:  影もつけてみたよ。
レンダラー、ライト、影を落とす物体、影を落とされる物体の4つに設定が必要だよ! :beer:

OrbitControls で、ぐるんぐるん動かせるようにしてみたよ。 :sun:

@rect 先生 :hakase: の「note.x | [Papervision3D]ねぎ振り完了」から、Colladaデータとテクスチャをダウンロードさせていただきました。 :doki:
続きを読む [three.js] モデル (5) ~ねぎ振りミク (影付き)~

[pixi.js] 金魚鑑賞 (4)

水槽内を泳ぐ金魚を上から覗いてみたよ。 :bouzu:
pixijs で試しちゃった。 :girl:

pixijs_school4

DisplacementFilter を使って、水面の光もゆらゆらさせてみた。 :boy:
全体のゆらゆらとは異なるゆらゆらで。 :beer:
続きを読む [pixi.js] 金魚鑑賞 (4)

[pixi.js] 金魚鑑賞 (3)

水槽内を泳ぐ金魚を上から覗いてみたよ。 :bouzu:
pixijs で試しちゃった。 :girl:

pixijs_school3

DisplacementFilter を使って、水面をゆらゆらさせてみた。 :boy:
ブラーかけようとすると、影が描画できないっぽい。 :cloud:
続きを読む [pixi.js] 金魚鑑賞 (3)

[pixi.js] 金魚鑑賞 (2)

水槽内を泳ぐ金魚を上から覗いてみたよ。 :bouzu:
pixijs で試しちゃった。 :girl:

pixijs_school2

RenderTexture を使って、影をつけてみた。 :boy:
ブラーをかけても軽い! :sun:
続きを読む [pixi.js] 金魚鑑賞 (2)

[pixi.js] MagicLight (4) ~Sprite, TouchEvent~

pixijsを使って、MagicLightを作ってみるよ。 :bouzu:

pixijs_magiclight4

SpriteクラスTextureクラスで表示してみたよ。 :boy:
画面をドラッグすると、光が発生するよ! :cake:
続きを読む [pixi.js] MagicLight (4) ~Sprite, TouchEvent~