Viewing Program

Program Data

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

Title	Varying LOD Terrain
ID	5599318506913792
Created	4 months ago, 1725815705076
Updated	4 months ago, 1725823239605
Code	<!DOCTYPE html> <html> <title>Varying LOD Terrain</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> <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=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet"> <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; 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 mediump float; uniform vec2 u_resolution; uniform float drawx; uniform float drawy; uniform float clicked; uniform float iTime; out vec4 fragColor; vec2 Rotate(vec2 uv,float ang){ return vec2(uv.xcos(ang)-uv.ysin(ang),uv.xsin(ang)+uv.ycos(ang)); } 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; } 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); } 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.rgb = textur(uv).rgb; fragColor.a=1.0; // 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 accum=0.0; for(float x=1.0;x<150.0;x+=1.0){ vec2 off=vec2(sin(xrandom(vec2(x)5.0))(x/6000.0),cos(xrandom(vec2(x/2.0)10.0))(x/6000.0)); vec3 he = textur(uv-off).rgb; if(length(he)>0.5){ fragColor.rgb=mix(fragColor.rgb,he1.0+0.5,0.01pow(length(he)/1.3,4.0)); } } fragColor.rgb=1.0; } </script> <script id = 'vertex-skybox' type = 'glsl'>#version 300 es in vec2 aPosition; out vec2 pos; void main() { pos = aPosition; gl_Position = vec4(aPosition, 0, 1); } </script> <script> </script> <script id = 'fragment-skybox' type = 'glsl'>#version 300 es precision mediump sampler2D; uniform sampler2D iChannel0; precision mediump 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; } 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.3)), //Ray direction cell = vec3(0,0,0); vec2 angle = -(iMouse.xy)/vec2(-1.5,1.5); Rotate(pos,angle); Rotate(ray,angle); Rotate(cam,angle(iTime0.0+1.0)); #define iterations 8 #define formuparam 0.91 #define volsteps 10 #define stepsize 0.5 #define tile 0.92 #define brightness 0.0004 #define darkmatter 0.900 #define distfading 0.890 #define saturation 0.550 vec3 from=vec3(10.0); vec3 dir = normalize(ray); float s=0.7,fade=1.0; vec3 v=vec3(0.); for (int r=0; r<volsteps; r++) { vec3 p=from+sdir.5; p = abs(vec3(tile)-mod(p,vec3(tile2.))); float pa,a=pa=0.; for (int i=0; i<iterations; i++) { p=abs(p)/dot(p,p)-formuparam; a+=abs(length(p)-pa); pa=length(p); } float dm=max(0.,darkmatter-aaaa.001); a=aa; if (r>10) fade=1.-dm; v+=fade; v+=vec3(sa/1000.0,ss,ssss)abrightnessfade; // coloring based on distance fade=distfading; s+=stepsize; } v=mix(vec3(length(v)),v,saturation); //color adjust v.x=1.4; vec3 background = vec3(v.002); background=clamp(background,0.0,1.0)/1.02; fragColor = vec4(background,1); } </script> <script id = 'vertex-shader' type = 'glsl'>#version 300 es in vec3 coordinates; in vec3 normal; precision lowp 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<7;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; void main() { float fov=0.9; pos=coordinates; float he=max(fbm(pos.xz/90.0)/0.3,1.6); pos.y-=he; 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; surfaceCoords.y-=he; pos.z=-1.0; gl_Position = vec4(pos,silly); } </script> <script id = 'fragment-shader' type = 'glsl'>#version 300 es precision mediump float; in vec3 surfaceCoords; in vec3 pp; in vec3 no; 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); } 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<d;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); } void main() { vec3 pp2=pp.xzy; vec3 triNormal=vec3(0.0,-0.02,0.0); vec2 po=surfaceCoords.xz; float detail=14.0/(1.0+length(surfaceCoords.xyz+pp.xyz)/40.0); float b=fbm((po)/90.0,int(detail))/0.3; vec2 n=vec2(b-fbm(po/90.0+vec2(0.0001,0.0),int(detail))/0.3,b-fbm(po/90.0+vec2(0.0,0.0001),int(detail))/0.3); triNormal.xz-=n; if(surfaceCoords.y+b/10.0>=-1.6){ triNormal.xz+=n1.0; } triNormal=normalize(triNormal); vec3 lightCoords=pp-vec3(0.0,0.0,-0.0); vec3 triangleColor=vec3(0.3)1.0; if(surfaceCoords.y+b/10.0>=-1.6){ triangleColor=mix(vec3(1.0,0.2,0.2),vec3(0.99,0.7,0.1),clamp(fbm(surfaceCoords.xz/4.0,int(detail))/3.0,0.0,1.0))1.5; } triangleColor=clamp(triangleColor,0.0,1.0); vec3 hehe = -normalize(surfaceCoords-ppvec3(-1.0,1.0,-1.0)); float li=max(dot(normalize(hehe),-normalize(triNormal)),0.0); float li2=max(dot(normalize(hehe),-normalize(triNormal)),0.0); vec3 spe=vec3(li2)vec3(1.0,0.999,0.998); spe=spe; spe=spe; spe=spe; spe=spe; spe=spe; FragColor = vec4(triangleColorli+spe0.4,1.0); } </script> <script type="module"> console.clear(); var mouseX=300,pmouseX=0,mouseY=300,pmouseY=0,clicked=false,key={}; var click=false; var clickToggle=false; function getPointer() { if (canvas.requestPointerLock) { window.addEventListener("mousemove", function(ev) { mouseX = pmouseX + ev.movementX/1.5; mouseY = pmouseY + ev.movementY/1.5; }); canvas.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) => { 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; }); window.addEventListener("keydown", function(e) { if(["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Shift"].indexOf(e.code) > -1) { e.preventDefault(); } }, false); 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 = document.getElementById('m'); var gl = canvas.getContext('webgl2'); /==========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(); //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"); // 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 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 = 60; var delta; var player=new Vector(-25000,25000,-1000); var frameCount=4900; var interval = 1000 / fps; var pts=[]; const iChannel0 = gl.getUniformLocation(shaderProgram,"iChannel0"); let texture0 = gl.createTexture(); var canvas2 = document.getElementById('my_Canvas'), ctx = canvas2.getContext('2d'); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); 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 res=2; for(var x=0;x<=600;x+=res){ for(var y=0;y<=600;y+=res){ var h1=0; var h2=0; var h3=0; var h4=0; var x2=x/2; var y2=y/2; var res2=res/2; // var ar=[x2,h1,y2,x2+res2,h2,y2,x2,h3,y2+res2,x2+res2,h4,y2+res2]; var ar2=[x2,h1,y2,x2+res2,h2,y2,x2,h3,y2+res2,x2+res2,h4,y2+res2]; vertices.push(ar2[0],ar2[1],ar2[2],ar2[6],ar2[7],ar2[8],ar2[3],ar2[4],ar2[5]); vertices.push(ar2[9],ar2[10],ar2[11],ar2[3],ar2[4],ar2[5],ar2[6],ar2[7],ar2[8]); } } 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); // turn on depth testing 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, 1); 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.uniform3f(glPlayer, player.x/150,-player.z/150,-player.y/150); frameCount+=1; // ctx.fillStyle="rgb(2,2,2,1)" // ctx.fillStyle="rgb(250,0,0)" gl3.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT); gl2.uniform1f(drawx2, thetaz1.5); gl2.uniform1f(drawy2, thetax1.5); gl.drawArrays(gl.TRIANGLES, 0, (vertices.length/3)); gl2.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(skyboxCanvas, 0, 0); ctx.drawImage(canvas,0,0); gl3.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2); gl3.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(glBloom, 0, 0); pmouseX = mouseX; pmouseY= mouseY clickToggle=false; click=false; } } drawl(); //<script> </script> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNv0zpH5CQw
Votes	14
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	Bearkirb314🐻‍❄️
Author Name	BearKirb314
Author ID	kaid_375460112550893828689953
Author Profile Access	PUBLIC

Archive Data

Added	4 months ago, 1725816062441
Updated	4 months ago, 1725825969573
Source Deleted	unknown