Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	tf
ID	4576674770763776
Created	2 months ago, 1730036728955
Updated	2 months ago, 1730054610339
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tf</title> <style> #gl-canvas { display: none; overflow:hidden; } canvas{ width:600px; } { overflow:hidden; margin:0px; } </style> </head> <body> <canvas id = 'canvas' width = '600' height = '600'></canvas> <canvas id = 'gl-canvas' width = '600' height = '600'></canvas> <script id="webg" type = 'glsl'>#version 300 es in vec2 coordinates; uniform float iTime; void main() { gl_Position = vec4(coordinates.x,coordinates.y,0.0, 1.0); gl_PointSize = 2.0; } </script> <script id = 'vertex-shader' type = 'glsl'>#version 300 es in vec4 aPosition; out vec4 Pos; void main() { Pos = aPosition; } </script> <script> </script> <script id = 'fragment-shader' type = 'glsl'>#version 300 es precision highp sampler2D; precision highp isampler2D; uniform isampler2D iChannel0; precision mediump float; out vec4 fragColor; void main() { fragColor=vec4(1.0); } </script> <script type = 'module'> const canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var mouseX=300,pmouseX=300,mouseY=0,pmouseY=0,clicked=false,key={}; window.addEventListener("mouseover", event => { pmouseX = mouseX; pmouseY= mouseY mouseX = event.pageX; mouseY = event.pageY; }); window.addEventListener("mousemove", event => { pmouseX = mouseX; pmouseY= mouseY mouseX = event.pageX; mouseY = event.pageY; }); function createShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(shader)); } return shader; } function createProgram(gl, vs, fs) { const program = gl.createProgram(); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program); gl.transformFeedbackVaryings(program,["Pos"],gl.SEPARATE_ATTRIBS); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { console.log(gl.getProgramInfoLog(program)); } return program; } function main() { const glCanvas = document.getElementById('gl-canvas'), gl = glCanvas.getContext('webgl2', {preserveDrawingBuffer: true}); const vertexSource = document.getElementById('vertex-shader').textContent, fragmentSource = document.getElementById('fragment-shader').textContent; const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource), fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource); const program = createProgram(gl, vertexShader, fragmentShader); const positions = new Float32Array([-1, -1, -1, 3, 3, -1]); // const iChannel0 = gl.getUniformLocation(program,"iChannel0"); let texture0 = gl.createTexture(); var mousex=300; var mousey=300; var now; const aLoc = gl.getAttribLocation(program, 'aPosition'); // Create a vertex array object (attribute state) const vao = gl.createVertexArray(); gl.bindVertexArray(vao); function makeBuffer(gl, sizeOrData) { const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, gl.STATIC_DRAW); return buf; } function makeBufferAndSetAttribute(gl, data, loc) { const buf = makeBuffer(gl, data); // setup our attributes to tell WebGL how to pull // the data from the buffer above to the attribute gl.enableVertexAttribArray(loc); gl.vertexAttribPointer( loc, 1, // size (num components) gl.FLOAT, // type of data in buffer false, // normalize 0, // stride (0 = auto) 0, // offset ); } const a = [1, 2, 3, 4, 5, 6]; // put data in buffers const aBuffer = makeBufferAndSetAttribute(gl, new Float32Array(a), aLoc); // Create and fill out a transform feedback const tf = gl.createTransformFeedback(); gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf); // make buffers for output const sumBuffer = makeBuffer(gl, a.length 4); // bind the buffers to the transform feedback gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, sumBuffer); gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null); // buffer's we are writing to can not be bound else where gl.bindBuffer(gl.ARRAY_BUFFER, null); // productBuffer was still bound to ARRAY_BUFFER so unbind it // above this line is setup // --------------------------------- // below this line is "render" time gl.useProgram(program); // bind our input attribute state for the a and b buffers gl.bindVertexArray(vao); // no need to call the fragment shader gl.enable(gl.RASTERIZER_DISCARD); gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf); gl.beginTransformFeedback(gl.POINTS); gl.drawArrays(gl.POINTS, 0, a.length); gl.endTransformFeedback(); gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null); // turn on using fragment shaders again gl.disable(gl.RASTERIZER_DISCARD); // turn on using fragment shaders again const results = new Float32Array(a.length); gl.bindBuffer(gl.ARRAY_BUFFER, sumBuffer); gl.getBufferSubData( gl.ARRAY_BUFFER, 0, // byte offset into GPU buffer, results, ); gl.viewport(0, 0, 600, 600); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture0); // gl.uniform1i(iChannel0, 0); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); /================Creating a canvas=================/ var canvas2 = new OffscreenCanvas(600,600); var gl2 = canvas2.getContext('webgl2'); /==========Defining and storing the geometry=======/ var vertices2 = [ -0.5,0.5,0.0, 0.0,0.5,0.0, -0.25,0.25,0.0, -0.25,0.5,0.0 ]; // Create an empty buffer object to store the vertex buffer var vertex_buffer = gl2.createBuffer(); //Bind appropriate array buffer to it gl2.bindBuffer(gl2.ARRAY_BUFFER, vertex_buffer); // Pass the vertex data to the buffer gl2.bufferData(gl2.ARRAY_BUFFER, new Float32Array(vertices2), gl2.STATIC_DRAW); // Unbind the buffer gl2.bindBuffer(gl2.ARRAY_BUFFER, null); /=========================Shaders========================/ // vertex shader source code var vertCode =document.getElementById('webg').textContent; // Create a vertex shader object var vertShader = gl2.createShader(gl2.VERTEX_SHADER); // Attach vertex shader source code gl2.shaderSource(vertShader, vertCode); // Compile the vertex shader gl2.compileShader(vertShader); if (!gl2.getShaderParameter(vertShader, gl2.COMPILE_STATUS)) { console.log(gl2.getShaderInfoLog(vertShader)); } // fragment shader source code var fragCode = '#version 300 es\n'+ 'precision mediump float;'+ 'out vec4 fragColor;'+ 'void main() {' + ' fragColor = vec4(0.9, 0.8, 0.7, 1.0);' + '}'; // Create fragment shader object var fragShader = gl2.createShader(gl2.FRAGMENT_SHADER); // Attach fragment shader source code gl2.shaderSource(fragShader, fragCode); // Compile the fragmentt shader gl2.compileShader(fragShader); if (!gl2.getShaderParameter(fragShader, gl2.COMPILE_STATUS)) { console.log(gl2.getShaderInfoLog(fragShader)); } // Create a shader program object to store // the combined shader program var shaderProgram = gl2.createProgram(); // Attach a vertex shader gl2.attachShader(shaderProgram, vertShader); // Attach a fragment shader gl2.attachShader(shaderProgram, fragShader); // Link both programs gl2.linkProgram(shaderProgram); // Use the combined shader program object gl2.useProgram(shaderProgram); /======== Associating shaders to buffer objects ========/ // Bind vertex buffer object gl2.bindBuffer(gl2.ARRAY_BUFFER, vertex_buffer); // Get the attribute location var coord = gl2.getAttribLocation(shaderProgram, "coordinates"); // Point an attribute to the currently bound VBO /============= Drawing the primitive ===============/ gl2.clearColor(0.005, 0.005, 0.005, 1.0); gl.clearColor(0.0, 0.0, 0.0, 1.0); // Enable the depth test // Unbind the buffer gl2.vertexAttribPointer(coord, 2, gl2.FLOAT, false, 0, 0); gl2.enableVertexAttribArray(coord); function glEnumToString(gl, value) { const keys = []; for (const key in gl) { if (gl[key] === value) { keys.push(key); } } return keys.length ? keys.join(' \| ') : `0x${value.toString(16)}`; } var ext =gl.getExtension("EXT_color_buffer_float"); var getrg = (arr) => arr.filter((e, i) => (i % 4 === 0\|\|i % 4 === 1)); var div=ctx.getImageData(0,0,600,20).data; var pixels=new Uint8Array( 600 * 30 * 4, ); div.fill(255); var then = performance.now(); var fps = 60; var delta; var frameCount=0; var interval = 1000 / fps; for (let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } function render() { window.requestAnimationFrame(render); now = performance.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); frameCount+=1.0; //ctx.clearRect(0,0,600,600); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(glCanvas, 0, 0); // vertices2= Float32Array.from(pixels).map(function(item) { return item/127.5-1.01 } ); // vertices2=getrg(vertices2); // console.log(vertices); // gl2.bufferData(gl2.ARRAY_BUFFER, new Float32Array(vertices2), gl2.STATIC_DRAW); gl2.clear(gl2.COLOR_BUFFER_BIT); gl2.drawArrays(gl2.POINTS, 0, (vertices2.length/2)); ctx.drawImage(canvas2, 0, 0); ctx.drawImage(glCanvas, 0, 0); } } render(); } main(); </script> <script></script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNuP4s6QCAw
Votes	1
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6636286474895360","title":"Spin-off of \"Moonbase Altar (Geek Temple)\"","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Bearkirb314🐻‍❄️
Author Name	BearKirb314
Author ID	kaid_375460112550893828689953
Author Profile Access	PUBLIC

Archive Data

Added	2 months ago, 1730054705013
Updated	2 months ago, 1730054705013
Source Deleted	unknown