【重要】サービス終了のお知らせ

Forked from: cx20's [GLSL] Three.js + ParticleSystem でコマアニメしてみるテスト(その5 View Diff (138)

Fork
1
Fav
0
View
1533
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 260 lines
  • HTML 57 lines
  • CSS 11 lines
[GLSL] Three.js + ParticleSystem でコマアニメしてみるテスト(その6)

※ 本サンプルのコマアニメはスプライトでなく計算で行っています。

<対応した点>
・ドット絵でドット絵を描くよう調整
・GLSL の頂点シェーダを用いて Particle をジャンプさせるよう対応
・テクスチャはCanvasで生成するよう対応(画像ファイルを使わないよう変更)

<対応できていない点>
・Windows では動作するようですが、Mac だと GLSL のフラグメントシェーダの一部がうまくいかないようです。。。
// 以下コメントアウトした箇所
/*
float depth = gl_FragCoord.z / gl_FragCoord.w;
const vec3 fogColor = vec3( 0.0 );

float fogFactor = smoothstep( 200.0, 600.0, depth );
gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
*/
 
上記コードは、Three.js サンプルから移植したものだが、確認したところ元となったサンプルも Mac では動作しない模様。。。

 ■ three.js webgl - custom attributes
 http://threejs.org/examples/webgl_custom_attributes_particles3.html

<変更履歴>
・2015/09/18 ライブラリバージョンを「最新」→「r71」に変更。
・2014/12/06 初版作成
  • [GLSL] Three.js + ParticleSystem でコマアニメしてみるテスト(その6)
  • [GLSL] Three.js + ParticleSystem でコマアニメしてみるテスト(その6)

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

cx20

Author

プログラマ(マイクロソフト系の言語を使用することが多いです。) JavaScript のライブラリを色々と試して遊んでます。

■ 各種 WebGL ライブラリによる基本サンプル一覧 http://qiita.com/cx20/items/0fa19c96aa6470d98807

■ 各種 WebGLライブラリと3D物理演算ライブラリの組み合わせ一覧 http://qiita.com/cx20/items/3ebed669fb9c9e797935

■ glTF 対応ライブラリのサンプル一覧 https://github.com/cx20/gltf-test

■ Grimoire.js サンプル一覧 http://jsdo.it/tag/Grimoire.js

■ GLBoost サンプル一覧 http://jsdo.it/tag/GLBoost

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by