[Pixel Shader]GLSL Sandboxでデジタルなタイマーを作る

無題
Pocket

GLSL Sandboxでタイマーを作ってみました。

シンプルなように見えて意外と奥が深く、作ってみると結構勉強になります。

▼ サンプル
GLSL Sandbox
GLSL タイマー

▼ 前回の記事
GLSL Sandboxで遊ぼう | notargs.com

1. 四角形を表示

まず全ての基本、四角形を表示してみましょう。

入力された位置のx座標、y座標それぞれの絶対値を取り、どちらも1以下(つまり、-1 > x > 1かつ-1 > y > 1)なら1、そうでなければ0を返す関数を定義します。

この関数に渡す座標をあらかじめローカル空間に変形させておくことで、位置、スケール、回転などを表現できます。

 

2. 数字の表示

数字はデジタル数字を参考に、7つの四角形を使って表示します。

コードをシンプルにするため、ビットマスクを使って個々の四角形を表示するかを決定します。

無題

例えば、数字の「5」であれば、0x01 + 0x02 + 0x08 + 0x20 + 0x40 = 0x6bで、0x6bになります。

無題

コンパイル時に最適化が走ってしまうため、if文は上手く動きません。

代わりに三項演算子を使いましょう。

また、GLSL Sandboxはbit演算も使えないため、割り算、pow、modなどを使ってbit演算を表現します。

 

数字とbitmaskを関連付ける関数も用意しておきます。

 

3. Main関数

起動からの経過時間を元にタイマーを表示します。

 

まとめ

全てのコードをまとめたものがこちらです。

これ自体はかなりシンプルなので、装飾を足したり、3Dでの表示やアナログ時計、リセットボタンの追加などをしてみても面白いと思います。

 

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

(Required)

Proudly powered by WordPress   Premium Style Theme by www.gopiplus.com