HTML5 WebGL GLSL泡沫特效着色器代码

非规则泡泡爆破动画

three, webgl, bubble

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

class PostEffect {
  constructor(texture) {
    this.uniforms = {
      time: {
        type: 'f',
        value: 0,
      },
      resolution: {
        type: 'v2',
        value: new THREE.Vector2(512, 512),
      },
      texture: {
        type: 't',
        value: texture
      }
    };
    this.mesh = this.createMesh(texture);
  }
  createMesh() {
    return new THREE.Mesh(
      new THREE.PlaneBufferGeometry(2, 2),
      new THREE.RawShaderMaterial({
        uniforms: this.uniforms,
        vertexShader: document.getElementById('vs-post-effect').textContent,
        fragmentShader: document.getElementById('fs-post-effect').textContent,
      })
    );
  }
  render(time) {
    this.uniforms.time.value += time;
  }
}

class Point {
  constructor() {
    this.uniforms = {
      time: {
        type: 'f',
        value: 0
      },
      texture: {
        type: 't',
        value: this.createTexture()
      }
    };
    this.obj = this.createObj();
  }
  createObj() {
    const geometry = new THREE.BufferGeometry();
    const verticesBase = [];
    const radianBase = [];
    for (var i = 0; i < 16; i++) {
      verticesBase.push(0, 0, 0);
      radianBase.push(Math.random() * 360 * Math.PI * 2);
    }
    const vertices = new Float32Array(verticesBase);
    const radians = new Float32Array(radianBase);
    geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
    geometry.addAttribute('radian', new THREE.BufferAttribute(radians, 1));
    return new THREE.Points(
      geometry,
      new THREE.RawShaderMaterial({
        uniforms: this.uniforms,
        vertexShader: document.getElementById('vs-point').textContent,
        fragmentShader: document.getElementById('fs-point').textContent,
        transparent: true,
        depthWrite: false,
      })
    )
  }
  createTexture() {
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    let grad = null;
    let texture = null;

canvas.width = 128;
    canvas.height = 128;
    grad = ctx.createRadialGradient(64, 64, 0, 64, 64, 64);
    grad.addColorStop(0.0, 'rgba(255, 255, 255, 1)');
    grad.addColorStop(1.0, 'rgba(255, 255, 255, 0)');
    ctx.fillStyle = grad;
    ctx.arc(64, 64, 64, 0, Math.PI / 180, true);
    ctx.fill();

texture = new THREE.Texture(canvas);
    texture.minFilter = THREE.NearestFilter;
    texture.needsUpdate = true;
    return texture;
  };
  render(time) {
    this.uniforms.time.value += time;
  }
}

const renderer = new THREE.WebGLRenderer({
  alpha: true,
  canvas: document.getElementById('canvas-webgl')
});
const renderBack = new THREE.WebGLRenderTarget(512, 512);
const scene = new THREE.Scene();
const sceneBack = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
const cameraBack = new THREE.PerspectiveCamera(45, 1, 1, 10000);
const clock = new THREE.Clock();

const postEffect = new PostEffect(renderBack.texture);
const point = new Point();

const render = () => {
  point.render(clock.getDelta());
  renderer.render(sceneBack, cameraBack, renderBack);
  postEffect.render(clock.getDelta());
  renderer.render(scene, camera);
};
const renderLoop = () => {
  render();
  requestAnimationFrame(renderLoop);
};
const init = () => {
  renderer.setSize(512, 512);
  renderer.setClearColor(0xffffff, 0.0);
  cameraBack.position.set(0, 100, 100);
  cameraBack.lookAt(new THREE.Vector3());

scene.add(postEffect.mesh);
  sceneBack.add(point.obj);
  
  renderLoop();
}
init();

编译

CSS

HTML

<div class="l-contents">
  <canvas class="p-canvas-webgl" id="canvas-webgl"></canvas>
</div>
<script id="vs-post-effect" type="x-shader/x-vertex">
  attribute vec3 position;
  attribute vec2 uv;
  
  varying vec2 vUv;
  
  void main() {
    vUv = uv;
    gl_Position = vec4(position, 1.0);
  }
  
</script>
<script id="fs-post-effect" type="x-shader/x-fragment">
  precision highp float;
  
  uniform vec2 resolution;
  uniform sampler2D texture;
  uniform float time;
  
  varying vec2 vUv;
  
  vec3 convertHsvToRgb(vec3 c) {
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
  }
  
  void main() {
    vec4 color = texture2D(texture, vUv);
    float opacity = step(0.5, smoothstep(0.8, 0.9, color.a));
    gl_FragColor = vec4(convertHsvToRgb(vec3(time * 2.0, 0.6, 0.8)), 1.0) + vec4(1.0) * (1.0 - opacity);
  }
  
</script>
<script id="vs-point" type="x-shader/x-vertex">
  attribute vec3 position;
  attribute float radian;
  uniform mat4 modelViewMatrix;
  uniform mat4 projectionMatrix;
  uniform float time;
  
  const float interval = 6.0;
  
  vec3 polar(float radian1, float radian2, float radius) {
    return vec3(
      cos(radian1) * cos(radian2) * radius,
      sin(radian1) * radius,
      cos(radian1) * sin(radian2) * radius
    );
  }
  
  void main() {
    float now = mod(time, interval);
    vec3 updatePosition = polar(
      radian,
      radian * 3.0,
      now / interval * 20.0 + sin(time * 4.0 + radian) * now / interval * 10.0 + smoothstep(0.8, 0.9, now / interval) * 30.0
    );
    gl_PointSize = (
        30.0
        + now * 30.0
        + sin(now * 2.0 + radian) * 20.0
      ) * (smoothstep(0.0, 0.1, now / interval) * (1.0 - smoothstep(0.8, 0.9, now / interval)));
    gl_Position = projectionMatrix * modelViewMatrix * vec4(updatePosition, 1.0);
  }
  
</script>
<script id="fs-point" type="x-shader/x-fragment">
  uniform sampler2D texture;
  void main() {
    gl_FragColor = texture2D(texture, gl_PointCoord);
  }
</script>

非规则泡泡爆破动画

three, webgl, bubble

编辑器支持Emmet

快捷键

非规则泡泡爆破动画

three, webgl, bubble

使用HTML5 WebGL GLSL着色器代码实现的太空星云图粒子动画特效

HTML5 WebGL屏幕闪屏（电视机花屏）动画特效的着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：