Shader_Square

by SQShu

HTML

<!DOCTYPE html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
		body {
			margin: 0px;
			background-color: #000000;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<script id="vertexShader" type="x-shader/x-vertex">
		uniform highp float time;

		void main() {
	        gl_Position = vec4(position,1.0) ;                
		}
	</script>
	<script id="fragmentShader" type="x-shader/x-fragment">
		//============================================================
		//PUT YOUR GLSL CODE HERE
		//============================================================

    precision highp float;
    uniform float time;
    uniform vec2 resolution;
    
    void main(void) {
    
    	vec2 normres = (gl_FragCoord.xy / resolution.xy);
    
        vec2 pos = vec2(0.5)-normres;
    
    	float size = abs(sin(time)) / 3.;
    	float colour = 0.;
    	
    	if (length(pos.x) < size && length(pos.y) < size) colour = 1.;
    	
    	gl_FragColor = vec4(vec3(colour), 1.0);
    	
    }
    
    //============================================================
		//END OF GLSL CODE
		//============================================================
	</script>
	<script>
		//change the resolution here. 1 is highest
		var pixel_resolution = 2;
		var stats;
		var camera, scene, renderer;
		var uniforms;
		init();
		animate();
		function init() {

			camera = new THREE.Camera();
			camera.position.z = 1;
			scene = new THREE.Scene();
			var geometry = new THREE.PlaneBufferGeometry(2,2);
			uniforms = { time: { type: 'f', value: 1.0 }, resolution: { type: 'v2', value: new THREE.Vector2() }, mouse: {type: "v2", value: new THREE.Vector2()}};
			var material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: document.getElementById('vertexShader').textContent, fragmentShader: document.getElementById('fragmentShader').textContent...