7 lines GLSL Graphics CompoTutorial

7 Lines GLSL Graphics Compo に挑戦してみよう！

• これは Tokyo Demo Fest 2014(http://tokyodemofest.jp/2014) の 7 Lines GLSL Graphics Compo のチュートリアルです。

• 7 Lines GLSL Graphics Compo ではGLSL の Fragment Shader を用いて 7 行(7x80 characters) で グラフィックスを表示します。

• すべての作品は最新の GLSL sandbox で表示します。

GLSL sandbox について• http://

glsl.heroku.com • GLSL sandbox は

webGL により glslを用いてシェーダーを記述・確認できるサイトです。

チュートリアル

• http://tokyodemofest.jp/2014/7lines/index.html

ルール

• GLSL の Fragment Shader を用いて 7 行 (7x79 文字 + 1 改行 ) でグラフィックスを表示します。

• すべての作品は最新の GLSL sandbox で表示します。

制作の流れ

• まずは２０行程度• エディターにコピーし行数を削減• ブラウザで確認

最初の３行

• 最初の３行は数えない

• 実際は 3+7=10行

#ifdef GL_ESprecision mediump float;#endif

短い書き方

• vec3(1.0) →vec3(1)

• 0.1 → .1

• 3.0 → 3.

その他

• よく使う変数をmainの外に追い出す

• よく使う変数を短い名前の変数に代入

オリジナル作品

• まずは他人の作品をみて、試してみましょう

Q&A

• 質問

短くしてみた

• http://glsl.heroku.com/e#14781.0

• http://glsl.heroku.com/e#14778.8