原生webgl未知球形世界效果
代码语言:html
所属分类:动画
代码描述:原生webgl未知球形世界效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #000; margin: 0; overflow: hidden; background-repeat: no-repeat; } canvas { position : absolute; } </style> </head> <body translate="no"> <script> "use strict"; let canv, gl; let dimension; let animState; let midx, midy; let widthHandle, heightHandle; let lookAtHandle; let lookFromHandle; let fluidHandle; const mrandom = Math.random; const mfloor = Math.floor; const mround = Math.round; const mceil = Math.ceil; const mabs = Math.abs; const mmin = Math.min; const mmax = Math.max; const mPI = Math.PI; const mPIS2 = Math.PI / 2; const m2PI = Math.PI * 2; const msin = Math.sin; const mcos = Math.cos; const matan2 = Math.atan2; const mhypot = Math.hypot; const msqrt = Math.sqrt; //----------------------------------------------------------------------------- // miscellaneous functions //----------------------------------------------------------------------------- //************** Shader sources ************** let vertexSource = ` attribute vec2 position; void main() { gl_Position = vec4(position, 0.0, 1.0); } `; let fragmentSource = ` // "RayMarching starting point" // by Martijn Steinrucken aka BigWings/CountFrolic - 2020 // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. // // You can use this shader as a template for ray marching shaders // https://www.shadertoy.com/view/WtGXDD precision mediump float; uniform float width; uniform float height; uniform vec3 lookAt; uniform vec3 lookFrom; uniform float fluid; vec3 iResolution; #define MAX_STEPS 100 #define MAX_DIST 100. #define SURF_DIST .001 float GetDist(vec3 p) { float d1 = fluid * (sin (p.x)+2.9 + sin (p.y ) + sin (p.z)); return d1; } float RayMarch(vec3 rorigin, vec3 rdirection) { float dO=0.; for(int i=0; i<MAX_STEPS; i++) { vec3 p = rorigin + rdirection*dO; float dS = GetDist(p); dO += dS; if(dO>MAX_DIST || abs(dS)<SURF_DIST) break; } return dO; } vec3 GetNormal(vec3 p) { float d = GetDist(p); vec2 e = vec2(.001, 0); vec3 n = d - vec3( GetDist(p-e.xyy), GetDist(p-e.yxy), GetDist(p-e.yyx)); return normalize(n); } vec3 GetRayDir(vec2 uv, vec3 p, vec3 l, float z) { // z for zoom ??? vec3 f = normalize(l-p), r = normalize(cross(vec3(0,1,0), f)), u = cross(f,r), c = f*z, i = c + uv.x*r + uv.y*u, d = normalize(i); return d; } mat2 Rot (float angle) { return mat2(cos(angle),-sin(angle), sin(angle),cos(angle)); } void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = (fragCoord-.5*iResolution.xy)/iResolution.y; vec3 col = vec3(0); vec3 rd = GetRayDir(uv, lookFrom, lookAt, 2.0); float d = RayMarch(lookFrom, rd); if(d<MAX_DIST) { vec3 p = lookFrom + rd * d; vec3 n = GetNormal(p); float dif = dot(n, normalize(vec3(3,2,1)))*.5+.5; col = vec3(sin(d/3.0)/2.0 + 0.5, step(0.0,cos(d/3.0)), cos(d/5.0)/2.0 + 0.3)* dif; } col = pow(col, vec3(0.5)); // gamma correction fragColor = vec4(col,1.0); } void main(){ iResolution = vec3(width, height, 1.0); mainImage (gl_FragColor, gl_FragCoord.xy); } `; //************** Utility functions ************** //Compile shader and combine with source function compileShader(shaderSource, shaderType) { let shader = gl.createShader(shaderType); gl.shaderSource(shader, shaderSource); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { throw "Shader compile failed with: " + gl.getShaderInfoLog(shader); } return shader; } //From https://codepen.io/jlfwong/pen/GqmroZ //Utility to complain loudly if we fail to find the attribute/uniform function getAttribLocation(program, name) { let attributeLocation = gl.getAttribLocation(program, name); if (attributeLocation === -1) { throw 'Cannot find attribute ' + name + '.'; } return attribu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0