WebGL 帧缓存技术使用示例 - 波光粼粼的特效

WebGL Framebuffer Example

webgl, buffer

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var canvas = document.getElementById('webgl-contents');
var gl = canvas.getContext('webgl');

var loadProgram = function loadProgram(gl, vs_src, fs_src) {
    var program = gl.createProgram();
    var vs = loadShader(gl.VERTEX_SHADER, gl, vs_src);
    var fs = loadShader(gl.FRAGMENT_SHADER, gl, fs_src);

gl.attachShader(program, vs);
    gl.attachShader(program, fs);
    gl.linkProgram(program);
    gl.useProgram(program);

return program;
};
var loadShader = function loadShader(type, gl, shader_src) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, shader_src);
    gl.compileShader(shader);
    return shader;
};

var vertices = [-1.0, 1.0, 0.0, 1.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0];
var indecies = [0, 1, 2, 3, 2, 1, 4, 5, 6, 7, 6, 5];
var colors = [0.0, 0.5, 1.0, 0.0, 0.5, 1.0, 0.0, 0.5, 1.0, 0.0, 0.5, 1.0, 0.5, 0.5, 1.0, 0.5, 0.5, 1.0, 0.5, 0.5, 1.0, 0.5, 0.5, 1.0];
var uvs = [1.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, 0.0, 0.0, 1.0, 1.0, 0.0, 1.0];
var vertices2 = [1.0, -1.0, 0.0, 1.0, 1.0, 0.0, -1.0, -1.0, 0.0, -1.0, 1.0, 0.0];
var indecies2 = [0, 1, 2, 3, 2, 1];
var createFrameBuffer = function createFrameBuffer(width, height) {
    var frame_buffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, frame_buffer);

var depth_render_buffer = gl.createRenderbuffer();
    gl.bindRenderbuffer(gl.RENDERBUFFER, depth_render_buffer);
    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);
    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depth_render_buffer);

var frame_texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, frame_texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, frame_texture, 0);

gl.bindTexture(gl.TEXTURE_2D, null);
    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);

return {
        f: frame_buffer,
        d: depth_render_buffer,
        t: frame_texture
    };
};

var init = function init() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';

if (!gl.getExtension('OES_standard_derivatives')) {
        console.log('OES_standard_derivatives is not supported');
        return;
    }
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.CULL_FACE);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.viewport(0, 0, canvas.width, canvas.height);

var center = [0.0, 0.0, 0.0];
    var camera = {
        position: [2.0, -1.0, 2.0],
        up: [0.0, 1.0, 0.0]
    };

var fovy = 45;
    var aspect = canvas.width / canvas.height;
    var near = 0.1;
    var far = 100.0;

for (var i = 0; i < uvs.length; i++) {
        if (window.innerWidth > window.innerHeight) {
            if (i % 2 == 1) uvs[i] /= aspect;
        } else {
            if (i % 2 == 0) uvs[i] *= aspect;
        }
    }

var light_direction = [1.0, 1.0, 1.0];
    var time = 0;

var m_matrix = mat4.identity(mat4.create());
    var v_matrix = mat4.identity(mat4.create());
    var p_matrix = mat4.identity(mat4.create());
    var mv_matrix = mat4.identity(mat4.create());
    var mvp_matrix = mat4.identity(mat4.create());
    var inv_matrix = mat4.identity(mat4.create());

mat4.lookAt(v_matrix, camera.position, center, camera.up);
    mat4.perspective(p_matrix, fovy, aspect, near, far);
    mat4.multiply(mv_matrix, v_matrix, m_matrix);
    mat4.multiply(mvp_matrix, p_matrix, mv_matrix);
    mat4.invert(inv_matrix, m_matrix);

var program2 = loadProgram(gl, document.getElementById('vs2').textContent, document.getElementById('fs2').textContent);

var attr_position2 = gl.getAttribLocation(program2, 'position');
    var vertex_buffer2 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer2);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices2), gl.STATIC_DRAW);
    gl.enableVertexAttribArray(attr_position2);
    gl.vertexAttribPointer(attr_position2, 3, gl.FLOAT, false, 0, 0);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

var attr_index2 = gl.getAttribLocation(program2, 'index');
    var index_buffer2 = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer2);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indecies2), gl.STATIC_DRAW);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

var uni_time2 = gl.getUniformLocation(program2, 'time');
    gl.uniform1f(uni_time2, time);

var program = loadProgram(gl, document.getElementById('vs').textContent, document.getElementById('fs').textContent);

var uni_m_matrix = gl.getUniformLocation(program, 'm_matrix');
    gl.uniformMatrix4fv(uni_m_matrix, false, m_matrix);

var uni_v_matrix = gl.getUniformLocation(program, 'v_matrix');
    gl.uniformMatrix4fv(uni_v_matrix, false, v_matrix);

var uni_p_matrix = gl.getUniformLocation(program, 'p_matrix');
    gl.uniformMatrix4fv(uni_p_matrix, false, p_matrix);

var uni_mv_matrix = gl.getUniformLocation(program, 'mv_matrix');
    gl.uniformMatrix4fv(uni_mv_matrix, false, mv_matrix);

var uni_mvp_matrix = gl.getUniformLocation(program, 'mvp_matrix');
    gl.uniformMatrix4fv(uni_mvp_matrix, false, mvp_matrix);

var uni_inv_matrix = gl.getUniformLocation(program, 'inv_matrix');
    gl.uniformMatrix4fv(uni_inv_matrix, false, inv_matrix);

var uni_light_direction = gl.getUniformLocation(program, 'light_direction');
    gl.uniform3fv(uni_light_direction, light_direction);

var uni_time = gl.getUniformLocation(program, 'time');
    gl.uniform1f(uni_time, time);

var uni_texture = gl.getUniformLocation(program, 'texture');
    gl.activeTexture(gl.TEXTURE0);
    gl.uniform1i(uni_texture, 0);

var attr_position = gl.getAttribLocation(program, 'position');
    var vertex_buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    gl.enableVertexAttribArray(attr_position);
    gl.vertexAttribPointer(attr_position, 3, gl.FLOAT, false, 0, 0);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

var attr_index = gl.getAttribLocation(program, 'index');
    var index_buffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indecies), gl.STATIC_DRAW);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

var attr_color = gl.getAttribLocation(program, 'color');
    var color_buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    gl.enableVertexAttribArray(attr_color);
    gl.vertexAttribPointer(attr_color, 3, gl.FLOAT, false, 0, 0);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

var attr_uv = gl.getAttribLocation(program, 'uv');
    var uv_buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, uv_buffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(uvs), gl.STATIC_DRAW);
    gl.enableVertexAttribArray(attr_uv);
    gl.vertexAttribPointer(attr_uv, 2, gl.FLOAT, false, 0, 0);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

var frame_buffer = createFrameBuffer(512, 512);

var render = function render() {
        time++;

gl.bindFramebuffer(gl.FRAMEBUFFER, frame_buffer.f);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clearDepth(1.0);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.useProgram(program2);

gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer2);
        gl.enableVertexAttribArray(attr_position2);
        gl.vertexAttribPointer(attr_position2, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer2);

gl.uniform1f(uni_time2, time);

gl.drawElements(gl.TRIANGLES, indecies2.length, gl.UNSIGNED_SHORT, 0);

gl.bindFramebuffer(gl.FRAMEBUFFER, null);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clearDepth(1.0);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.useProgram(program);

gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
        gl.enableVertexAttribArray(attr_position);
        gl.vertexAttribPointer(attr_position, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
        gl.enableVertexAttribArray(attr_color);
        gl.vertexAttribPointer(attr_color, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, uv_buffer);
        gl.enableVertexAttribArray(attr_uv);
        gl.vertexAttribPointer(attr_uv, 2, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);

gl.bindTexture(gl.TEXTURE_2D, frame_buffer.t);

mat4.identity(m_matrix);
        mat4.rotateY(m_matrix, m_matrix, Math.PI / 180 * time / 2);
        mat4.multiply(mv_matrix, v_matrix, m_matrix);
        mat4.invert(inv_matrix, m_matrix);

gl.uniformMatrix4fv(uni_mv_matrix, false, mv_matrix);
        gl.uniformMatrix4fv(uni_inv_matrix, false, inv_matrix);
        gl.uniform1f(uni_time, time);

gl.drawElements(gl.TRIANGLES, indecies.length, gl.UNSIGNED_SHORT, 0);

gl.bindTexture(gl.TEXTURE_2D, null);
    };
    var renderLoop = function renderLoop() {
        render();
        requestAnimationFrame(renderLoop);
    };
    renderLoop();
};
init();

编译

CSS

HTML

attribute vec3 position;
   attribute vec3 color;
   attribute vec3 normal;
   attribute vec2 uv;

uniform mat4 p_matrix;
   uniform mat4 mv_matrix;

varying vec3 vPosition;
   varying vec3 vColor;
   varying vec2 vUv;

void main() {
      vPosition = position;
      vColor = color;
      vUv = uv;

vec4 mv_position = mv_matrix * vec4(position, 1.0);
      gl_Position = p_matrix * mv_position;
   }
</script>
<script id="fs" type="x-shader/x-fragment">
   #extension GL_OES_standard_derivatives : enable

precision mediump float;

uniform mat4 inv_matrix;
   uniform vec3 light_direction;
   uniform float time;
   uniform sampler2D texture;

varying vec3 vPosition;
   varying vec3 vColor;
   varying vec2 vUv;

vec3 hsv2rgb(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() {
      vec3 custom_color = hsv2rgb(vColor);
      vec3 dx = dFdx(vPosition.xyz);
      vec3 dy = dFdy(vPosition.xyz);
      vec3 n = normalize(cross(normalize(dx), normalize(dy)));
      vec3 inv_light = normalize(inv_matrix * vec4(light_direction, 1.0)).xyz;
      float diff = clamp(dot(n, inv_light), 0.1, 1.0);
      vec4 smp_color = texture2D(texture, vUv);
      gl_FragColor = vec4(custom_color * diff, 1.0) * smp_color;
   }
</script>
<script id="vs2" type="x-shader/x-vertex">
   precision mediump float;

attribute vec3 position;

varying vec3 vPosition;

void main() {
      vPosition = position;
      gl_Position = vec4(position, 1.0);
   }
</script>
<script id="fs2" type="x-shader/x-fragment">
   precision mediump float;

uniform float time;

varying vec3 vPosition;

//
   // Description : Array and textureless GLSL 2D/3D/4D simplex
   //               noise functions.
   //      Author : Ian McEwan, Ashima Arts.
   //  Maintainer : ijm
   //     Lastmod : 20110822 (ijm)
   //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
   //               Distributed under the MIT License. See LICENSE file.
   //               https://github.com/ashima/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)+1.0)*x);
   }
   vec4 taylorInvSqrt(vec4 r) {
      return 1.79284291400159 - 0.85373472095314 * r;
   }
   float snoise(vec3 v) {
      const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
      const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

vec3 i  = floor(v + dot(v, C.yyy) );
      vec3 x0 =   v - i + dot(i, C.xxx) ;

vec3 g = step(x0.yzx, x0.xyz);
      vec3 l = 1.0 - g;
      vec3 i1 = min( g.xyz, l.zxy );
      vec3 i2 = max( g.xyz, l.zxy );

vec3 x1 = x0 - i1 + C.xxx;
      vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
      vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y

i = mod289(i);
      vec4 p = permute( permute( permute(
      i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
      + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
      + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

float n_ = 0.142857142857; // 1.0/7.0
      vec3  ns = n_ * D.wyz - D.xzx;

vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)

vec4 x_ = floor(j * ns.z);
      vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)

vec4 x = x_ *ns.x + ns.yyyy;
      vec4 y = y_ *ns.x + ns.yyyy;
      vec4 h = 1.0 - abs(x) - abs(y);

vec4 b0 = vec4( x.xy, y.xy );
      vec4 b1 = vec4( x.zw, y.zw );

vec4 s0 = floor(b0)*2.0 + 1.0;
      vec4 s1 = floor(b1)*2.0 + 1.0;
      vec4 sh = -step(h, vec4(0.0));

vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
      vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

vec3 p0 = vec3(a0.xy,h.x);
      vec3 p1 = vec3(a0.zw,h.y);
      vec3 p2 = vec3(a1.xy,h.z);
      vec3 p3 = vec3(a1.zw,h.w);

vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
      p0 *= norm.x;
      p1 *= norm.y;
      p2 *= norm.z;
      p3 *= norm.w;

vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
      m = m * m;
      return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );
   }

vec3 hsv2rgb(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() {
      vec3 hsv = vec3(0.0, 0.5, 0.5);
      float noise = snoise(vec3(vPosition * 4.0 + time / 100.0));
      vec3 custom_color = hsv2rgb(vec3(hsv.x - noise / 2.0, hsv.y, hsv.z - noise / 2.0));
      gl_FragColor = vec4(custom_color, 1.0);
   }
</script>

WebGL Framebuffer Example

webgl, buffer

编辑器支持Emmet

快捷键

WebGL Framebuffer Example

webgl, buffer

Three.js 使用WebGL技术给网站添加三维动画特效

使用WebGL实现的物理学热变形动画特效 - 酷热的非洲大陆

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：