truetamtam · August 29, 2015 14:21
diff --git a/webgl_experiments b/webgl_experiments
 <!DOCTYPE html>
 <head>
 	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
 	<title>html5 webgl test project</title>

 	<style type="text/css">
 		body {
 			position: absolute;
 			width: 100%;
 			height: 100%;
 			top: 0;
 			left: 0;
 			margin: 0;
 			padding: 0;
 		}

 		canvas#holder {
 			position: relative;
 			width: 100%;
 			height: 100%;
 			border: none;
 		}
 	</style>

 	<!-- script #1 -->
 	<script id="shader-fs" type="x-shader/x-fragment">
 		precision highp float;

 		const float PI = 3.14159265359;

 		uniform vec2 uResolution;
 		uniform float uTime;

 		float random(float p) { // seed
 			return fract(sin(p) * 10000.);
 		}

 		float noise(vec2 p) {
 			float t = uTime / 2000.;

 			if(t > 1.) {
 				t -= floor(t);
 			}

 			return random(p.x * 14. + p.y * sin(t) * .05);
 		}

 		vec2 sw(vec2 p) {
 			return vec2(floor(p.x), floor(p.y));
 		}

 		vec2 se(vec2 p) {
 			return vec2(ceil(p.x), floor(p.y));
 		}

 		vec2 nw(vec2 p) {
 			return vec2(floor(p.x), ceil(p.y));
 		}

 		vec2 ne(vec2 p) {
 			return vec2(ceil(p.x), ceil(p.y));
 		}

 		float smoothNoise(vec2 p) {
 			vec2 inter = smoothstep(0., 1., fract(p));

 			float s = mix(noise(sw(p)), noise(se(p)), inter.x);
 			float n = mix(noise(nw(p)), noise(ne(p)), inter.x);

 			return mix(s, n, inter.y);
 			// return noise(nw(p));
 		}

 		mat2 rotate(in float theta) {
 			float c = cos(theta);
 			float s = sin(theta);

 			return mat2(c, -s, s, c);
 		}

 		float circ(vec2 p) {
 			float r = length(p);
 			r = log(sqrt(r));
 			return abs(mod(4. * r, PI * 2.) - PI) * 3. + .5;
 		}

 		// Брауновское
 		float fbm(in vec2 p) {
 	        float z = 2.;
 	        float rz = 0.;
 	        vec2 bp = p;

 	        for (float i = 1.; i < 6.; i++)
 	        {
 	            rz += abs((smoothNoise(p) - 0.5) * 2.) / z;
 	            z = z * 2.;
 	            p = p * 2.;
 	        }

 	        return rz;
 	    }

 		void main() {


 			vec2 p = gl_FragCoord.xy / uResolution.xy - .5;

 			p.x *= uResolution.x / uResolution.y;

 			p *= 7.;

 			float rz = fbm(p);

 			p /= exp(mod(uTime * .55, PI));

 			rz *= pow(abs(0.1 - circ(p)), .9);

 			vec3 col = vec3(0.2, 0.1, 0.644) / rz;

 			// float wave = fract(10000. * sin(16. * PI * (128. * p.y + 1024. * p.x)));

 			//wave = wave + 1.;

 			//wave = wave / 2.;

 			gl_FragColor = vec4(col, 1.0);
 		}
 	</script>

 	<!-- script #2 -->
 	<script id="shader-vs" type="x-shader/x-vertex">
 		attribute vec3 aVertexPosition;

 		void main() {
 			gl_Position = vec4(aVertexPosition, 1.0);
 		}
 	</script>

 	<!-- script #3 -->
 	<script>

 		var canvas, gl;
 		var vertexPositionLocation;

 		var resolutionLocation, resolution;
 		var time, timeLocation;

 		var startTime;

 		var vertices = [
 			-1.0, -1.0,
 			1.0, -1.0,
 			-1.0, 1.0,

 			-1.0, 1.0,
 			1.0, -1.0,
 			1.0, 1.0
 		];

 		function resize() {
 			canvas.width = canvas.offsetWidth;
 			canvas.height = canvas.offsetHeight;
 			gl.viewport(0, 0, canvas.width, canvas.height);
 		}

 		function compileShader(shaderSource, shaderType) {
 			var shader = gl.createShader(shaderType);
 			gl.shaderSource(shader, shaderSource);
 			gl.compileShader(shader);
 			return shader;
 		}

 		function getShader(id) {
 			var shaderScript = document.getElementById(id);

 			var shaderSource = "";
 			var textLine = shaderScript.firstChild;

 			while(textLine) {
 				if(textLine.nodeType == 3) {
 					shaderSource += textLine.textContent;
 				}
 				textLine = textLine.nextSibling;
 			}

 			var shader;
 			if(shaderScript.type == "x-shader/x-fragment") {
 				shader = compileShader(shaderSource, gl.FRAGMENT_SHADER);
 			} else if(shaderScript.type == "x-shader/x-vertex") {
 				shader = compileShader(shaderSource, gl.VERTEX_SHADER);
 			} else {
 				return null;
 			}

 			return shader;

 		}

 		function drawScene() {
 			gl.uniform1f(timeLocation, time);
 			gl.uniform2fv(resolutionLocation, resolution);

 			gl.drawArrays(gl.TRIANGLES, 0, 6);
 		}

 		function render() {
 			requestAnimationFrame(render);

 			resolution = [canvas.width, canvas.height];

 			time = (Date.now() - startTime) / 1000;

 			drawScene();
 		}

 		function bootstrap() {
 			canvas = document.getElementById("holder");

 			gl = canvas.getContext("experimental-webgl");

 			resize();
 			window.addEventListener("resize", resize);

 			var fragmentShader = getShader("shader-fs");
 			var vertexShader = getShader("shader-vs");

 			var shaderProgram = gl.createProgram();

 			gl.attachShader(shaderProgram, vertexShader);
 			gl.attachShader(shaderProgram, fragmentShader);
 			gl.linkProgram(shaderProgram);

 			gl.useProgram(shaderProgram);

 			gl.deleteShader(vertexShader);
 			gl.deleteShader(fragmentShader);

 			resolutionLocation = gl.getUniformLocation(shaderProgram, "uResolution");
 			timeLocation = gl.getUniformLocation(shaderProgram, "uTime");
 			vertexPositionLocation = gl.getAttribLocation(shaderProgram, "aVertexPosition");

 			var buffer = gl.createBuffer();
 			gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
 			gl.enableVertexAttribArray(vertexPositionLocation);
 			gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);

 			startTime = Date.now();

 			render();
 		}

 	</script>

 </head>
 <body id="index" onload="bootstrap();">
 	<canvas id="holder"></canvas>
 </body>
 </html>
	<!DOCTYPE html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>html5 webgl test project</title>

	<style type="text/css">
	body {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	}

	canvas#holder {
	position: relative;
	width: 100%;
	height: 100%;
	border: none;
	}
	</style>

	<!-- script #1 -->
	<script id="shader-fs" type="x-shader/x-fragment">
	precision highp float;

	const float PI = 3.14159265359;

	uniform vec2 uResolution;
	uniform float uTime;

	float random(float p) { // seed
	return fract(sin(p) * 10000.);
	}

	float noise(vec2 p) {
	float t = uTime / 2000.;

	if(t > 1.) {
	t -= floor(t);
	}

	return random(p.x * 14. + p.y * sin(t) * .05);
	}

	vec2 sw(vec2 p) {
	return vec2(floor(p.x), floor(p.y));
	}

	vec2 se(vec2 p) {
	return vec2(ceil(p.x), floor(p.y));
	}

	vec2 nw(vec2 p) {
	return vec2(floor(p.x), ceil(p.y));
	}

	vec2 ne(vec2 p) {
	return vec2(ceil(p.x), ceil(p.y));
	}

	float smoothNoise(vec2 p) {
	vec2 inter = smoothstep(0., 1., fract(p));

	float s = mix(noise(sw(p)), noise(se(p)), inter.x);
	float n = mix(noise(nw(p)), noise(ne(p)), inter.x);

	return mix(s, n, inter.y);
	// return noise(nw(p));
	}

	mat2 rotate(in float theta) {
	float c = cos(theta);
	float s = sin(theta);

	return mat2(c, -s, s, c);
	}

	float circ(vec2 p) {
	float r = length(p);
	r = log(sqrt(r));
	return abs(mod(4. * r, PI * 2.) - PI) * 3. + .5;
	}

	// Брауновское
	float fbm(in vec2 p) {
	float z = 2.;
	float rz = 0.;
	vec2 bp = p;

	for (float i = 1.; i < 6.; i++)
	{
	rz += abs((smoothNoise(p) - 0.5) * 2.) / z;
	z = z * 2.;
	p = p * 2.;
	}

	return rz;
	}

	void main() {


	vec2 p = gl_FragCoord.xy / uResolution.xy - .5;

	p.x *= uResolution.x / uResolution.y;

	p *= 7.;

	float rz = fbm(p);

	p /= exp(mod(uTime * .55, PI));

	rz *= pow(abs(0.1 - circ(p)), .9);

	vec3 col = vec3(0.2, 0.1, 0.644) / rz;

	// float wave = fract(10000. * sin(16. * PI * (128. * p.y + 1024. * p.x)));

	//wave = wave + 1.;

	//wave = wave / 2.;

	gl_FragColor = vec4(col, 1.0);
	}
	</script>

	<!-- script #2 -->
	<script id="shader-vs" type="x-shader/x-vertex">
	attribute vec3 aVertexPosition;

	void main() {
	gl_Position = vec4(aVertexPosition, 1.0);
	}
	</script>

	<!-- script #3 -->
	<script>

	var canvas, gl;
	var vertexPositionLocation;

	var resolutionLocation, resolution;
	var time, timeLocation;

	var startTime;

	var vertices = [
	-1.0, -1.0,
	1.0, -1.0,
	-1.0, 1.0,

	-1.0, 1.0,
	1.0, -1.0,
	1.0, 1.0
	];

	function resize() {
	canvas.width = canvas.offsetWidth;
	canvas.height = canvas.offsetHeight;
	gl.viewport(0, 0, canvas.width, canvas.height);
	}

	function compileShader(shaderSource, shaderType) {
	var shader = gl.createShader(shaderType);
	gl.shaderSource(shader, shaderSource);
	gl.compileShader(shader);
	return shader;
	}

	function getShader(id) {
	var shaderScript = document.getElementById(id);

	var shaderSource = "";
	var textLine = shaderScript.firstChild;

	while(textLine) {
	if(textLine.nodeType == 3) {
	shaderSource += textLine.textContent;
	}
	textLine = textLine.nextSibling;
	}

	var shader;
	if(shaderScript.type == "x-shader/x-fragment") {
	shader = compileShader(shaderSource, gl.FRAGMENT_SHADER);
	} else if(shaderScript.type == "x-shader/x-vertex") {
	shader = compileShader(shaderSource, gl.VERTEX_SHADER);
	} else {
	return null;
	}

	return shader;

	}

	function drawScene() {
	gl.uniform1f(timeLocation, time);
	gl.uniform2fv(resolutionLocation, resolution);

	gl.drawArrays(gl.TRIANGLES, 0, 6);
	}

	function render() {
	requestAnimationFrame(render);

	resolution = [canvas.width, canvas.height];

	time = (Date.now() - startTime) / 1000;

	drawScene();
	}

	function bootstrap() {
	canvas = document.getElementById("holder");

	gl = canvas.getContext("experimental-webgl");

	resize();
	window.addEventListener("resize", resize);

	var fragmentShader = getShader("shader-fs");
	var vertexShader = getShader("shader-vs");

	var shaderProgram = gl.createProgram();

	gl.attachShader(shaderProgram, vertexShader);
	gl.attachShader(shaderProgram, fragmentShader);
	gl.linkProgram(shaderProgram);

	gl.useProgram(shaderProgram);

	gl.deleteShader(vertexShader);
	gl.deleteShader(fragmentShader);

	resolutionLocation = gl.getUniformLocation(shaderProgram, "uResolution");
	timeLocation = gl.getUniformLocation(shaderProgram, "uTime");
	vertexPositionLocation = gl.getAttribLocation(shaderProgram, "aVertexPosition");

	var buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
	gl.enableVertexAttribArray(vertexPositionLocation);
	gl.vertexAttribPointer(vertexPositionLocation, 2, gl.FLOAT, false, 0, 0);

	startTime = Date.now();

	render();
	}

	</script>

	</head>
	<body id="index" onload="bootstrap();">
	<canvas id="holder"></canvas>
	</body>
	</html>
No results found