Viewing Program

Program Data

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

Title	Spin-off of "Godrays on a floating shack"
ID	4517325614006272
Created	2 months ago, 1730599680370
Updated	2 months ago, 1731104745144
Code	<!DOCTYPE html> <html> <title>Spin-off of "Godrays on a floating shack"</title> <canvas id = "m" width = '600' height = '600'></canvas> <canvas width = "600" height = "600" id = "my_Canvas"></canvas> <canvas width = "600" height = "600" id = "skybox"></canvas> <canvas width = "600" height = "600" id = "bloom"></canvas> <script id="ob" src='https://cdn.jsdelivr.net/gh/Bearkirb/sponzaModel@35b8854e0fffe0af336e717c68138defd812e6d7/shackModel.js'></script> <script src='https://cdn.jsdelivr.net/npm/obj-file-parser@0.6.2/dist/OBJFile.min.js'></script> <img id="texture1" src="https://upload.wikimedia.org/wikipedia/commons/9/90/Logwood_bc_copy.jpg"> <style> { margin:0px; overflow:hidden; width:600px; } #m{ display:none; } #skybox{ display:none; } #bloom{ display:none; } canvas{ width:600px; } </style> <script id = 'vertex-bloom' type = 'glsl'>#version 300 es in vec2 aPosition; out vec2 pos; precision highp float; void main() { pos = aPosition; gl_Position = vec4(aPosition, 0, 1); } </script> <script> </script> <script id = 'fragment-bloom' type = 'glsl'>#version 300 es precision lowp sampler2D; uniform sampler2D iChannel0; precision highp float; uniform vec2 u_resolution; uniform float drawx; uniform float drawy; uniform float clicked; uniform float iTime; uniform vec2 cameraAngle; out vec4 fragColor; vec2 Rotate(vec2 uv,float ang){ return vec2(uv.xcos(ang)-uv.ysin(ang),uv.xsin(ang)+uv.ycos(ang)); } void Rotate( inout vec3 vector, vec2 angle ) { vector.yz = cos(angle.y)vector.yz +sin(angle.y)vec2(-1,1)vector.zy; vector.xz = cos(angle.x)vector.xz +sin(angle.x)vec2(-1,1)vector.zx; } vec2 crt(vec2 coord, float bend){ // put in symmetrical coords coord = (coord - 0.5) 2.0; coord = 1.1; // deform coords coord=Rotate(coord,bendpow(length(coord),2.0)); // transform back to 0.0 - 1.0 space coord = (coord / 2.2) + 0.5; return coord; } #define M1 1597334677U //1719413929 #define M2 3812015801U //140473246711 float hash( uvec2 q ) { q = uvec2(M1, M2); uint n = (q.x ^ q.y) * M1; return float(n) * (1.0/float(0xffffffffU)); } vec4 textur(vec2 uv){ vec2 ruv=uv; return texture(iChannel0,ruv); } float random (in vec2 _st) { return fract(sin(dot(_st.xy, vec2(12.9898,78.233)))* 43758.5453123); } vec4 photoshop_desaturate(vec3 color, float factor) { vec3 lum = vec3(0.299, 0.587, 0.114); vec3 gray = vec3(dot(lum, color)); return vec4(mix(color, gray, factor), 1.0); } float sin2(float x){ return cos(x)<0.0?(sin(x)>0.0?-1.0:1.0):sin(x); } vec3 aces_tonemap(vec3 color){ mat3 m1 = mat3( 0.59719, 0.07600, 0.02840, 0.35458, 0.90834, 0.13383, 0.04823, 0.01566, 0.83777 ); mat3 m2 = mat3( 1.60475, -0.10208, -0.00327, -0.53108, 1.10813, -0.07276, -0.07367, -0.00605, 1.07602 ); vec3 v = m1 * color; vec3 a = v * (v + 0.0245786) - 0.000090537; vec3 b = v * (0.983729 * v + 0.4329510) + 0.238081; return pow(clamp(m2 * (a / b), 0.0, 1.0), vec3(1.0 / 2.2)); } void main() { vec2 fragCoord = gl_FragCoord.xy; vec2 iMouse = vec2(drawx,drawy); vec2 iResolution = vec2(600.0,600.0); vec2 res = iResolution.xy; vec2 uv=(fragCoord/res); uv.y=1.0-uv.y; fragColor.rgba = textur(uv).rgba; // fragColor.rgb=mix(fragColor.rgb,((fragColor.rgb+1.0)/2.0)vec3(0.05,0.06,0.3),pow(distance(uv8.0,vec2(0.58.0,0.58.0)),2.0)/200.0+0.3); vec3 som=vec3(0.0); float aca=0.0; float accum=0.0; for(float x=0.01;x<20.0;x+=1.0){ float ang=random(uv+0.5x)3.14152.0; vec2 off=vec2(sin(ang),cos(ang)); off=pow(random(uv+x),5.0)0.18; vec4 he = texelFetch(iChannel0,ivec2((uv-off)600.0),0).rgba; if(fragColor.a>0.01&&he.a>0.01){ aca+=max(he.a-fragColor.a-random(uv)0.002,-0.01)1.15; } if(length(he.rgb)>0.5){ // fragColor.rgb=mix(fragColor.rgb,he.rgb0.01/(dot(off,off)+0.01),0.03pow(length(he.rgb)/1.0,2.0)); } } fragColor.rgb=1.0-clamp(vec3(aca),0.0,1.0); vec3 light=vec3(0.0,200.0,1000.0); vec2 p=uv; vec2 m=vec2(tan(drawx/2.0),tan((drawy-0.197)/2.0))1.2+0.5; float siz=1.0; vec3 cam=vec3(0.0,0.0,1.0); Rotate(cam,vec2(drawx,drawy)); vec3 c = vec3(0.0); float div=200.0; if(dot(light,cam)>0.0){ for(int i=0;i<20;i++){ vec4 ad=texelFetch(iChannel0,ivec2(clamp((((1.0p-(m))siz)+(m))600.0,1.0,599.0)),0).rgba; siz=0.95-(hash(uvec2((p+vec2(i))vec2(600.0)))0.08); if(ad.a<0.01){ c+=0.15(sizsiz); } } } vec4 ad=texture(iChannel0,uv).rgba; fragColor.rgb=mix(fragColor.rgb,vec3(0.2),1.0-fragColor.a); fragColor.rgb+=cvec3(1.0,0.8,0.5); if(ad.a<0.01){ fragColor.rgb+=0.01/distance(uv,m); } fragColor.rgb=1.0; vec2 uv2=uv; uv = 1.0 - uv.yx; float vig = uv.xuv.y * 100.0; // multiply with sth for intensity vig = pow(vig, 0.15); // change pow for modifying the extend of the vignette fragColor.rgb=vig0.5+0.5; fragColor.rgb=aces_tonemap(fragColor.rgb); float dis=clamp(fragColor.a10.0,0.0,1.0); fragColor.a=(ad.a<0.01)?0.0:dis; } </script> <script id = 'vertex-skybox' type = 'glsl'>#version 300 es in vec2 aPosition; out vec2 pos; precision highp float; void main() { pos = aPosition; gl_Position = vec4(aPosition, 0, 1); } </script> <script> </script> <script id = 'fragment-skybox' type = 'glsl'>#version 300 es precision highp sampler2D; uniform sampler2D iChannel0; precision highp float; uniform vec2 u_resolution; uniform float drawx; uniform float drawy; uniform float iTime; void Rotate( inout vec3 vector, vec2 angle ) { vector.yz = cos(angle.y)vector.yz +sin(angle.y)vec2(-1,1)vector.zy; vector.xz = cos(angle.x)vector.xz +sin(angle.x)vec2(-1,1)vector.zx; } vec2 hash( vec2 p ) { p = vec2( dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3)) ); return -1.0 + 2.0fract(sin(p)43758.5453123); } float noise( in vec2 p ) { const float K1 = 0.366025404; // (sqrt(3)-1)/2; const float K2 = 0.211324865; // (3-sqrt(3))/6; vec2 i = floor( p + (p.x+p.y)K1 ); vec2 a = p - i + (i.x+i.y)K2; float m = step(a.y,a.x); vec2 o = vec2(m,1.0-m); vec2 b = a - o + K2; vec2 c = a - 1.0 + 2.0K2; vec3 h = max( 0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 ); vec3 n = hhhhvec3( dot(a,hash(i+0.0)), dot(b,hash(i+o)), dot(c,hash(i+1.0))); return dot( n, vec3(70.0) ); } float fbm(vec2 v){ v/=6.0; float ou=0.0; float mult=1.0; for(int i=0;i<3;i++){ mult=2.71; ou+=noise(vmult+1000.0hash(vec2(float(i))).x)/mult; } return ou/1.2+0.6; } vec3 sky(in vec3 ro, in vec3 rd){ rd = -rd; const float SC = 1e5; // Calculate sky plane float dist = (SC) / rd.y; vec2 p = (dist rd).xz; p = 1.2 / SC; // from iq's shader, https://www.shadertoy.com/view/MdX3Rr vec3 lightDir = normalize(vec3(0.0,200.0,-1000.0)); float sundot = clamp(dot(rd, lightDir), 0.0, 1.0); vec3 cloudCol = vec3(1.); vec3 skyCol = vec3(.6, .71, .85) - rd.y .2 * vec3(1., .5, 1.) + .15 * .5; //vec3 skyCol = vec3(0.3,0.5,0.85) - rd.yrd.y0.5; skyCol = mix( skyCol, 0.85 * vec3(0.7,0.75,0.85), pow( 1.0 - max(rd.y, 0.0), 4.0 ) ); // sun vec3 sun = 0.25 * vec3(1.0, 0.7, 0.4) * pow(sundot, 5.0); sun += 0.25 * vec3(1.0, 0.8, 0.6) * pow(sundot, 64.0); sun += 0.2 * vec3(1.0, 0.8, 0.6) * pow(sundot, 512.0); skyCol += sun; // clouds float t = iTime * 0.0005; float den = fbm(vec2(p.x - t, p.y - t)); skyCol = mix( skyCol, cloudCol, smoothstep(.4, .8, den)); // horizon skyCol = mix( skyCol, 0.68 * vec3(.418, .394, .372), pow( 1.0 - max(rd.y, 0.0), 16.0 ) ); return skyCol; } out vec4 fragColor; void main() { vec2 fragCoord = gl_FragCoord.xy; vec2 iMouse = vec2(drawx,drawy); vec2 iResolution = vec2(600.0,600.0); vec2 res = iResolution.xy; //View resolution vec3 cam = vec3(0.0,0.0,-3.0), //Camera position pos = cam, //Pixel position ray = normalize(vec3(fragCoord2.0 - res, res.y/1.1)), //Ray direction cell = vec3(0,0,0); vec2 angle = (iMouse.xy)vec2(1.0,-1.0); Rotate(pos,angle); Rotate(ray,angle); Rotate(cam,angle(iTime0.0+1.0)); vec3 background = vec3(0.002); background=sky(vec3(0.0),rayvec3(1.0,-1.0,1.0))0.3; fragColor = vec4(background,1); } </script> <script id = 'vertex-shader' type = 'glsl'>#version 300 es in vec3 coordinates; in vec3 normal; in vec3 uvi; precision highp float; precision highp sampler2D; uniform sampler2D iChannel0; uniform float iTime; uniform vec2 cameraAngle; uniform vec3 playerPosition; out vec3 pos; void CamRotate(inout vec3 vector, vec2 angle) { angle.y=-1.0; vector.xz = cos(angle.x) vector.xz + sin(angle.x) * vec2(-1, 1) * vector.zx; vector.yz = cos(angle.y) * vector.yz + sin(angle.y) * vec2(-1, 1) * vector.zy; } void Rotate(inout vec3 vector, vec2 angle) { vector.yz = cos(angle.y) * vector.yz + sin(angle.y) * vec2(-1, 1) * vector.zy; vector.xz = cos(angle.x) * vector.xz + sin(angle.x) * vec2(-1, 1) * vector.zx; } vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec3 permute(vec3 x) { return mod289(((x34.0)+1.0)x); } // // Description : GLSL 2D simplex noise function // Author : Ian McEwan, Ashima Arts // Maintainer : ijm // Lastmod : 20110822 (ijm) // License : // Copyright (C) 2011 Ashima Arts. All rights reserved. // Distributed under the MIT License. See LICENSE file. // https://github.com/ashima/webgl-noise // float noise(vec2 v) { v/=4.0; // Precompute values for skewed triangular grid const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0 0.366025403784439, // 0.5(sqrt(3.0)-1.0) -0.577350269189626, // -1.0 + 2.0 C.x 0.024390243902439); // 1.0 / 41.0 // First corner (x0) vec2 i = floor(v + dot(v, C.yy)); vec2 x0 = v - i + dot(i, C.xx); // Other two corners (x1, x2) vec2 i1 = vec2(0.0); i1 = (x0.x > x0.y)? vec2(1.0, 0.0):vec2(0.0, 1.0); vec2 x1 = x0.xy + C.xx - i1; vec2 x2 = x0.xy + C.zz; // Do some permutations to avoid // truncation effects in permutation i = mod289(i); vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0 )); vec3 m = max(0.5 - vec3( dot(x0,x0), dot(x1,x1), dot(x2,x2) ), 0.0); m = mm ; m = mm ; // Gradients: // 41 pts uniformly over a line, mapped onto a diamond // The ring size 1717 = 289 is close to a multiple // of 41 (417 = 287) vec3 x = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 = x - ox; // Normalise gradients implicitly by scaling m // Approximation of: m = inversesqrt(a0a0 + hh); m = 1.79284291400159 - 0.85373472095314 * (a0a0+hh); // Compute final noise value at P vec3 g = vec3(0.0); g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * vec2(x1.x,x2.x) + h.yz * vec2(x1.y,x2.y); return 130.0 * dot(m, g); } float sabs(float x){ return sqrt(xx+0.2); } float n(vec2 uv){ return pow(1.0-sabs(noise(uv)),2.0); } float fbm(vec2 uv){ float o=0.0; float mult=1.0; for(int i=0;i<4;i++){ vec2 f=vec2(n(uvmult+(vec2(0.0)multmult))/mult-n(uvmult+(vec2(0.0)multmult+vec2(0.001,0.0)))/mult,n(uvmult+(vec2(0.0)multmult))/mult-n(uvmult+(vec2(0.0)multmult+vec2(0.0,0.001)))/mult); mult=2.0; float g=n(uvmult+(vec2(0.0)multmult))/mult; g=1.0-length(f100.0); o+=g; } return pow(o3.0+0.5,5.0); } out vec3 surfaceCoords; out vec3 pp; out vec3 no; out float dp; out vec3 ouv; void main() { float fov=0.7; pos=coordinates; ouv=uvi; pos+=playerPosition; CamRotate(pos,cameraAngle); pp=playerPosition; float silly=-0.001+pos.zfov; pos.x=-1.0; pos.y=-1.0; silly=silly1.5; no=normal; surfaceCoords = coordinates; pos.z=-1.0; dp=pos.z; gl_Position = vec4(pos,silly); } </script> <script id = 'fragment-shader' type = 'glsl'>#version 300 es precision highp float; in vec3 surfaceCoords; in vec3 pp; in vec3 no; in float dp; in vec3 ouv; precision lowp sampler2D; uniform sampler2D iChannel0; uniform float iTime; uniform vec2 cameraAngle; uniform vec3 playerPosition; out vec4 FragColor; vec3 mod289(vec3 x) { return x - floor(x (1.0 / 289.0)) * 289.0; } vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec3 permute(vec3 x) { return mod289(((x34.0)+1.0)x); } // // Description : GLSL 2D simplex noise function // Author : Ian McEwan, Ashima Arts // Maintainer : ijm // Lastmod : 20110822 (ijm) // License : // Copyright (C) 2011 Ashima Arts. All rights reserved. // Distributed under the MIT License. See LICENSE file. // https://github.com/ashima/webgl-noise // float noise(vec2 v) { v/=4.0; // Precompute values for skewed triangular grid const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0 0.366025403784439, // 0.5(sqrt(3.0)-1.0) -0.577350269189626, // -1.0 + 2.0 C.x 0.024390243902439); // 1.0 / 41.0 // First corner (x0) vec2 i = floor(v + dot(v, C.yy)); vec2 x0 = v - i + dot(i, C.xx); // Other two corners (x1, x2) vec2 i1 = vec2(0.0); i1 = (x0.x > x0.y)? vec2(1.0, 0.0):vec2(0.0, 1.0); vec2 x1 = x0.xy + C.xx - i1; vec2 x2 = x0.xy + C.zz; // Do some permutations to avoid // truncation effects in permutation i = mod289(i); vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0 )); vec3 m = max(0.5 - vec3( dot(x0,x0), dot(x1,x1), dot(x2,x2) ), 0.0); m = mm ; m = mm ; // Gradients: // 41 pts uniformly over a line, mapped onto a diamond // The ring size 1717 = 289 is close to a multiple // of 41 (417 = 287) vec3 x = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 = x - ox; // Normalise gradients implicitly by scaling m // Approximation of: m = inversesqrt(a0a0 + hh); m = 1.79284291400159 - 0.85373472095314 * (a0a0+hh); // Compute final noise value at P vec3 g = vec3(0.0); g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * vec2(x1.x,x2.x) + h.yz * vec2(x1.y,x2.y); return 130.0 * dot(m, g); } void Rotate(inout vec3 vector, vec2 angle) { vector.yz = cos(angle.y) * vector.yz + sin(angle.y) * vec2(-1, 1) * vector.zy; vector.xz = cos(angle.x) * vector.xz + sin(angle.x) * vec2(-1, 1) * vector.zx; } float sabs(float x){ return sqrt(xx+0.2); } float n(vec2 uv){ return pow(1.0-sabs(noise(uv)),2.0); } float fbm(vec2 uv, int d){ float o=0.0; float mult=1.0; for(int i=0;i<2;i++){ vec2 f=vec2(n(uvmult+(vec2(0.0)multmult))/mult-n(uvmult+(vec2(0.0)multmult+vec2(0.001,0.0)))/mult,n(uvmult+(vec2(0.0)multmult))/mult-n(uvmult+(vec2(0.0)multmult+vec2(0.0,0.001)))/mult); mult=2.0; float g=n(uvmult+(vec2(0.0)multmult))/mult; g=1.0-length(f100.0); o+=g; } return pow(o3.0+0.5,5.0); } mat3 tbn( in vec3 ro, in vec3 ta, float cr ) { vec3 cw = normalize(ta-ro); vec3 cp = vec3(sin(cr), cos(cr),0.0); vec3 cu = normalize( cross(cw,cp) ); vec3 cv = ( cross(cu,cw) ); return mat3( cu, cv, cw ); } void main() { vec3 pp2=-pp.xyz; vec3 triNormal=no; vec2 po=surfaceCoords.xz; triNormal=normalize(triNormal); // vec3 lightCoords=pp-vec3(0.0,0.0,-0.0); vec3 triangleColor=vec3(0.9)1.0; triangleColor=clamp(triangleColor,0.0,1.0); vec3 hehe = -normalize(surfaceCoords-ppvec3(-1.0,1.0,-1.0)); vec3 lightPos=vec3(0.0,-200.0,1000.0); vec3 FragPos=surfaceCoords; vec3 viewPos=pp2; vec3 lightDir = normalize(lightPos - FragPos); vec3 viewDir = normalize(viewPos - FragPos); vec3 halfwayDir = normalize(lightDir + viewDir); vec3 basNorm=vec3(0.001,0.001,1.0); vec3 nmap=texture(iChannel0,mod(ouv.xy,vec2(0.99))vec2(0.5,1.0)+vec2(0.5,0.0)).rgb2.0-1.0; vec3 normal=triNormal; vec3 tangent=cross(triNormal,vec3(0.0,1.0,0.0)); vec3 bitangent=cross(tangent,normal); mat3 tangentToWorld = mat3( vec3(tangent.x, bitangent.x, normal.x), vec3(tangent.y, bitangent.y, normal.y), vec3(tangent.z, bitangent.z, normal.z) ); nmap=tangentToWorld; triNormal=nmap; triNormal=(normalize(triNormal)); float spec = pow(max(dot(triNormal, halfwayDir), 0.0), 20.5); vec3 to=surfaceCoords-pp2; float mul=max(dot(triNormal,-normalize(to)),0.0)0.8; vec3 colo=texture(iChannel0,mod(ouv.xy,vec2(0.99))vec2(0.5,1.0)).rgb; //FragColor = vec4(triNormal,1.0-(-dp)0.015); FragColor = vec4((colomul+vec3(1.0,0.9,0.6)spec0.2),1.0-(-dp)0.015);//vec4(vec3(1.0-log(-dp1.5)0.2),1.0);//vec4((colomul+vec3(1.0,0.8,0.5)spec0.1)/(-dp0.1+1.0),1.0); } </script> <script type="module"> var mouseX=300,pmouseX=0,mouseY=300,pmouseY=0,clicked=false,key={}; var click=false; var clickToggle=false; function getPointer() { if (canvas2.requestPointerLock) { window.addEventListener("mousemove", function(ev) { mouseX = pmouseX + ev.movementX/1.5; mouseY = pmouseY + ev.movementY/1.5; }); canvas2.requestPointerLock() } } window.addEventListener('mousedown', event => { clicked = true; getPointer(); clickToggle=true; //clicking? }); window.addEventListener('mouseup', event => { clicked = false; click=true; //not clicking so set clicked to false }); window.addEventListener("keydown", (event) => { if((event.shiftKey&&event.key === 'W')\|\|(event.shiftKey&&event.key === 'A')\|\|(event.shiftKey&&event.key === 'S')\|\|(event.shiftKey&&event.key === 'D')) { e.preventDefault(); } key[event.key] = true; }); window.addEventListener("keyup", (event) => { delete key[event.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; }); for (let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } var c = document.getElementById("m") //var ctx = c.getContext("2d"); //var data = ctx.getImageData(0, 0, 600, 600); function dist(x1,y1,x2,y2){ var dx=x1-x2; var dy=y1-y2 return Math.sqrt(dxdx+dydy) } function dist2(x1,y1,x2,y2){ var dx=x1-x2; var dy=y1-y2 return (dxdx+dydy) } var anim=0; var x=0; var frameCount=480; /================Creating a canvas=================/ var canvas = new OffscreenCanvas(600,600); var gl = canvas.getContext('webgl2',{ premultipliedAlpha: false }); /==========Defining and storing the geometry=======/ var vertices = [ -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 = gl.createBuffer(); var normal_buffer = gl.createBuffer(); var uv_buffer = gl.createBuffer(); //Bind appropriate array buffer to it // gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Pass the vertex data to the buffer // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // Unbind the buffer // gl.bindBuffer(gl.ARRAY_BUFFER, null); /=========================Shaders========================/ // vertex shader source code var vertCode =document.getElementById('vertex-shader').textContent; // Create a vertex shader object var vertShader = gl.createShader(gl.VERTEX_SHADER); // Attach vertex shader source code gl.shaderSource(vertShader, vertCode); // Compile the vertex shader gl.compileShader(vertShader); if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(vertShader)); } // fragment shader source code var fragCode = document.getElementById('fragment-shader').textContent // Create fragment shader object var fragShader = gl.createShader(gl.FRAGMENT_SHADER); // Attach fragment shader source code gl.shaderSource(fragShader, fragCode); // Compile the fragmentt shader gl.compileShader(fragShader); if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(fragShader)); } // Create a shader program object to store // the combined shader program var shaderProgram = gl.createProgram(); // Attach a vertex shader gl.attachShader(shaderProgram, vertShader); // Attach a fragment shader gl.attachShader(shaderProgram, fragShader); // Link both programs gl.linkProgram(shaderProgram); // Use the combined shader program object gl.useProgram(shaderProgram); /======== Associating shaders to buffer objects ========/ // Bind vertex buffer objec gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Get the attribute location var coord = gl.getAttribLocation(shaderProgram, "coordinates"); var norms = gl.getAttribLocation(shaderProgram, "normal"); var texuv = gl.getAttribLocation(shaderProgram, "uvi"); // Point an attribute to the currently bound VBO /============= Drawing the primitive ===============/ gl.clearColor(0.0, 0.0, 0.0,0.0); // Enable the depth test var distance=-2,thetax=-0.0,thetaz=0 var d=function(x,y,z) { var zdist=((xMath.sin(-thetaz)+yMath.cos(-thetaz))Math.cos(thetax)-zMath.sin(thetax)+distance)/160.0 return[((xMath.cos(-thetaz)-yMath.sin(-thetaz))/zdist-distance+300),(-((xMath.sin(-thetaz)+yMath.cos(-thetaz))Math.sin(thetax)+zMath.cos(thetax))/zdist-distance)+300,zdist]; }; var camera={x:(-Math.sin(thetax+(Math.PI/2))Math.cos(thetaz+(Math.PI/2)))distance,y:(-Math.sin(thetax+(Math.PI/2))Math.sin(thetaz+(Math.PI/2)))distance,z:-Math.cos(thetax+(Math.PI/2))distance} function camdist(x,y,z){ return(Math.sqrt(((x-camera.x)2)+((y-camera.y)2)+((z-camera.z)2))) } class Vector { constructor(x, y, z=0) { this.x = x; this.y = y; this.z=z; } subtract(v) { var ve = new Vector(this.x, this.y, this.z); ve.x -= v.x; ve.y -= v.y; ve.z -= v.z; return ve; } add(v) { var ve = new Vector(this.x, this.y, this.z); ve.x += v.x; ve.y += v.y; ve.z += v.z; return ve; } divide(n) { var ve = new Vector(this.x, this.y, this.z); ve.x /= n; ve.y /= n; ve.z /= n; return ve; } magnitude() { return Math.sqrt(this.x this.x + this.y * this.y + this.z * this.z); } dot(v) { return this.x * v.x + this.y * v.y + this.z * v.z; } scale(n) { var ve = new Vector(this.x, this.y, this.z); ve.x = n; ve.y = n; ve.z = n; return ve; } normalize() { var ve = new Vector(this.x, this.y, this.z); ve = ve.divide(ve.magnitude()); return ve; } rotateBy(ang) { ang = -ang; return new Vector(this.x Math.cos(ang) - this.y * Math.sin(ang), this.x * Math.sin(ang) + this.y * Math.cos(ang)); } rotate3d(anglex,angley) { var ve = new Vector(this.x,this.y,this.z); var ro1 = new Vector(this.y,this.z).rotateBy(-anglex); var ro2 = new Vector(this.x,ro1.y).rotateBy(-angley); ve.y = ro1.x ve.z = ro1.y; ve.x = ro2.x; ve.z = ro2.y; return ve; } reflect(n) { var ve = new Vector(this.x, this.y); ve = ve.subtract(n.scale(2 * ve.dot(n))) return ve; } abs() { var ve = new Vector(this.x, this.y, this.z); ve.x = Math.abs(ve.x); ve.y = Math.abs(ve.y); ve.z = Math.abs(ve.z); return ve; } max(n) { var ve = new Vector(this.x, this.y, this.z); ve.x = Math.max(ve.x, n); ve.y = Math.max(ve.y, n); ve.z = Math.max(ve.z, n); return ve; } } 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); return program; } const skyboxCanvas = document.getElementById('skybox'), gl2 = skyboxCanvas.getContext('webgl2'); const vertexSource2 = document.getElementById('vertex-skybox').textContent, fragmentSource2 = document.getElementById('fragment-skybox').textContent; const vertexShader2 = createShader(gl2, gl2.VERTEX_SHADER, vertexSource2), fragmentShader2 = createShader(gl2, gl2.FRAGMENT_SHADER, fragmentSource2); const program2 = createProgram(gl2, vertexShader2, fragmentShader2); const aPosition2 = gl2.getAttribLocation(program2, 'aPosition') const drawx2 = gl2.getUniformLocation(program2, "drawx"); const drawy2 = gl2.getUniformLocation(program2, "drawy"); const iTime2 = gl2.getUniformLocation(program2, "iTime"); const iChannel02 = gl2.getUniformLocation(program2,"iChannel0"); const positions = new Float32Array([-1, -1, -1, 3, 3, -1]); const glBloom = document.getElementById('bloom'), gl3 = glBloom.getContext('webgl2'); const vertexSource3 = document.getElementById('vertex-bloom').textContent, fragmentSource3 = document.getElementById('fragment-bloom').textContent; const vertexShader3 = createShader(gl3, gl.VERTEX_SHADER, vertexSource3), fragmentShader3 = createShader(gl3, gl.FRAGMENT_SHADER, fragmentSource3); const program3 = createProgram(gl3, vertexShader3, fragmentShader3); const camAng2 = gl.getUniformLocation(program3, "cameraAngle"); const aPosition3 = gl3.getAttribLocation(program3, 'aPosition') const drawx = gl3.getUniformLocation(program3, "drawx"); const drawy = gl3.getUniformLocation(program3, "drawy"); const iTime = gl3.getUniformLocation(program3, "iTime"); const cli = gl3.getUniformLocation(program3, "clicked"); const iChannel03 = gl3.getUniformLocation(program3,"iChannel0"); let texture03 = gl3.createTexture(); var player var now; var then = performance.now(); var fps = 50; var delta; var player=new Vector(900,-4000,-600); var frameCount=4900; var interval = 1000 / fps; var pts=[]; const iChannel0 = gl.getUniformLocation(shaderProgram,"iChannel0"); let texture0 = gl.createTexture(); 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.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); var canvas2 = document.getElementById('my_Canvas'), ctx = canvas2.getContext('2d'); var texCanvas=new OffscreenCanvas(1024,1024); var tx=texCanvas.getContext('2d'); tx.fillStyle="rgb(255,255,255)" tx.fillRect(20,20,984,984); tx.fillStyle="rgb(127,127,255)" tx.fillRect(512,0,512,1024); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texCanvas); gl.generateMipmap(gl.TEXTURE_2D); var tex1=document.getElementById("texture1"); tex1.crossOrigin="Anonymous"; tex1.onload = function() { tex1.crossOrigin="Anonymous"; ctx.drawImage(tex1,0,0,600,600); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2); } gl.drawArrays(gl.TRIANGLES, 0, 3); //console.log(heightMap); vertices = [ ]; var rays=[]; const iTimet = gl.getUniformLocation(shaderProgram, "iTime"); const camAng = gl.getUniformLocation(shaderProgram, "cameraAngle"); const glPlayer = gl.getUniformLocation(shaderProgram, "playerPosition"); function roun(n){ return Math.sqrt(1.0-(nn)); } vertices = []; var norm=[]; var uvst=[]; const fileContents = shackModel; function constructWall(x,y,z){ var ou=[[],[],[]]; for(var x=0;x<100;x++){ for(var y=0;y<12;y++){ ou[0].push(0+x,0+y0.6,0 ,1+x,0+y0.6,0 ,0+x,0.6+0.6y,0 ,0+x,0.6+0.6y,0 ,1+x,0+0.6y,0 ,1+x,0.6+0.6y,0); ou[1].push(-0.05,-0.05,-1 ,0.05,-0.05,-1 ,-0.05,0.05,-1 ,-0.05,0.05,-1 ,0.05,-0.05,-1 ,0.05,0.05,-1); ou[2].push(0,0,0,1,0,0,0,1,0,0,1,0,1,0,0,1,1,0); } } return ou; } const objFile = new OBJFile(fileContents); var pm=objFile.parse(); var sp=0; var sp2=0; var sp3=0; for(var inde=0;inde<3;inde++){ var ind=pm.models[inde].faces; var coo=pm.models[inde].vertices; var noor=pm.models[inde].vertexNormals; var uves=pm.models[inde].textureCoords; //console.log(ind) var res=4; for(var x=0;x<ind.length;x++){ for(var g=2;g<ind[x].vertices.length;g++){ var cer1=coo[ind[x].vertices[0].vertexIndex-1-sp] var cer2=coo[ind[x].vertices[g-1].vertexIndex-1-sp] var cer3=coo[ind[x].vertices[g].vertexIndex-1-sp] vertices.push(cer1.x,-cer1.y,cer1.z,cer2.x,-cer2.y,cer2.z,cer3.x,-cer3.y,cer3.z); if(vertices.length<18){ console.log(vertices); } var ce1=noor[ind[x].vertices[0].vertexNormalIndex-1-sp2] var ce2=noor[ind[x].vertices[g-1].vertexNormalIndex-1-sp2] var ce3=noor[ind[x].vertices[g].vertexNormalIndex-1-sp2] norm.push(ce1.x,-ce1.y,ce1.z,ce2.x,-ce2.y,ce2.z,ce3.x,-ce3.y,ce3.z); var ue1=uves[ind[x].vertices[0].textureCoordsIndex-1-sp3] var ue2=uves[ind[x].vertices[g-1].textureCoordsIndex-1-sp3] var ue3=uves[ind[x].vertices[g].textureCoordsIndex-1-sp3] uvst.push(ue1.u,ue1.v,0,ue2.u,ue2.v,0,ue3.u,ue3.v,0) } } sp+=pm.models[inde].vertices.length; sp2+=pm.models[inde].vertexNormals.length; sp3+=pm.models[inde].textureCoords.length; } // console.log(vertices) / for(var i=0;i<vertices.length;i+=9){ var U = new Vector(vertices[i+3],vertices[i+4],vertices[i+5]) var V = new Vector(vertices[i+6],vertices[i+7],vertices[i+8]) U=U.subtract(new Vector(vertices[i],vertices[i+1],vertices[i+2])) V=V.subtract(new Vector(vertices[i],vertices[i+1],vertices[i+2])) var normal = new Vector(); normal.x = ( U.y * V.z) - ( U.z * V.y) normal.y = ( U.z * V.x) - ( U.x * V.z) normal.z = ( U.x * V.y) - ( U.y * V.x) // norm.push(normal.x,normal.y,normal.z,normal.x,normal.y,normal.z,normal.x,normal.y,normal.z); } / gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(coord); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, normal_buffer); gl.vertexAttribPointer(norms, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(norms); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(norm), gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, uv_buffer); gl.vertexAttribPointer(texuv, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(texuv); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(uvst), gl.STATIC_DRAW); // turn on depth testing gl.bindBuffer(gl.ARRAY_BUFFER, normal_buffer); gl.enable(gl.DEPTH_TEST); // tell webgl to cull faces gl.enable(gl.CULL_FACE); gl.cullFace(gl.BACK); const posBuffer2 = gl2.createBuffer(); gl2.bindBuffer(gl.ARRAY_BUFFER, posBuffer2); gl2.bufferData(gl.ARRAY_BUFFER, positions, gl2.STATIC_DRAW); gl.viewport(0, 0, 600, 600); gl2.viewport(0, 0, 600, 600); gl2.vertexAttribPointer(aPosition2, 2, gl2.FLOAT, false, 0, 0); gl2.useProgram(program2); gl2.enableVertexAttribArray(aPosition2); const posBuffer3 = gl3.createBuffer(); gl3.bindBuffer(gl3.ARRAY_BUFFER, posBuffer3); gl3.bufferData(gl3.ARRAY_BUFFER, positions, gl3.STATIC_DRAW); gl3.viewport(0, 0, 600, 600); gl3.clearColor(0, 0, 0, 0); gl3.useProgram(program3); gl3.enableVertexAttribArray(aPosition3); gl3.vertexAttribPointer(aPosition3, 2, gl.FLOAT, false, 0, 0); gl3.activeTexture(gl3.TEXTURE0); gl3.bindTexture(gl3.TEXTURE_2D, texture03); gl3.uniform1i(iChannel03, 0); gl3.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl3.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl3.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); var drawl=function() { window.requestAnimationFrame(drawl); now = performance.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); if(key.g){ document.getElementById("my_Canvas").style="width:600px;"; }else{ document.getElementById("my_Canvas").style="width:600px;"; } frameCount+=10.0; thetaz=-(mouseX-300)/220; thetax=-(mouseY-300)/240; if(thetax<-Math.PI/2){ thetax=-Math.PI/2; } if(thetax>Math.PI/2){ thetax=Math.PI/2; } // var cards=new Vector(30,0) cards=cards.rotateBy(thetaz); if(key.w){ player.y+=cards.x; player.x+=cards.y; } if(key.s){ player.y-=cards.x; player.x-=cards.y; } if(key.a){ player.y+=cards.y; player.x-=cards.x; } if(key.d){ player.y-=cards.y; player.x+=cards.x; } if(key.Shift){ player.z+=30.0; } if(key[" "]){ player.z-=30.0; } gl.uniform1f(iTimet, frameCount); gl.uniform2f(camAng, thetaz,thetax); //gl.uniform2f(camAng, -frameCount/250+3.1415/2+thetaz/2,thetax/2-0.5); gl.uniform3f(glPlayer, player.x/150,-player.z/150,-player.y/150); //gl.uniform3f(glPlayer, Math.cos(frameCount/250)29(Math.sin(frameCount/1000)0.35+0.65),59(Math.sin(frameCount/1000)0.1+0.9),Math.sin(frameCount/250)29(Math.sin(frameCount/1000)*0.35+0.65)+2); frameCount+=1; // ctx.fillStyle="rgb(2,2,2,1)" // ctx.fillStyle="rgb(250,0,0)" ctx.clearRect(0,0,600,600); // gl3.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT); gl3.uniform1f(drawx, thetaz); gl3.uniform1f(drawy, thetax); gl2.uniform1f(drawx2, thetaz); gl2.uniform1f(drawy2, thetax); gl2.uniform1f(iTime2, frameCount); gl3.uniform2f(camAng2, thetaz,thetax); gl2.uniform2f(camAng2, thetaz,thetax); gl.drawArrays(gl.TRIANGLES, 0, (vertices.length/3)); ctx.drawImage(canvas,0,0); ctx.fillStyle="rgb(255,40,40)" gl3.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2); gl2.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(skyboxCanvas, 0, 0); gl3.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(glBloom, 0, 0); pmouseX = mouseX; pmouseY= mouseY clickToggle=false; click=false; } } drawl(); //<script> </script> <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=Nosifer&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet"> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLukvY-DCAw
Votes	123
Spin-Offs	9
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
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, 1730599756318
Updated	24 days ago, 1734464281915
Source Deleted	unknown