Viewing Program

Program Data

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

Title	WebGL2 GPGPU Particles
ID	4705988380508160
Created	1 years ago, 1698074728396
Updated	1 years ago, 1698077253712
Code	<!DOCTYPE html> <html><!-- gpgpu based particles using webgl2 pingponging transform feedback buffer style compute shaders change stuff at line 33 most of the performance loss is from the fragment shader thats rendering the particles so turn particle size rlly low and it runs a few million particles still at 60 fps and its not even that optimized x_x for khantober monday 4 --> <head> <meta charset="utf-8"> <title>WebGL2 GPGPU Particles</title> </head> <body style='overflow:hidden;margin:0px;user-select:none'> <style> canvas{ position:fixed; } </style> <canvas id='uiCanvas'></canvas> <script src='https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js'></script> <script src='https://cdn.jsdelivr.net/gh/Dddatt/D.js@v2.3.0/index.js'></script> <script id='source-code' type='text'> var NUM_PARTICLES=1500, PARTICLE_SIZE=3 var _MATH=Math; (function(){ let Math=_MATH,width=innerWidth\|0,height=innerHeight\|0,glCanvas=new OffscreenCanvas(width,height),ctx=uiCanvas.getContext('2d'),dt,frameCount=0,time=0,then=performance.now(),gl=D.getContext(glCanvas,{antialias:0,alpha:0,depth:0,premultipliedAlpha:0}) uiCanvas.width=width uiCanvas.height=height D.viewport(0,0,width,height) gl.clearColor(0,0,0,1) D.createProgram=Object.constructor('gl','return'+D.createProgram.toString().replace('debug=false','debug=false,transformFeedbackVaryings').replace('gl.linkProgram','if(transformFeedbackVaryings)gl.transformFeedbackVaryings(p,transformFeedbackVaryings,gl.INTERLEAVED_ATTRIBS)\ngl.linkProgram'))(gl) let computeShader=D.createProgram(`#version 300 es precision mediump float; in vec2 pos; in vec2 vel; out vec2 position; out vec2 velocity; uniform float dt; uniform float time; void main(){ velocity=vel; position=pos+velocitydt; if(position.x<-1.)position.x=1.; if(position.x>1.)position.x=-1.; if(position.y<-1.)position.y=1.; if(position.y>1.)position.y=-1.; }`,`#version 300 es\nprecision mediump float;out vec4 FragColor;void main(){FragColor=vec4(0,0,0,1);}`,1,['position','velocity']) renderProgram=D.createProgram(`#version 300 es precision mediump float; in vec2 instancePos; in vec2 instanceVel; out vec2 pos; out vec3 col; void main(){ col=mix(vec3(0,1,0),vec3(0.2,0.6,1),dot(instanceVel,instanceVel)25.); gl_Position=vec4(instancePos,0,1); pos=(instancePos0.5+0.5)vec2(D_WIDTH,D_HEIGHT); gl_PointSize=${D.floatify(PARTICLE_SIZE)}; }`,`#version 300 es precision mediump float; out vec4 FragColor; in vec3 col; in vec2 pos; void main(){ vec2 delta=gl_FragCoord.xy-pos; if(dot(delta,delta)>${D.floatify(PARTICLE_SIZE)})discard; FragColor=vec4(col,1); }`,1) let dataArray=new Float32Array(4NUM_PARTICLES), dataBuffer_in=gl.createBuffer(), dataBuffer_out=gl.createBuffer(), dataTF_in=gl.createTransformFeedback(), dataTF_out=gl.createTransformFeedback(), particleMesh=D.createMesh({verts:new Float32Array(0),index:new Uint32Array([0]),primitive:'POINTS'},[['instancePos',2,16,0],['instanceVel',2,16,8]]) for(let i=0,l=4NUM_PARTICLES;i<l;){ dataArray[i++]=(Math.random()2-1) dataArray[i++]=(Math.random()2-1) dataArray[i++]=(Math.random()-0.5)0.5 dataArray[i++]=(Math.random()-0.5)0.5 } gl.bindBuffer(gl.ARRAY_BUFFER,dataBuffer_in) gl.bufferData(gl.ARRAY_BUFFER,dataArray,gl.STATIC_DRAW) gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK,dataTF_in) gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER,0,dataBuffer_in) gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK,null) gl.bindBuffer(gl.ARRAY_BUFFER,dataBuffer_out) gl.bufferData(gl.ARRAY_BUFFER,dataArray,gl.STATIC_DRAW) gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK,dataTF_out) gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER,0,dataBuffer_out) gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK,null) ctx.font='14px trebuchet ms' ctx.fillStyle='white' let fps=60 function loop(now){ dt=D.constrain((now-then)*0.001,0,0.1) frameCount++ time+=dt gl.clear(16640) gl.enable(gl.RASTERIZER_DISCARD) D.useProgram(computeShader) gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK,null) gl.bindBuffer(gl.ARRAY_BUFFER,dataBuffer_out) D.setUniform('dt',[dt]) D.setUniform('time',[time]) gl.vertexAttribPointer(D.currentProgram.locations.pos,2,16,gl.FLOAT,gl.FALSE,0) gl.vertexAttribPointer(D.currentProgram.locations.vel,2,16,gl.FLOAT,gl.FALSE,8) gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK,dataTF_in) gl.beginTransformFeedback(gl.POINTS) gl.drawArrays(gl.POINTS,0,NUM_PARTICLES) gl.endTransformFeedback() gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK,null) gl.disable(gl.RASTERIZER_DISCARD) // let results=new Float32Array(4) // gl.bindBuffer(gl.ARRAY_BUFFER,dataBuffer_in) // gl.getBufferSubData(gl.ARRAY_BUFFER,0,results) // console.log(results) D.useProgram(renderProgram) gl.bindBuffer(gl.ARRAY_BUFFER,dataBuffer_in) particleMesh.attribFunction(gl,D.currentProgram.locations) gl.bindBuffer(gl.ARRAY_BUFFER,dataBuffer_in) gl.drawArrays(gl.POINTS,0,NUM_PARTICLES) const temp_tf=dataTF_in dataTF_in=dataTF_out dataTF_out=temp_tf const temp_buf=dataBuffer_in dataBuffer_in=dataBuffer_out dataBuffer_out=temp_buf ctx.drawImage(glCanvas,0,0) ctx.fillText('fps: '+(!(frameCount%10)?fps=1/dt:fps).toFixed(2),5,15) then=now parent.raf=requestAnimationFrame(loop) } if(parent.raf)cancelAnimationFrame(parent.raf) requestAnimationFrame(loop) })()</script> <script type> function init(){ let app=document.getElementById('source-code').text Object.constructor(app)() } init() </script> <!--<script>--> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgPPtpIKuCAw
Votes	38
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Dat
Author Name	Dddatt
Author ID	kaid_4164356982737975081215128
Author Profile Access	COACH

Archive Data

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