Viewing Program

Program Data

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

Title	Spin-off of "webgl2 is the best"
ID	6413578902355968
Created	3 months ago, 1727636726936
Updated	3 months ago, 1727650439610
Code	<!DOCTYPE html><html><!-- a much faster(haha im better) recreation of webgl2fundamental's background uses the best webgl library to ever exist(3.js sucks haha) lol 5,000 shapes at 60 fps my fps starts to drop at 20,000 --> <title>Spin-off of "webgl2 is the best"</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet"> <canvas id='gl-canvas'></canvas> <canvas id='ui-canvas'></canvas> <style> body{ margin:0; overflow-x:hidden; font-family:'Open Sans'; } canvas{ position:relative; z-index:1; } .container{ top:-5%; z-index:100; position:absolute; scroll-snap-type: y mandatory; } #chad{ padding:70px; border-radius:10px; background:rgba(0, 0, 0, 0.7); color:white; font-size:50px; top:150px; left:8.5px; text-align:center; position:relative; font-weight:100; } #two{ top:200%; left:0; position:absolute; width:100%; background:grey; height:100%; } section { display: flex; flex-wrap: wrap; align-content: space-around; width: 100%; overflow-x: visible; scroll-snap-align: center; scroll-snap-stop: always; box-sizing: border-box; } </style> <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.1.0/index.js'></script> <div class = "container"> <section> <h1 id = "chad"> Chadtober <p style = "font-size:20px">Challenging you to 31 days of chad programming</p> </h1> </section> <section id = "two"> </section> </div> <script type> </script> <script type='application/javascript'> function main(){ let width=window.innerWidth,height=window.innerHeight,aspect=width/height let glCanvas=document.getElementById('gl-canvas') let uiCanvas=document.getElementById('ui-canvas') glCanvas.width=width glCanvas.height=height uiCanvas.width=width uiCanvas.height=height let ctx=uiCanvas.getContext('2d') let _gl=D.getContext(glCanvas,'webgl2',{antialias:1}) glCanvas.style.display='none' D.viewport(0,0,width,height) D.enable3D() let program=D.createProgram( `#version 300 es precision lowp float; in vec3 vertPos; in vec3 vertNormal; in vec3 instancePos; in vec3 instanceRot; uniform mat4 viewMatrix; out vec3 pixPos; out float section; out vec3 pixNormal; vec3 rotateVector(vec3 v,vec3 euler){ mat3 rotMat=mat3( cos(euler.y)cos(euler.z), sin(euler.x)sin(euler.y)cos(euler.z)-cos(euler.x)sin(euler.z), cos(euler.x)sin(euler.y)cos(euler.z)+sin(euler.x)sin(euler.z), cos(euler.y)sin(euler.z), sin(euler.x)sin(euler.y)sin(euler.z)+cos(euler.x)cos(euler.z), cos(euler.x)sin(euler.y)sin(euler.z)-sin(euler.x)cos(euler.z), -sin(euler.y), sin(euler.x)cos(euler.y), cos(euler.x)cos(euler.y) ); return rotMatv; } void main(){ vec3 vp=rotateVector(vertPos5.,instanceRot)+instancePos; vec3 vn=rotateVector(vertNormal,instanceRot); vec4 pos=viewMatrixvec4(vp,1); section=vertPos.x3.; pixPos=vp; pixNormal=vn; gl_Position=pos; } `, `#version 300 es precision lowp float; uniform vec3 camPos; in vec3 pixNormal; in vec3 pixPos; in float section; out vec4 FragColor; void main(){ vec3 normal=normalize(pixNormal); float diffuse=dot(normalize(vec3(50,250,50)-pixPos),normal)0.3+0.7; vec3 toLight=normalize(vec3(0,25000,500)-pixPos); vec3 toCam=normalize(camPos-pixPos); vec3 halfVec=normalize(toCam+toLight); float specular=dot(halfVec,normal)0.5+0.5; specular=specular; specular=specular; specular=specular; specular=specular; vec3 col=vec3(254, 203, 0)/255.0; if(section<-0.33333)col=vec3(0, 38, 100)/255.0; if(section>0.33333)col=vec3(198, 12, 48)/255.0; FragColor=vec4(coldiffuse+specular0.75,1); } `) D.useProgram(program) let m let mesh=D.createMesh( D.createMeshData({meshes:[{type:'box',x:0,y:0,z:0,w:0.5,h:0.01,l:0.52/3,r:1,g:1,b:1}],order:['x','y','z','nx','ny','nz']}), [ ['vertPos',3,24,0], ['vertNormal',3,24,12], ], [ ['instancePos',3,24,0], ['instanceRot',3,24,12], ] ) for(let i=0,amount=5000,srm=Math.sqrt(amount)0.6;i<amount;i++){ D.addInstance(mesh,[D.random(-srm,srm),D.random(-srm,srm),D.random(-srm,srm),Math.random()6.2,Math.random()6.2,Math.random()6.2]) } let proj=D.prespectiveMatrix(80,aspect,0.1,1000),mat=mat4.identity(new Float32Array(16)) let TIME=0,then,dt function loop(now){ if(!then){now=window.performance.now();then=now} dt=(now-then)0.001 TIME+=dt D.clear(1,1,1,1) let view=D.setViewMatrix(mat,proj,0,0,0,TIME0.15,TIME0.07,10) D.setUniform('camPos',view.camPos) D.setUniform('viewMatrix',mat) for(let i=0;i<mesh.instanceData.length;i+=6){ mesh.instanceData[i+3]+=dt0.5 mesh.instanceData[i+4]+=dt0.3 mesh.instanceData[i+5]+=dt*0.1 } D.renderMesh(mesh) ctx.drawImage(glCanvas,0,0) then=now window.parent.raf=window.requestAnimationFrame(loop) } if(window.parent.raf){ window.cancelAnimationFrame(window.parent.raf) } loop() } main() </script> <!--For restart button--> <script></script> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNuh26OyCww
Votes	1
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	𝕜𝕚™𝕒𝕟𝕥𝕠𝕝𝕚𝕒
Author Name	kiaantolia.ka
Author ID	kaid_706406430552760652245376
Author Profile Access	PUBLIC

Archive Data

Added	3 months ago, 1727650677208
Updated	3 months ago, 1727650677208
Source Deleted	unknown