curtains实现webgl多彩渐变动画背景效果代码
代码语言:html
所属分类:背景
代码描述:curtains实现webgl多彩渐变动画背景效果代码
代码标签: curtains webgl 多彩 渐变 动画 背景
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> #plane { position: absolute; inset: 0; } </style> </head> <body > <script type="x-shader/x-vertex" id="vs"> precision mediump float; // those are the mandatory attributes that the lib sets attribute vec3 aVertexPosition; attribute vec2 aTextureCoord; // those are mandatory uniforms that the lib sets and that contain our model view and projection matrix uniform mat4 uMVMatrix; uniform mat4 uPMatrix; // our texture matrix that will handle image cover uniform mat4 uTextureMatrix0; // pass your vertex and texture coords to the fragment shader varying vec3 vVertexPosition; varying vec2 vTextureCoord; void main() { vec3 vertexPosition = aVertexPosition; gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0); // set the varyings // here we use our texture matrix to calculate the accurate texture coords vTextureCoord = (uTextureMatrix0 * vec4(aTextureCoord, 0.0, 1.0)).xy; vVertexPosition = vertexPosition; } </script> <script type="x-shader/x-fragment" id="fs"> precision highp float; uniform vec2 resolution; uniform vec2 u_mouse; uniform float uTime; // // Description : Array and textureless GLSL 2D/3D/4D simplex // noise functions. // Author : Ian McEwan, Ashima Arts. // Maintainer : stegu // Lastmod : 20201014 (stegu) // License : Copyright (C) 2011 Ashima Arts. All rights reserved. // Distributed under the MIT License. See LICENSE file. // https://github.com/ashima/webgl-noise // https://github.com/stegu/webgl-noise // vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 permute(vec4 x) { return mod289(((x*34.........完整代码请登录后点击上方下载按钮下载查看
网友评论0