使用WebGL顶点和片段着色器构建的光怪陆离（彩虹迷雾）动画

GLSL Color Vertex and Fragment Shaders

webgl, shader, color

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2811
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var _class, _temp, _initialiseProps;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

// Canvas Helper Class //
var Canvas = (_temp = _class = function Canvas(element) {
  _classCallCheck(this, Canvas);

_initialiseProps.call(this);

this.element = element || document.body;
}, _initialiseProps = function _initialiseProps() {
  var _this = this;

this.setViewport = function (element) {
    var canvasElement = element;
    var width = ~ ~(document.documentElement.clientWidth, window.innerWidth || 0);
    var height = ~ ~(document.documentElement.clientHeight, window.innerHeight || 0);
    _this.width = width;
    _this.height = height;
    canvasElement.width = _this.width;
    canvasElement.height = _this.height;
    var canvasObject = {
      surface: canvasElement.getContext('webgl'),
      canvas: canvasElement,
      width: _this.width,
      height: _this.height
    };
    return canvasObject;
  };

this.createCanvas = function (name) {
    var canvasElement = undefined;
    if (document.getElementById(name)) {
      canvasElement = document.getElementById(name);
    } else {
      canvasElement = document.createElement('canvas');
      canvasElement.id = name;
    }
    _this.setViewport(canvasElement);
    if (!document.getElementById(name)) {
      _this.element.appendChild(canvasElement);
    }
    var canvasContext = canvasElement.getContext('webgl');
    if (!canvasContext) {
      console.error('no webgl avaiable');
    }
    var canvasObject = {
      surface: canvasElement.getContext('webgl'),
      canvas: canvasElement,
      width: _this.width,
      height: _this.height
    };
    return canvasObject;
  };
}, _temp);
;
var vertexSource = '\nattribute vec4 vPosition;\nvoid main (void) {\n  gl_Position = vPosition;\n}\n';;
var fragmentSource = '\nprecision mediump float;\nuniform float time;\nuniform float angle;\nuniform float dec;\nuniform vec2 resolution;\nvarying vec2 vUv;\nvarying float noise;\n#define PI 3.14159265358979323846264\nvec3 mod289(vec3 x)\n{\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\nvec4 mod289(vec4 x)\n{\n  return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\nvec4 permute(vec4 x)\n{\n  return mod289(((x*34.0)+1.0)*x);\n}\nvec4 taylorInvSqrt(vec4 r)\n{\n  return 1.79284291400159 - 0.85373472095314 * r;\n}\nvec3 fade(vec3 t) {\n  return t*t*t*(t*(t*6.0-15.0)+10.0);\n}\n// Classic Perlin noise\nfloat cnoise(vec3 P)\n{\n  vec3 Pi0 = floor(P); // Integer part for indexing\n  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1\n  Pi0 = mod289(Pi0);\n  Pi1 = mod289(Pi1);\n  vec3 Pf0 = fract(P); // Fractional part for interpolation\n  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\n  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\n  vec4 iy = vec4(Pi0.yy, Pi1.yy);\n  vec4 iz0 = Pi0.zzzz;\n  vec4 iz1 = Pi1.zzzz;\n  vec4 ixy = permute(permute(ix) + iy);\n  vec4 ixy0 = permute(ixy + iz0);\n  vec4 ixy1 = permute(ixy + iz1);\n  vec4 gx0 = ixy0 * (1.0 / 7.0);\n  vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\n  gx0 = fract(gx0);\n  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\n  vec4 sz0 = step(gz0, vec4(0.0));\n  gx0 -= sz0 * (step(0.0, gx0) - 0.5);\n  gy0 -= sz0 * (step(0.0, gy0) - 0.5);\n  vec4 gx1 = ixy1 * (1.0 / 7.0);\n  vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\n  gx1 = fract(gx1);\n  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\n  vec4 sz1 = step(gz1, vec4(0.0));\n  gx1 -= sz1 * (step(0.0, gx1) - 0.5);\n  gy1 -= sz1 * (step(0.0, gy1) - 0.5);\n  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\n  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\n  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\n  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\n  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\n  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\n  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\n  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\n  vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\n  g000 *= norm0.x;\n  g010 *= norm0.y;\n  g100 *= norm0.z;\n  g110 *= norm0.w;\n  vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\n  g001 *= norm1.x;\n  g011 *= norm1.y;\n  g101 *= norm1.z;\n  g111 *= norm1.w;\n  float n000 = dot(g000, Pf0);\n  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\n  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\n  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\n  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\n  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\n  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\n  float n111 = dot(g111, Pf1);\n  vec3 fade_xyz = fade(Pf0);\n  vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\n  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\n  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);\n  return 2.2 * n_xyz;\n}\n// Classic Perlin noise, periodic variant\nfloat pnoise(vec3 P, vec3 rep)\n{\n  vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period\n  vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period\n  Pi0 = mod289(Pi0);\n  Pi1 = mod289(Pi1);\n  vec3 Pf0 = fract(P); // Fractional part for interpolation\n  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\n  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\n  vec4 iy = vec4(Pi0.yy, Pi1.yy);\n  vec4 iz0 = Pi0.zzzz;\n  vec4 iz1 = Pi1.zzzz;\n  vec4 ixy = permute(permute(ix) + iy);\n  vec4 ixy0 = permute(ixy + iz0);\n  vec4 ixy1 = permute(ixy + iz1);\n  vec4 gx0 = ixy0 * (1.0 / 7.0);\n  vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\n  gx0 = fract(gx0);\n  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\n  vec4 sz0 = step(gz0, vec4(0.0));\n  gx0 -= sz0 * (step(0.0, gx0) - 0.5);\n  gy0 -= sz0 * (step(0.0, gy0) - 0.5);\n  vec4 gx1 = ixy1 * (1.0 / 7.0);\n  vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\n  gx1 = fract(gx1);\n  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\n  vec4 sz1 = step(gz1, vec4(0.0));\n  gx1 -= sz1 * (step(0.0, gx1) - 0.5);\n  gy1 -= sz1 * (step(0.0, gy1) - 0.5);\n  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\n  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\n  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\n  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\n  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\n  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\n  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\n  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\n  vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\n  g000 *= norm0.x;\n  g010 *= norm0.y;\n  g100 *= norm0.z;\n  g110 *= norm0.w;\n  vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\n  g001 *= norm1.x;\n  g011 *= norm1.y;\n  g101 *= norm1.z;\n  g111 *= norm1.w;\n  float n000 = dot(g000, Pf0);\n  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\n  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\n  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\n  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\n  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\n  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\n  float n111 = dot(g111, Pf1);\n  vec3 fade_xyz = fade(Pf0);\n  vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\n  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\n  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);\n  return 2.2 * n_xyz;\n}\nfloat turbulence( vec3 p ) {\n  float w = 100.0;\n  float t = -.5;\n  for (float f = 1.0 ; f <= 10.0 ; f++ ){\n    float power = pow( 2.0, f );\n    t += abs( pnoise( vec3( power * p ), vec3( 10.0, 10.0, 10.0 ) ) / power );\n  }\n  return t;\n}\nfloat hash (float v) {\n  return smoothstep(0.0, 1.0, (sin(v) + cos(v))) * 10.0;\n}\nfloat dist(float a,float b,float c,float d) {\n   return sqrt(float((a - c) * (a - c) + (b - d) * (b - d)));\n}\nvoid main() {\n  vec2 q = gl_FragCoord.xy;\n  vec2 rz = resolution.xy;\n  float t = time * 55.0;\n  float noise = cnoise(vec3(q.x / dec, q.y / dec, time));\n  float d = abs(sin(dist(q.x, q.y, rz.x / 2.0, rz.y / 2.0) / 255.0 - time));\n  float e = abs(cos(dist(q.x, q.y, rz.x / 2.0, rz.y / 2.0) / 255.0 - time));\n  float c = noise / d;\n  c += (noise / 3.0 ) * 0.1;\n  float r = abs(cos(c * 255.0 * PI / 180.0) * 1.0);\n  float g = abs(sin(e * angle * PI / 180.0) * 1.0);\n  float b = abs(sin(c * 255.0 * PI / 180.0) * 1.0);\n  vec3 colorz = vec3(r, g, b);\n  gl_FragColor = vec4(colorz, 1.0);\n}\n';;
// Render Class Object //

var Render = function Render() {
  var _this2 = this;

_classCallCheck(this, Render);

this.init = function () {
    _this2.createGraphics(vertexSource, fragmentSource);

_this2.canvas.addEventListener('mousemove', function (e) {
      _this2.mouseX = e.pageX / _this2.canvas.width;
      _this2.mouseY = e.pageY / _this2.canvas.height;
    }, false);

_this2.createGUI();
    _this2.renderLoop();
  };

this.createGUI = function () {
    _this2.options = {
      angle: _this2.angle,
      dec: _this2.dec
    };
    _this2.gui = new dat.GUI();
    var folderRender = _this2.gui.addFolder('Render Options');

folderRender.add(_this2.options, 'angle', 1, 255).step(1).onFinishChange(function (value) {
      _this2.options.angle = value;
      _this2.setOptions(_this2.options);
    });
    folderRender.add(_this2.options, 'dec', 1, 255).step(1).onFinishChange(function (value) {
      _this2.options.dec = value * 1.00;
      _this2.setOptions(_this2.options);
    });
    folderRender.open();
    _this2.setOptions(_this2.options);
  };

this.setOptions = function (options) {
    _this2.angle = options.angle || _this2.angle;
    // this.gl.uniform1f(this.ua, this.angle * 0.001);
    _this2.gl.uniform1f(_this2.ua, _this2.angle);
    _this2.dec = options.dec || _this2.dec;
    _this2.gl.uniform1f(_this2.ud, _this2.dec);
  };

this.resetCanvas = function () {
    _this2.shaderCanvas = _this2.can.setViewport(_this2.canvas);
    _this2.gl = _this2.shaderCanvas.surface;
    _this2.canvas = _this2.shaderCanvas.canvas;
    _this2.width = _this2.shaderCanvas.width;
    _this2.height = _this2.shaderCanvas.height;
    _this2.gl.viewport(0, 0, _this2.width, _this2.height);
    _this2.clearCanvas();
  };

this.createShader = function (type, source) {
    var shader = _this2.gl.createShader(type);
    _this2.gl.shaderSource(shader, source);
    _this2.gl.compileShader(shader);
    var success = _this2.gl.getShaderParameter(shader, _this2.gl.COMPILE_STATUS);
    if (!success) {
      console.log(_this2.gl.getShaderInfoLog(shader));
      _this2.gl.deleteShader(shader);
      return false;
    }
    return shader;
  };

this.createProgram = function (vertexSource, fragmentSource) {
    // Setup Vertext/Fragment Shader functions //
    _this2.vertexShader = _this2.createShader(_this2.gl.VERTEX_SHADER, vertexSource);
    _this2.fragmentShader = _this2.createShader(_this2.gl.FRAGMENT_SHADER, fragmentSource);

// Setup Program and Attach Shader functions //
    var program = _this2.gl.createProgram();
    _this2.gl.attachShader(program, _this2.vertexShader);
    _this2.gl.attachShader(program, _this2.fragmentShader);
    _this2.gl.linkProgram(program);
    _this2.gl.useProgram(program);

return program;
  };

this.createGraphics = function (vertexSource, fragmentSource) {
    // Create the Program //
    _this2.program = _this2.createProgram(vertexSource, fragmentSource);
    // Create and Bind buffer //
    _this2.buffer = _this2.gl.createBuffer();
    _this2.gl.bindBuffer(_this2.gl.ARRAY_BUFFER, _this2.buffer);

_this2.gl.bufferData(_this2.gl.ARRAY_BUFFER, new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]), _this2.gl.STATIC_DRAW);

_this2.vPosition = _this2.gl.getAttribLocation(_this2.program, 'vPosition');
    _this2.gl.vertexAttribPointer(_this2.vPosition, 2, // size: 2 components per iteration
    _this2.gl.FLOAT, // type: the data is 32bit floats
    false, // normalize: don't normalize the data
    0, // stride: 0 = move forward size * sizeof(type) each iteration to get the next position
    0 // start at the beginning of the buffer
    );
    _this2.gl.enableVertexAttribArray(_this2.vPosition);
    _this2.importProgram();
  };

this.clearCanvas = function () {
    _this2.gl.clearColor(0, 0, 0, 0);
    _this2.gl.clear(_this2.gl.COLOR_BUFFER_BIT);
  };

this.updateUniforms = function () {
    _this2.importUniforms();
    _this2.gl.drawArrays(_this2.gl.TRIANGLE_FAN, // primitiveType
    0, // Offset
    4 // Count
    );
  };

this.importProgram = function () {
    // Function to extend for adding in program setup
    //
    _this2.ut = _this2.gl.getUniformLocation(_this2.program, 'time');
    _this2.ua = _this2.gl.getUniformLocation(_this2.program, 'angle');
    _this2.ud = _this2.gl.getUniformLocation(_this2.program, 'dec');
    _this2.resolution = new Float32Array([_this2.canvas.width, _this2.canvas.height]);
    _this2.gl.uniform2fv(_this2.gl.getUniformLocation(_this2.program, 'resolution'), _this2.resolution);
  };

this.importUniforms = function () {
    _this2.gl.uniform1f(_this2.ut, (Date.now() - _this2.start) / 1000);
  };

this.renderLoop = function () {
    _this2.frame++;
    _this2.updateUniforms();
    _this2.animation = window.requestAnimationFrame(_this2.renderLoop);
  };

this.frame = 0;
  this.angle = 70.0;
  this.dec = 215.0;
  this.start = Date.now();
  // Setup WebGL canvas and surface object //
  this.can = new Canvas();
  this.shaderCanvas = this.can.createCanvas('GLShaders');
  this.gl = this.shaderCanvas.surface;
  this.canvas = this.shaderCanvas.canvas;
  this.width = this.shaderCanvas.width;
  this.height = this.shaderCanvas.height;
  this.gl.viewport(0, 0, this.width, this.height);
  this.clearCanvas();
  window.addEventListener('resize', this.resetCanvas, true);
  this.init();
};

var demo = new Render(document.body);

编译

CSS

HTML

GLSL Color Vertex and Fragment Shaders

webgl, shader, color

编辑器支持Emmet

快捷键

GLSL Color Vertex and Fragment Shaders

webgl, shader, color

使用WebGL着色器和noise算法实现的浓雾云彩喷薄动画特效

WebGL Three.js 彩虹液态物质（液体）动画特效的着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：