cskonopka/webglo-working-example.html

## webglo-working-example.html
<!--
File: webglo-example.html
Creator: Christopher Konopka (cskonopka)
Project: https://github.com/vondas-network/webglo
Website: webglo.btc.us
Ordinal: https://ordinals.com/content/5518d36079b3cc854dba0bd6497ec078fbaa996ebd53e908150c845d6a56a463i0

Basic example of the webglo file. It’s an HTML file with embedded WebGL using Javascript.
The file was uploaded to the Bitcoin blockchain using the Ordinals protocol as an “inscription”.
-->

<html>
<script type="text/javascript">

var GL;
var shaderId;
var vertexBuffer;
var indexBuffer;
var timer = 0;

function initWebGL(){
    var canvas = document.getElementById("glcanvas");
    GL = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    if (!GL) {
      alert("Unable to initialize WebGL. Your browser may not support it.");
    }
    GL.clearColor(1.0, 0.0, 0.0, 1.0);
    GL.clear(GL.COLOR_BUFFER_BIT| GL.DEPTH_BUFFER_BIT);

    initShaderProgram();
    initBuffers();
}

function initShaderProgram(){
    shaderId = GL.createProgram();
    var vertId = GL.createShader(GL.VERTEX_SHADER);
    var fragId = GL.createShader(GL.FRAGMENT_SHADER);
    var vert = document.getElementById("vertScript").text;
    var frag = document.getElementById("fragScript").text;

    GL.shaderSource(vertId, vert);
    GL.shaderSource(fragId, frag);
    GL.compileShader(vertId);
    GL.compileShader(fragId);

    if (!GL.getShaderParameter(vertId, GL.COMPILE_STATUS)) {
        alert("Vertex Shader Compiler Error: " + GL.getShaderInfoLog(id));
        GL.deleteShader(vertId);
        return null;
    }

    if (!GL.getShaderParameter(fragId, GL.COMPILE_STATUS)) {
        alert("Fragment Shader Compiler Error: " + GL.getShaderInfoLog(id));
        GL.deleteShader(fragId);
        return null;
    }

    GL.attachShader(shaderId, vertId);
    GL.attachShader(shaderId, fragId);
    GL.linkProgram(shaderId);

    if (!GL.getProgramParameter(shaderId, GL.LINK_STATUS)) {
      alert("Shader Linking Error: " + GL.getProgramInfoLog(shader));
    }
}

function initBuffers(){
    var vertices = new Float32Array( [
      -1.0, -1.0, 0.0,
      -1.0,  1.0, 0.0,
       1.0,  1.0, 0.0,
       1.0, -1.0, 0.0
    ]);

    vertexBuffer = GL.createBuffer();
    GL.bindBuffer(GL.ARRAY_BUFFER, vertexBuffer);
    GL.bufferData(GL.ARRAY_BUFFER, vertices.byteLength, GL.STATIC_DRAW);
    GL.bufferSubData(GL.ARRAY_BUFFER, 0, vertices );

    var indices = new Uint16Array([ 0,1,3,2 ]);
    indexBuffer = GL.createBuffer();
    GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, indexBuffer);
    GL.bufferData(GL.ELEMENT_ARRAY_BUFFER, indices.byteLength, GL.STATIC_DRAW);
    GL.bufferSubData(GL.ELEMENT_ARRAY_BUFFER, 0, indices );
}

window.requestAnimFrame = ( function() {
    return  window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||

    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  } ) ();

function animationLoop(){
    requestAnimFrame( animationLoop );
    render();
}

function render(){
    timer+=.1;

    GL.useProgram(shaderId);
    var uID = GL.getUniformLocation(shaderId, "uTime");
    GL.uniform1f(uID, timer);
    var attId = GL.getAttribLocation(shaderId, "position");
    GL.enableVertexAttribArray(attId);
    GL.bindBuffer(GL.ARRAY_BUFFER, vertexBuffer);
    GL.vertexAttribPointer( attId, 3, GL.FLOAT, false, 0, 0);
    GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, indexBuffer);
    GL.drawElements(GL.TRIANGLE_STRIP, 4, GL.UNSIGNED_SHORT, 0);
}

function start(){
    initWebGL();
    animationLoop();
}

</script>
<script id="vertScript" type="text/glsl">

  #ifdef GL_ES
  precision lowp float;
  #endif

  attribute vec3 position;

  void main(void) {
    gl_Position = vec4(position,1.0);
  }

</script>

<script id="fragScript" type="text/glsl">

    #ifdef GL_ES
    precision mediump float;
    #endif

    #define PI 3.14159265359

    uniform vec2 uResolution;
    uniform vec2 uMouse;
    uniform float uTime;

    float plot(vec2 st, float pct){
      return  smoothstep( pct-0.02, pct, st.y) -
              smoothstep( pct, pct+0.02, st.y);
    }

    void main() {
        vec2 st = gl_FragCoord.xy/vec2(640,480);
        st -= 0.5;  // becomes -0.5 to 0.5
        st *= 12.0;
        float pct2 = 0.0;
        pct2 = distance(st,vec2(0.5));

        float y3 = sin(cos((st.y)*(0.10)))-sin(st.x+st.y*02.2);
        float y = smoothstep(1.2-(sin(((y3)))*(cos(st.y/-9.2))),0.5,st.x) - smoothstep(0.5,0.1,(st.x*0.2))+(sin(st.x-(uTime*.0412)));
        float y2 = smoothstep(04.91,02.5,st.y+st.x) - smoothstep(0.481,0.918,st.y);
        vec3 colorA = vec3(y*y2)-(y3-(0.14))*(sin(st.x-(uTime*.02412)));
        colorA = (1.0)*colorA*vec3(.020+(sin(((y3+y)))+(cos(pct2*-0.2))),0.120,(0.10+(sin(y3))));

        float y4 = cos(cos((st.x)*(0.13)*sin(0.23)));
        float y5 = smoothstep(0.2,0.25,0.3) - smoothstep(0.25,0.31,(st.y*0.12));
        float y6 = smoothstep(0.9+(st.x*0.012),0.1915,st.y+cos(st.y)) - smoothstep(0.641,0.8191,(st.x+st.y)*0.2);
        vec3 colorB = vec3(y4+y5)-(y3*(0.913))*(sin(st.x+(uTime*.031592)));
        colorB = (1.0)*colorB*vec3(.920,0.95030,(0.20-y6))*(sin(st.y-(uTime*.032412)));

        // a. The DISTANCE from the pixel to the center
        vec2 bl = step(vec2(0.5),st);
        float pct = bl.x * bl.y;
        vec3 colorMix = vec3(0.0);
        colorMix = mix(colorA*0.432, colorB+0.3892, 0.983*(sin(((y6+y2)))*(cos(pct2/-2.2))));

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

<body style="margin:0px;" onload=start()>
<canvas id="glcanvas" width=640 height=480 style="height:100%; width:100%; margin:auto; display:block">
 Oops, browser has no <code> canvas </code> tag support
</canvas>
</body>

</html>
	<!--
	File: webglo-example.html
	Creator: Christopher Konopka (cskonopka)
	Project: https://github.com/vondas-network/webglo
	Website: webglo.btc.us
	Ordinal: https://ordinals.com/content/5518d36079b3cc854dba0bd6497ec078fbaa996ebd53e908150c845d6a56a463i0

	Basic example of the webglo file. It’s an HTML file with embedded WebGL using Javascript.
	The file was uploaded to the Bitcoin blockchain using the Ordinals protocol as an “inscription”.
	-->

	<html>
	<script type="text/javascript">

	var GL;
	var shaderId;
	var vertexBuffer;
	var indexBuffer;
	var timer = 0;

	function initWebGL(){
	var canvas = document.getElementById("glcanvas");
	GL = canvas.getContext("webgl") \|\| canvas.getContext("experimental-webgl");
	if (!GL) {
	alert("Unable to initialize WebGL. Your browser may not support it.");
	}
	GL.clearColor(1.0, 0.0, 0.0, 1.0);
	GL.clear(GL.COLOR_BUFFER_BIT\| GL.DEPTH_BUFFER_BIT);

	initShaderProgram();
	initBuffers();
	}

	function initShaderProgram(){
	shaderId = GL.createProgram();
	var vertId = GL.createShader(GL.VERTEX_SHADER);
	var fragId = GL.createShader(GL.FRAGMENT_SHADER);
	var vert = document.getElementById("vertScript").text;
	var frag = document.getElementById("fragScript").text;

	GL.shaderSource(vertId, vert);
	GL.shaderSource(fragId, frag);
	GL.compileShader(vertId);
	GL.compileShader(fragId);

	if (!GL.getShaderParameter(vertId, GL.COMPILE_STATUS)) {
	alert("Vertex Shader Compiler Error: " + GL.getShaderInfoLog(id));
	GL.deleteShader(vertId);
	return null;
	}

	if (!GL.getShaderParameter(fragId, GL.COMPILE_STATUS)) {
	alert("Fragment Shader Compiler Error: " + GL.getShaderInfoLog(id));
	GL.deleteShader(fragId);
	return null;
	}

	GL.attachShader(shaderId, vertId);
	GL.attachShader(shaderId, fragId);
	GL.linkProgram(shaderId);

	if (!GL.getProgramParameter(shaderId, GL.LINK_STATUS)) {
	alert("Shader Linking Error: " + GL.getProgramInfoLog(shader));
	}
	}

	function initBuffers(){
	var vertices = new Float32Array( [
	-1.0, -1.0, 0.0,
	-1.0, 1.0, 0.0,
	1.0, 1.0, 0.0,
	1.0, -1.0, 0.0
	]);

	vertexBuffer = GL.createBuffer();
	GL.bindBuffer(GL.ARRAY_BUFFER, vertexBuffer);
	GL.bufferData(GL.ARRAY_BUFFER, vertices.byteLength, GL.STATIC_DRAW);
	GL.bufferSubData(GL.ARRAY_BUFFER, 0, vertices );

	var indices = new Uint16Array([ 0,1,3,2 ]);
	indexBuffer = GL.createBuffer();
	GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, indexBuffer);
	GL.bufferData(GL.ELEMENT_ARRAY_BUFFER, indices.byteLength, GL.STATIC_DRAW);
	GL.bufferSubData(GL.ELEMENT_ARRAY_BUFFER, 0, indices );
	}

	window.requestAnimFrame = ( function() {
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|

	function(callback) {
	window.setTimeout(callback, 1000 / 60);
	};
	} ) ();

	function animationLoop(){
	requestAnimFrame( animationLoop );
	render();
	}

	function render(){
	timer+=.1;

	GL.useProgram(shaderId);
	var uID = GL.getUniformLocation(shaderId, "uTime");
	GL.uniform1f(uID, timer);
	var attId = GL.getAttribLocation(shaderId, "position");
	GL.enableVertexAttribArray(attId);
	GL.bindBuffer(GL.ARRAY_BUFFER, vertexBuffer);
	GL.vertexAttribPointer( attId, 3, GL.FLOAT, false, 0, 0);
	GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, indexBuffer);
	GL.drawElements(GL.TRIANGLE_STRIP, 4, GL.UNSIGNED_SHORT, 0);
	}

	function start(){
	initWebGL();
	animationLoop();
	}

	</script>
	<script id="vertScript" type="text/glsl">

	#ifdef GL_ES
	precision lowp float;
	#endif

	attribute vec3 position;

	void main(void) {
	gl_Position = vec4(position,1.0);
	}

	</script>

	<script id="fragScript" type="text/glsl">

	#ifdef GL_ES
	precision mediump float;
	#endif

	#define PI 3.14159265359

	uniform vec2 uResolution;
	uniform vec2 uMouse;
	uniform float uTime;

	float plot(vec2 st, float pct){
	return smoothstep( pct-0.02, pct, st.y) -
	smoothstep( pct, pct+0.02, st.y);
	}

	void main() {
	vec2 st = gl_FragCoord.xy/vec2(640,480);
	st -= 0.5; // becomes -0.5 to 0.5
	st *= 12.0;
	float pct2 = 0.0;
	pct2 = distance(st,vec2(0.5));

	float y3 = sin(cos((st.y)(0.10)))-sin(st.x+st.y02.2);
	float y = smoothstep(1.2-(sin(((y3)))(cos(st.y/-9.2))),0.5,st.x) - smoothstep(0.5,0.1,(st.x0.2))+(sin(st.x-(uTime*.0412)));
	float y2 = smoothstep(04.91,02.5,st.y+st.x) - smoothstep(0.481,0.918,st.y);
	vec3 colorA = vec3(yy2)-(y3-(0.14))(sin(st.x-(uTime*.02412)));
	colorA = (1.0)colorAvec3(.020+(sin(((y3+y)))+(cos(pct2*-0.2))),0.120,(0.10+(sin(y3))));

	float y4 = cos(cos((st.x)(0.13)sin(0.23)));
	float y5 = smoothstep(0.2,0.25,0.3) - smoothstep(0.25,0.31,(st.y*0.12));
	float y6 = smoothstep(0.9+(st.x0.012),0.1915,st.y+cos(st.y)) - smoothstep(0.641,0.8191,(st.x+st.y)0.2);
	vec3 colorB = vec3(y4+y5)-(y3(0.913))(sin(st.x+(uTime*.031592)));
	colorB = (1.0)colorBvec3(.920,0.95030,(0.20-y6))(sin(st.y-(uTime.032412)));

	// a. The DISTANCE from the pixel to the center
	vec2 bl = step(vec2(0.5),st);
	float pct = bl.x * bl.y;
	vec3 colorMix = vec3(0.0);
	colorMix = mix(colorA0.432, colorB+0.3892, 0.983(sin(((y6+y2)))*(cos(pct2/-2.2))));

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

	<body style="margin:0px;" onload=start()>
	<canvas id="glcanvas" width=640 height=480 style="height:100%; width:100%; margin:auto; display:block">
	Oops, browser has no <code> canvas </code> tag support
	</canvas>
	</body>

	</html>
No results found