CHEIDERS
v0.1
a minimal pixel shader sandbox
by josemorval using three.js
color
buffer
sound
use ctrl to compile
save
reset time
stop sound
library
notes
Hello (RED) World!
void main(){

	//This little function runs one time for every pixel in the image.
	//Each pixel is colored using the value in the
	//variable gl_FragColor.

	//In our shaders, the fourth value of the vector (related with transparency)
	//is a dummy value
	gl_FragColor = vec4(1.0,0.0,0.0,1.0);

}
Coordinates of the texture
  //Built-in variable
	uniform vec2 resolution;

	void main(){

	//The variable gl_FragCoord contains for each pixel its value
	//on screen space. Tipically, gl_FragCoord is scaled in range [0,1]
	//using the width and height of the image (our canvas).

	//In this example:
	//
	// 1) We declare a 2-dimensional vector p with the
	//    gl_FragCoord values.

		vec2 p = gl_FragCoord.xy;

	// 2) We normalize this vector using the built-in
	//    variable resolution (outside shader-land information)

		p /= resolution.xy;

	// 3) We use the values of p (a value in [0,1]) to colorize
	//    our image
	//    a) The RED channel of the image will be the
	//       component x of p.
	//    b) The GREEN channel of the image will be the
	//       component y of p.
	//    c) The BLUE channel will be fixed to 0 (no blue color)

		gl_FragColor = vec4(p.x,p.y,0.0,1.0);

}
Reading a texture
  uniform vec2 resolution;
	//Built-in texture variable
	//It contains the texture in the drag-n-drop field (below shader editor)
	uniform sampler2D sTex0;

	void main(){

	//Texture coordinates (in [0,1])

		vec2 p = gl_FragCoord.xy;
		p /= resolution.xy;

	//Read the pixels of the texture using the texture coordinates
	//and the texture2D (built-in) function.
	//We store the value in a vec4 variable

		vec4 col = texture2D(sTex0,p);

	//In general, the image will be distorsed because we're using a 500x300 pixel canvas
	//to show an arbitrary resolution image.
	//This problem can be fixed (or get worse) scaling the texture coordinates.
	//For example:

	//	p.x *= 2.0;
	//	p.y *= 0.7;

	//	col = texture2D(sTex0,p);

		gl_FragColor = col;

}
GIF
drag & drop