webgl实现时光穿梭星际旅行动画效果代码
代码语言:html
所属分类:动画
代码描述:webgl实现时光穿梭星际旅行动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body> <script type="x-shader/x-fragment">#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ precision highp float; out vec4 O; uniform float time; uniform vec2 resolution; #define FC gl_FragCoord.xy #define R resolution #define T time #define hue(a) (.6+.6*cos(6.3*(a)+vec3(0,83,21))) float rnd(float a) { vec2 p=fract(a*vec2(12.9898,78.233)); p+=dot(p,p*345.); return fract(p.x*p.y); } vec3 pattern(vec2 uv) { vec3 col=vec3(0); for (float i=.0; i++<20.;) { float a=rnd(i); vec2 n=vec2(a,fract(a*34.56)), p=sin(n*(T+7.)+T*.5); float d=dot(uv-p,uv-p); col+=.00125/d*hue(dot(uv,uv)+i*.125+T); } return col; } void main(void) { vec2 uv=(FC-.5*R)/min(R.x,R.y); vec3 col=vec3(0); float s=2.4, a=atan(uv.x,uv.y), b=length(uv); uv=vec2(a*5./6.28318,.05/tan(b)+T); uv=fract(uv)-.5; col+=pattern(uv*s); O=vec4(col,1); }</script> <script > window.onload = init function init() { let renderer, canvas const dpr = Math.max(1, .5*devicePixelRatio) const resize = () => { const { innerWidth: width, innerHeight: height } = window canvas.width = width * dpr canvas.height = height * dpr if (renderer) { renderer.updateScale(dpr) } } const source = document.querySelector("script[type='x-shader/x-fragment']").textContent canvas = document.createElement("canvas") document.title = "😌" document.body.innerHTML = "" document.body.appendChild(canvas) document.body.style = "margin:0;touch-action:none;overflow:hidden" canvas.style.width = "100%" canvas.style.height = "auto" canvas.style.userSelect = "none" renderer = new Renderer(canvas, dpr) renderer.setup() renderer.init() resize() if (renderer.test(source) === null) { renderer.updateShader(source) } window.onresize = resize const loop = (now) => { renderer.render(now) requestAnimationFrame(loop) } loop(0) } class Renderer { #vertexSrc = "#version 300 es\nprecision highp float;\nin vec4 position;\nvoid main(){gl_Position=position;}" #fragmtSrc = "#version 300 es\nprecision highp float;\nout vec4 O;\nuniform float time;\nuniform vec2 resolution;\nvoid main() {\n\tvec2 uv=gl_FragCoord.xy/resolution;\n\tO=vec4(uv,sin(time)*.5+.5,1);\n}" #vertices = [-1, 1, -1, -1, 1, 1, 1, -1] constructor(canvas, scale) { this.canvas = canvas this.scale = scale this.gl = canvas.getContext("webgl2") this.gl.viewport(0, 0, canvas.width * scale, canvas.height * scale) this.shaderSource = this.#fragmtSrc this.mouseCoords = [0, 0] this.pointerCoords = [0, 0] this.nbrOfPointers = 0 } get defaultSource() { return this.#fragmtSrc } updateShader(source) { this.reset() this.shaderSource = source this.setup() this.init() } updateMouse(coords) { this.mouseCoords = coords } updatePointerCoords(coords) { this.pointerCoords = coords } updatePointerCount(nbr) { this.nbrOfPointers = nbr } updateScale(scale) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0