Forked from: cx20's [WebGL] Grimoire.js で3次元リサージュ図形を描いてみるテスト View Diff (60)

Fork
4
Fav
0
View
519
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 57 lines
  • HTML 70 lines
  • CSS 11 lines
[WebGL] Grimoire.js でハーモノグラフみたいな何かを描いてみるテスト(シェーダ編)

<対応した点>
・GLSL の頂点シェーダを用いて座標を計算させるよう対応。
・リサージュ図形からハーモノグラフに変更
 x = A1 * sin(f1 * t + p1) * exp(-d1 * t) + A2 * sin(f2 * t + p2) * exp(-d2 * t)
 y = A3 * sin(f3 * t + p3) * exp(-d3 * t) + A4 * sin(f4 * t + p4) * exp(-d4 * t)

<対応出来ていない点>
・本サンプルのシェーダーでにはランダム化処理が入っていない為、厳密にはハーモノグラフとは異なります。

 f1 = sin(_time/1000.0);
 f2 = mod(_time/1000.0, 0.5);
 f3 = mod(_time/1000.0, 1.0);
 f4 = 1.0;
 p1 = _time/1000.0;

 下記のランダム化処理を JavaScript 側で算出し、uniform 変数で渡すなどの対応が必要。
 function randomHarmonograph() {
  f1 = (f1 + Math.random() / 40) % 10;
  f2 = (f2 + Math.random() / 40) % 10;
  f3 = (f3 + Math.random() / 40) % 10;
  f4 = (f4 + Math.random() / 40) % 10;
  p1 += (Math.PI*2 * 0.5 / 360);
 }

<変更履歴>
2017/07/29 grimoire-preset-basic.js v1.8.6 → v1.10.19 に変更。スクリプトタグに記載したシェーダをマテリアル名で参照するよう対応。
2017/05/21 初版作成

<参考>
■ [簡易版] WebGL でハーモノグラフみたいな何かを描いてみるテスト
http://jsdo.it/cx20/synR
  • [WebGL] Grimoire.js でハーモノグラフみたいな何かを描いてみるテスト(シェーダ編)
  • [WebGL] Grimoire.js でハーモノグラフみたいな何かを描いてみるテスト(シェーダ編)

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

■ 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