• 💻PC（windows or macOS）
• 📶インターネット
• 🦊Firefox(ブラウザアプリ)

これらを用意してください

Firefoxを使ってここにアクセスしてみてください
http://glslsandbox.com/e

なんかモワモワした絵+プログラムコードが見えます…

さて１行１行解説しても面白くないので、まずは全部のコードを削除します。
マウスポインタをコードの上に置き、クリック！

すると編集できるようになるのでショートカットを使って削除！
winの方は、ctrl + a からのデリートキー
macの方は、⌘ + a からのデリートキー

すべて消えました（しかし絵は消えないんですね…不思議だなあ…）

次に下記のコードをコピーして貼り付けてください！

#ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform float time;
uniform vec2 resolution;

void main( void ) {
	vec2 position = ( gl_FragCoord.xy / resolution.xy );
	vec4 color = vec4(0.0,1.0,0.0,1.0);

	/* 👇 ここから下がこれから編集していくエリアです。👇 */



	/* 👆 ここから上がこれから編集していくエリアです。👆*/

	gl_FragColor = color;
}

😃目に優しくない緑になったと思います。

とりあえずこれで入門としては完了なので

/* 👇 ここから下がこれから編集していくエリアです。👇 */

/* 👆 ここから上がこれから編集していくエリアです。👆*/

の中の部分にこれから色々書き加えて遊んでみます♪

基本的に数学の式をコードに変換していくわけですが、
今は理論は気にせずガンガン貼り付けて絵を描いてみましょう！

三角

丸

四角