Viewing Program

Program Data

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

Title	Dat's Epic Subpage
ID	5796103944454144
Created	3 years ago, 1648922598991
Updated	3 months ago, 1756829472680
Code	<!DOCTYPE html> <html><!-- i hve no idea what im doing rn Sub to me for cool games! Sub to me for cool 3D stuff! Sub to me for cringy 2D graphics(i very rarely make 2d things now but you can look at the textures for my games, which i have sitting around as random projects)! Sub to me for epic physics simulations! Sub to me for cool ray marching programs! Sub to me for WebGL tutorials! Sub to me for content that looks like the creator has an imagination of a curious 3 year old Sub to me if you want to sub to someone that releases 2 games a year(they are good games that dont turn your computer into an oven tho) Sub to me if you want to see programs that probably uses very basic HTMl/CSS code because for some reason im too lazy to learn that stuff this uses my webgl1&2 libary, D.js(good name lol) but this library's version is really outdated it's a 1-up from Three.js cuz this allows you to make your own shaders and so is better D.js demo: https://www.khanacademy.org/computer-programming/djs-webgl-library/5299841799340032 I also improved the shadows in this program a bit --> <title>Dat's Epic Subpage</title> <canvas id='gl-canvas'></canvas> <canvas id='ui-canvas'></canvas> <style> body{ margin:0; overflow:hidden; } </style> <script src='https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js'></script> <script type='application/javascript'> function main(){ let D=(function(D){ D.IDENTITY=new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]) D.HALF_PI=Math.PI0.5 D.TO_RAD=Math.PI/180 D.TO_DEG=180/Math.PI D.cos=Math.cos D.sin=Math.sin D.random=(min,max)=>Math.random()(max-min)+min D.initPhysics=(params={})=>{ D.world=new CANNON.World() D.world.allowSleep=params.allowSleep??false D.world.broadphase=new CANNON.SAPBroadphase(D.world) D.world.broadphase.useBoundingBoxes=true D.world.gravity.set(...(params.gravity?params.gravity:[0,-1,0])) D.world.quatNormalizeSkip=params.quatNormalizeSkip??2 D.world.quatNormalizeFast=params.quatNormalizeFast??true let solver=new CANNON.GSSolver() D.world.iterations=params.iterations??3 D.world.tolerance=params.tolerance??10e6 D.world.solver=solver } D.getContext=(canv,context='webgl',data={})=>{ D.version=['webgl','webgl2'].indexOf(context)+1 D.gl=canv.getContext(context,data) if(!D.gl \|\| !D.version){ alert('WebGl is not supported by browser, or an error has occured') return } return D.gl } D.clear=(r,g,b,a=1)=>{ D.gl.clearColor(r,g,b,a) D.gl.clear(D.gl.COLOR_BUFFER_BIT\|D.gl.DEPTH_BUFFER_BIT) } D.viewport=(x,y,w,h)=>D.gl.viewport(x,y,w,h) D.createProgram=(vsh_src,fsh_src)=>{ let gl=D.gl,vshText=vsh_src.trim(),fshText=fsh_src.trim() vsh=gl.createShader(gl.VERTEX_SHADER) fsh=gl.createShader(gl.FRAGMENT_SHADER) gl.shaderSource(vsh,vshText) gl.shaderSource(fsh,fshText) gl.compileShader(vsh) gl.compileShader(fsh) let p=gl.createProgram() gl.attachShader(p,vsh) gl.attachShader(p,fsh) gl.linkProgram(p) let locations={},types={},text=vsh_src.trim().split('\n') for(let i in text){ let words=text[i].trim().replaceAll(';','').split(' ') if(words[0]==='attribute'\|\|words[0]==='in'\|\|words[0]==='uniform'){ locations[words[2]]=gl['get'+({in:'Attrib',attribute:'Attrib',uniform:'Uniform'}[words[0]])+'Location'](p,words[2]) types[words[2]]=words[1] if(words[0]==='attribute'\|\|words[0]==='in'){ gl.enableVertexAttribArray(locations[words[2]]) } } } text=fsh_src.trim().split('\n') for(let i in text){ let words=text[i].trim().replaceAll(';','').split(' ') if(words[0]==='uniform'){ locations[words[2]]=gl.getUniformLocation(p,words[2]) types[words[2]]=words[1] } } for(let i in types){ types[i]={ float:'1fv', vec2:'2fv', vec3:'3fv', vec4:'4fv', int:'1iv', ivec2:'2iv', ivec3:'3iv', ivec4:'4iv', sampler2D:'1i', mat2:'Matrix2fv', mat3:'Matrix3fv', mat4:'Matrix4fv' }[types[i]] } return {gl:p,locations:locations,uniformTypes:types} } D.setUniform=(name,data)=>{ let gl=D.gl if(D.currentProgram.uniformTypes[name][0]==='M'){ gl['uniform'+D.currentProgram.uniformTypes[name]](D.currentProgram.locations[name],gl.FALSE,data) } else { gl['uniform'+D.currentProgram.uniformTypes[name]](D.currentProgram.locations[name],data) } } D.useProgram=(program)=>{ D.gl.useProgram(program.gl) D.currentProgram=program } D.createMesh=(data,pointers,type='STATIC')=>{ verts=Float32Array.from(data.verts) index=Uint16Array.from(data.index) type=type.toUpperCase()+'_DRAW' let gl=D.gl,mesh={},pointerStr='' mesh.objs=data.objs mesh.indexAmount=index.length mesh.vertBuffer=gl.createBuffer() mesh.indexBuffer=gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER,mesh.vertBuffer) gl.bufferData(gl.ARRAY_BUFFER,verts,gl[type]) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,mesh.indexBuffer) gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,index,gl[type]) for(let i in pointers){ let p=pointers[i] pointerStr=pointerStr+'gl.vertexAttribPointer(locations["'+p[0]+'"],'+p[1]+',gl.FLOAT,gl.FALSE,'+p[2]+','+p[3]+');' } mesh.attribFunction=Object.constructor('gl','locations',pointerStr) mesh.attribPointers=pointers return mesh } D.renderMesh=(mesh,primitive='TRIANGLES')=>{ let gl=D.gl gl.bindBuffer(gl.ARRAY_BUFFER,mesh.vertBuffer) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,mesh.indexBuffer) mesh.attribFunction(gl,D.currentProgram.locations) gl.drawElements(gl[primitive],mesh.indexAmount,gl.UNSIGNED_SHORT,0) } D.enable3D=()=>{ let gl=D.gl gl.enable(gl.CULL_FACE) gl.cullFace(gl.BACK) gl.enable(gl.DEPTH_TEST) gl.depthFunc(gl.LEQUAL) } D.prespectiveMatrix=(fov,aspect,zn,zf)=>{ let f=Math.tan(D.HALF_PI-fovD.TO_RAD0.5), rangeInv=1/(zn-zf) return new Float32Array([ f/aspect,0,0,0, 0,f,0,0, 0,0,(zn+zf)rangeInv,-1, 0,0,znzfrangeInv2,0 ]) } D.setViewMatrix=(mat,proj,x,y,z,yaw,pitch,roll=0)=>{ mat4.fromXRotation(mat,pitch) mat4.rotateY(mat,mat,yaw) if(roll){ mat4.rotateZ(mat,mat,roll) } mat4.translate(mat,mat,[-x,-y,-z]) mat4.multiply(mat,proj,mat) return mat } D.createTexture=(width,height,data,type='CLAMP_TO_EDGE',mipmap)=>{ let gl=D.gl,t=gl.createTexture() gl.bindTexture(gl.TEXTURE_2D,t) gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,width,height,0,gl.RGBA,gl.UNSIGNED_BYTE,data) gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR) gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl[type]) gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl[type]) if(mipmap){ gl.generateMipmap(gl.TEXTURE_2D) } return {texture:t,width:width,height:height} } D.createDepthTexture=(width,height)=>{ let gl=D.gl,t=gl.createTexture() gl.bindTexture(gl.TEXTURE_2D,t) gl.texImage2D(gl.TEXTURE_2D,0,gl.DEPTH_COMPONENT32F,width,height,0,gl.DEPTH_COMPONENT,gl.FLOAT,null) gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST) gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST) 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) return t } D.bindTexture=(texture)=>D.gl.bindTexture(gl.TEXTURE_2D,texture) D.createFramebuffer=(target,depth)=>{ let gl=D.gl,f=gl.createFramebuffer() gl.bindFramebuffer(gl.FRAMEBUFFER,f) gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,target,0) if(depth){ let depthBuffer=gl.createRenderbuffer() gl.bindRenderbuffer(gl.RENDERBUFFER,depthBuffer) gl.renderbufferStorage(gl.RENDERBUFFER,gl.DEPTH_COMPONENT16,target.width,target.height) gl.framebufferRenderbuffer(gl.FRAMEBUFFER,gl.DEPTH_ATTACHMENT,gl.RENDERBUFFER,depthBuffer) } return f } D.createDepthFramebuffer=(target)=>{ let f=gl.createFramebuffer() gl.bindFramebuffer(gl.FRAMEBUFFER,f) gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.DEPTH_ATTACHMENT,gl.TEXTURE_2D,target,0) return f } D.bindFramebuffer=(framebuffer)=>D.gl.bindFramebuffer(D.gl.FRAMEBUFFER,framebuffer) D.createMeshData=(params)=>{ let verts=[],index=[],key={ x:0, y:1, z:2, u:3, v:4, nx:5, ny:6, nz:7, r:8, g:9, b:10 } for(let j in params.meshes){ let t=params.meshes[j] switch(t.type){ case 'box': { let x=t.x\|\|0, y=t.y\|\|0, z=t.z\|\|0, rx=t.rx\|\|0, ry=t.ry\|\|0, rz=t.rz\|\|0, w=t.w\|\|1, h=t.h\|\|1, l=t.l\|\|1, c=[t.r\|\|0,t.g\|\|0,t.b\|\|0], order=params.order, vl=params.vl+(verts.length/order.length) _quat=quat.fromEuler([],rx,ry,rz) let v=[ [-0.5w,0.5h,-0.5l], [-0.5w,0.5h,0.5l], [0.5w,0.5h,0.5l], [0.5w,0.5h,-0.5l], [-0.5w,-0.5h,-0.5l], [-0.5w,-0.5h,0.5l], [0.5w,-0.5h,0.5l], [0.5w,-0.5h,-0.5l], ], n=[ [0,1,0], [0,0,1], [0,0,-1], [1,0,0], [-1,0,0], [0,-1,0], ] for(let i in v){ vec3.transformQuat(v[i],v[i],_quat) vec3.add(v[i],v[i],[x,y,z]) if(i<6){ vec3.transformQuat(n[i],n[i],_quat) } } let _verts=[ ...v[0],0,1,...n[0],...c, ...v[1],0,0,...n[0],...c, ...v[2],1,0,...n[0],...c, ...v[3],1,1,...n[0],...c, ...v[1],0,0,...n[1],...c, ...v[2],1,0,...n[1],...c, ...v[5],0,1,...n[1],...c, ...v[6],1,1,...n[1],...c, ...v[0],1,0,...n[2],...c, ...v[3],0,0,...n[2],...c, ...v[4],1,1,...n[2],...c, ...v[7],0,1,...n[2],...c, ...v[2],0,0,...n[3],...c, ...v[3],1,0,...n[3],...c, ...v[6],0,1,...n[3],...c, ...v[7],1,1,...n[3],...c, ...v[0],0,0,...n[4],...c, ...v[1],1,0,...n[4],...c, ...v[4],0,1,...n[4],...c, ...v[5],1,1,...n[4],...c, ...v[4],0,1,...n[5],...c, ...v[5],0,0,...n[5],...c, ...v[6],1,0,...n[5],...c, ...v[7],1,1,...n[5],...c ] index.push( vl,1+vl,2+vl, vl,2+vl,3+vl, 5+vl,6+vl,7+vl, 6+vl,5+vl,4+vl, 8+vl,9+vl,10+vl, 11+vl,10+vl,9+vl, 14+vl,13+vl,12+vl, 13+vl,14+vl,15+vl, 18+vl,17+vl,16+vl, 17+vl,18+vl,19+vl, 22+vl,21+vl,20+vl, 23+vl,22+vl,20+vl ) for(let i=0,l=_verts.length;i<l;i+=11){ for(let k in order){ verts.push(_verts[i+key[order[k]]]) } } } break case 'sphere': { let f=(1+5 ** 0.5)0.5, T=4 * t.detail let vertices=new Float32Array((10T+2)3); vertices.set(Float32Array.of( -1,f,0,1,f,0,-1,-f,0,1,-f,0, 0,-1,f,0,1,f,0,-1,-f,0,1,-f, f,0,-1,f,0,1,-f,0,-1,-f,0,1)); let triangles=Uint32Array.of( 0,11,5,0,5,1,0,1,7,0,7,10,0,10,11, 11,10,2,5,11,4,1,5,9,7,1,8,10,7,6, 3,9,4,3,4,2,3,2,6,3,6,8,3,8,9, 9,8,1,4,9,5,2,4,11,6,2,10,8,6,7); let _v=12; let midCache=t.detail ? new Map() : null; // midpoint vertices cache to avoid duplicating shared vertices function addMidPoint(a,b) { let _key=Math.floor((a+b)(a+b+1)0.5)+Math.min(a,b); // Cantor's pairing function let i=midCache.get(_key); if (i !== undefined) { midCache.delete(_key); return i; } midCache.set(_key,_v); for (let k=0; k < 3; k++)vertices[3_v+k]=(vertices[3a+k]+vertices[3b+k])0.5; i=_v++; return i; } let trianglesPrev=triangles; for (let i=0; i < t.detail; i++) { // subdivide each triangle into 4 triangles triangles=new Uint32Array(trianglesPrev.length<<2); for (let k=0; k < trianglesPrev.length; k += 3) { let v1=trianglesPrev[k]; let v2=trianglesPrev[k+1]; let v3=trianglesPrev[k+2]; let a=addMidPoint(v1,v2); let b=addMidPoint(v2,v3); let c=addMidPoint(v3,v1); let t=k<<2; triangles[t++]=v1; triangles[t++]=a; triangles[t++]=c; triangles[t++]=v2; triangles[t++]=b; triangles[t++]=a; triangles[t++]=v3; triangles[t++]=c; triangles[t++]=b; triangles[t++]=a; triangles[t++]=b; triangles[t++]=c; } trianglesPrev=triangles; } for (let i=0; i < vertices.length; i += 3) { let m=1 / Math.hypot(vertices[i],vertices[i+1],vertices[i+2]); vertices[i] = m; vertices[i+1] = m; vertices[i+2] = m; } for(let i in triangles){ index.push(triangles[i]+params.vl+(verts.length/params.order.length)) } let rad=t.radius __verts=[] for(let i=0,l=vertices.length;i<l;i+=3){ __verts.push(vertices[i]rad+t.x,vertices[i+1]rad+t.y,vertices[i+2]rad+t.z,0,1,vertices[i],vertices[i+1],vertices[i+2],t.r,t.g,t.b) } for(let i=0,l=__verts.length;i<l;i+=11){ for(let k in params.order){ verts.push(__verts[i+key[params.order[k]]]) } } } break case 'plane': { let x=t.x\|\|0, y=t.y\|\|0, z=t.z\|\|0, c=[t.r\|\|0,t.g\|\|0,t.b\|\|0], order=params.order, vl=params.vl+(verts.length/order.length), _quat=quat.fromEuler([],t.rx,t.ry,t.rz), s=t.size let v=[ [-0.5s,0,-0.5s], [-0.5s,0,0.5s], [0.5s,0,0.5s], [0.5s,0,-0.5s] ],n=[0,1,0] vec3.transformQuat(n,n,_quat) for(let i in v){ vec3.transformQuat(v[i],v[i],_quat) vec3.add(v[i],v[i],[x,y,z]) } let _verts=[ ...v[0],0,1,...n,...c, ...v[1],0,0,...n,...c, ...v[2],1,0,...n,...c, ...v[3],1,1,...n,...c, ] index.push( vl,1+vl,2+vl, vl,2+vl,3+vl ) for(let i=0,l=_verts.length;i<l;i+=11){ for(let k in order){ verts.push(_verts[i+key[order[k]]]) } } } break } } let _index=[] if(params.wireframe){ for(let i=0,l=index.length;i<l;i+=3){ _index.push(index[i],index[i+1],index[i+1],index[i+2],index[i+2],index[i]) } return {verts:verts,index:_index,objs:params.meshes} } return {verts:verts,index:index,objs:params.meshes} } D.createCollider=(params)=>{ params.type=params.type[0].toUpperCase()+params.type.substr(1,params.type.length) let c=new CANNON[params.type](params.type==='Box'?new CANNON.Vec3(...vec3.scale([],params.size,0.5)):params.radius) return c } D.createColliderFromMesh=(mesh)=>{ mesh=mesh.objs[0] mesh.type=mesh.type[0].toUpperCase()+mesh.type.substr(1,mesh.type.length) let c=new CANNON[mesh.type](mesh.type==='Box'?new CANNON.Vec3(mesh.w0.5,mesh.h0.5,mesh.l0.5):mesh.radius) return c } D.createObject=(params)=>{ let o={} o.body=new CANNON.Body({ shape:params.collider, mass:params.mass, }) if(params.pos) o.body.position.set(...params.pos) if(params.quat) o.body.quaternion.set(...params.quat) D.world.addBody(o.body) o.modelMatrix=new Float32Array(16) o.getModelMatrix=()=>mat4.fromRotationTranslation(o.modelMatrix,[o.body.quaternion.x,o.body.quaternion.y,o.body.quaternion.z,o.body.quaternion.w],[o.body.position.x,o.body.position.y,o.body.position.z]) return o } D.fixedStep=1/60 D.updatePhysics=(dt)=>D.world.step(D.fixedStep,dt,3) return D })({}) 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 mapProgram=D.createProgram( ` precision lowp float; attribute vec3 vertPos; attribute vec3 vertColor; attribute vec3 vertNormal; uniform mat4 viewMatrix; uniform mat4 modelMatrix; varying vec3 pixColor; void main(){ float l=max(dot(vertNormal,normalize(vec3(1,3,2))),0.25); pixColor=vertColorl; gl_Position=viewMatrixmodelMatrixvec4(vertPos,1); } `, ` precision lowp float; varying vec3 pixColor; void main(){ gl_FragColor=vec4(pixColor,1); } `) let textureProgram=D.createProgram( ` precision lowp float; attribute vec3 vertPos; attribute vec3 vertColor; attribute vec3 vertNormal; uniform mat4 viewMatrix; uniform mat4 modelMatrix; uniform mat4 lightMatrix; varying vec3 pixColor; void main(){ float l=max(dot(vertNormal,normalize(vec3(1,3,2))),0.25); pixColor=vertColorl; gl_Position=viewMatrixmodelMatrixvec4(vertPos,1); } `, ` precision lowp float; varying vec3 pixColor; uniform sampler2D depthTex; void main(){ vec2 ssPos=(gl_FragCoord.xy-300.0)/300.0; ssPos=ssPos0.5+0.5; gl_FragColor=vec4(vec3(texture2D(depthTex,ssPos).r),1); } `) let program=D.createProgram( ` precision lowp float; attribute vec3 vertPos; attribute vec3 vertColor; attribute vec3 vertNormal; uniform mat4 viewMatrix; uniform mat4 modelMatrix; varying vec3 pixColor; varying vec3 pixPos; void main(){ float l=max(dot(mat3(modelMatrix)vertNormal,normalize(vec3(1,3,2))),0.25); pixColor=vertColorl; pixPos=vertPos; gl_Position=viewMatrixmodelMatrixvec4(vertPos,1); } `, ` precision lowp float; uniform sampler2D depthTex; uniform mat4 lightMatrix; uniform mat4 modelMatrix; varying vec3 pixColor; varying vec3 pixPos; void main(){ vec4 projPos=lightMatrixmodelMatrixvec4(pixPos,1); projPos.xyz/=projPos.w; projPos=projPos0.5+0.5; vec2 ssPos=projPos.xy; float currentDepth=projPos.z-0.0001; float shadow=0.0; int sampleSize=2; float pixelSize=0.001666666667; for(int y=-3;y<=3;y++){ for(int x=-3;x<=3;x++){ float projDepth=texture2D(depthTex,ssPos+vec2(x,y)pixelSize).r; if(projDepth>=currentDepth){ shadow+=1.0; } } } shadow/=49.0; shadow=min(shadow+0.2,1.0); bool inRange=ssPos.x>=0.0&&ssPos.x<=1.0&&ssPos.y>=0.0&&ssPos.y<=1.0; shadow=1.0-(((ssPos.x-0.5)(ssPos.x-0.5)+(ssPos.y-0.5)(ssPos.y-0.5)))2.0; if(!inRange){ shadow=1.0-(((ssPos.x-0.5)(ssPos.x-0.5)+(ssPos.y-0.5)(ssPos.y-0.5)))2.0; } gl_FragColor=vec4(pixColorshadow,1); } `) let m=D.createMeshData({ meshes:[ {type:'box',x:0,y:-18.25,z:0,w:10000,h:0.1,l:10000,r:0.9,g:0.9,b:0.9,rx:0,ry:0,rz:0}, {type:'box',x:-1,y:3,z:0,w:0.5,h:2,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:-50}, {type:'box',x:-1.7,y:1.8,z:0,w:0.5,h:1.5,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:-1,y:0.6,z:0,w:0.5,h:2,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:50}, {type:'box',x:-0.3,y:-0.6,z:0,w:0.5,h:1.5,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:-1,y:-1.9,z:0,w:0.5,h:2,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:-50}, {type:'box',x:1.8,y:-0.6,z:0,w:0.5,h:4.8,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:4.7,y:-0.6,z:0,w:0.5,h:4.8,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:3.1,y:-2.75,z:0,w:0.5,h:2.8,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:90}, {type:'box',x:6.8,y:0.2,z:0,w:0.5,h:6.6,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:8.5,y:0.0,z:0,w:3.8,h:0.6,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:8.7,y:1.7,z:0,w:0.5,h:4.8,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:45}, {type:'box',x:8.7,y:-1.5,z:0,w:0.5,h:4.8,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:-45}, {type:'box',x:-2.6,y:-8.3,z:0,w:0.5,h:4.8,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:-2.6,y:-6.2,z:0,w:0.5,h:4.1,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:90}, {type:'box',x:1.1,y:-8.3,z:0,w:0.5,h:4.8,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:4.3,y:-8.3,z:0,w:0.5,h:4.8,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:2.7,y:-6.1,z:0,w:3.3,h:0.5,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:2.7,y:-10.45,z:0,w:3.3,h:0.5,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:0.1,y:-15.5,z:0,w:0.6,h:4.9,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:-20}, {type:'box',x:1.4,y:-14.8,z:0,w:0.6,h:3.4,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:20}, {type:'box',x:2.9,y:-14.8,z:0,w:0.6,h:3.4,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:-20}, {type:'box',x:4.3,y:-15.5,z:0,w:0.6,h:4.9,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:20}, {type:'box',x:6.5,y:-15.5,z:0,w:0.6,h:4.9,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:7.9,y:-17.7,z:0,w:3.3,h:0.4,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:7.9,y:-15.7,z:0,w:3.3,h:0.4,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:7.9,y:-13.2,z:0,w:3.3,h:0.4,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:12.1,y:-14.2,z:0,w:0.6,h:4.9,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, {type:'box',x:12.1,y:-18.0,z:0,w:0.6,h:.6,l:0.5,r:0,g:1,b:0,rx:0,ry:0,rz:0}, ], order:['x','y','z','r','g','b','nx','ny','nz'], vl:0, }) let mesh=D.createMesh( m, [ ['vertPos',3,94,0], ['vertColor',3,94,12], ['vertNormal',3,94,24], ] ) let proj,mat=mat4.identity(new Float32Array(16)) let depth_tex=D.createDepthTexture(600,600), depth_fb=D.createDepthFramebuffer(depth_tex) D.initPhysics() let frameCount=0,objects=[],boxData=D.createMeshData({ meshes:[ {type:'box',x:0,y:0,z:0,w:2,h:2,l:2,r:0,g:1,b:0,rx:0,ry:0,rz:0}, ], order:['x','y','z','r','g','b','nx','ny','nz'], vl:0, }),boxMesh=D.createMesh( boxData, [ ['vertPos',3,94,0], ['vertColor',3,94,12], ['vertNormal',3,94,24], ] ) let plane=new CANNON.Body({ shape:new CANNON.Plane(), mass:0, position:new CANNON.Vec3(0,-18,100) }) plane.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2) D.world.addBody(plane) function loop(){ frameCount++ if(frameCount%20===0&&objects.length<60){ objects.push(D.createObject({ collider:D.createColliderFromMesh(boxMesh), mass:1, pos:[D.random(0,9),D.random(3,15),D.random(5,25)], quat:quat.fromEuler([],Math.random()360,Math.random()360,Math.random()*360) })) } D.updatePhysics(0.1) D.bindTexture(null) D.useProgram(mapProgram) proj=D.prespectiveMatrix(36,aspect,10,130) D.setViewMatrix(mat,proj,38,48,38,-1.0,1.0,0) let _mat=mat.slice() gl.bindFramebuffer(gl.FRAMEBUFFER,depth_fb) D.clear(1,1,1,1) gl.cullFace(gl.FRONT) D.setUniform('modelMatrix',D.IDENTITY) D.setUniform('viewMatrix',mat) D.renderMesh(mesh) for(let i in objects){ D.setUniform('modelMatrix',objects[i].getModelMatrix()) D.renderMesh(boxMesh) } proj=D.prespectiveMatrix(80,aspect,0.1,1000) gl.bindFramebuffer(gl.FRAMEBUFFER,null) D.useProgram(program) D.setViewMatrix(mat,proj,5,-5,40,0,0.2,0) D.bindTexture(depth_tex) gl.cullFace(gl.BACK) D.clear(0.2,0.2,0.2,1) D.setUniform('viewMatrix',mat) D.setUniform('lightMatrix',_mat) D.setUniform('modelMatrix',D.IDENTITY) D.renderMesh(mesh) for(let i in objects){ D.setUniform('modelMatrix',objects[i].getModelMatrix()) D.renderMesh(boxMesh) } ctx.drawImage(glCanvas,0,0) 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	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMPl6fClCgw
Votes	341
Spin-Offs	5
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	true
Restricted Posting	false
By Child	false
Author Nick	Dat
Author Name	Dddatt
Author ID	kaid_4164356982737975081215128
Author Profile Access	COACH

Archive Data

Added	1 years ago, 1727572525918
Updated	2 months ago, 1760404675550
Source Deleted	unknown