使用gl-matrix和shader绘制的3D彩虹波浪

webgl, shader, normal, wave

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById('display');
var gl = canvas.getContext('webgl', {
    depth: true,
    antialias: true,
    alpha: false
});

var w, h;
var resize = function() {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
    gl.viewport(0, 0, w, h);
};
resize();
window.addEventListener('resize', resize);

var vshader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vshader, document.getElementById('vert').innerHTML);
gl.compileShader(vshader);
if (!gl.getShaderParameter(vshader, gl.COMPILE_STATUS)) {
    console.log('bad vertex shader', gl.getShaderInfoLog(vshader));
}
var fshader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fshader, document.getElementById('frag').innerHTML);
gl.compileShader(fshader);
if (!gl.getShaderParameter(fshader, gl.COMPILE_STATUS)) {
    console.log('bad fragment shader', gl.getShaderInfoLog(fshader));
}

var sprog = gl.createProgram();
gl.attachShader(sprog, vshader);
gl.attachShader(sprog, fshader);
gl.linkProgram(sprog);
if (!gl.getProgramParameter(sprog, gl.LINK_STATUS)) {
    console.log('couldnt link shaders', gl.getProgramInfoLog(sprog));
}

var vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, meshTriStrip, gl.STATIC_DRAW);
// position
var loc = gl.getAttribLocation(sprog, 'a_position');
gl.vertexAttribPointer(loc, 3, gl.FLOAT, false, 12, 0);
gl.enableVertexAttribArray(loc);

gl.clearColor(0, 0, 0, 1); // clear to white
gl.enable(gl.DEPTH_TEST); // depth test is important

var waveOrigins = new Float32Array([
    100, 0, 100,
    900, 0, 900,
    100, 0, 900
]);

var frame = function(t) {
    var t2 = -t / 20.0;
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.useProgram(sprog);

gl.uniform3fv(gl.getUniformLocation(sprog, "u_waveorigins"), waveOrigins);

gl.uniformMatrix4fv(gl.getUniformLocation(sprog, 'u_modelview'), false,
        mat4.multiply(
            mat4.create(),
            mat4.lookAt(mat4.create(), [0, 400, 700], [0, -200, 0], [0, 1, 0]),
            mat4.fromTranslation(mat4.create(), [-500, 0, -500])
        )
    );
    gl.uniformMatrix4fv(gl.getUniformLocation(sprog, 'u_projection'), false,
        mat4.perspective(mat4.create(), Math.PI / 3.0, w / h, 1.0, 5000.0)
    );
    gl.uniform1f(gl.getUniformLocation(sprog, 'u_tval'), t2 / 2.0);
    gl.uniform3fv(gl.getUniformLocation(sprog, 'u_reverseLightDirection'), [2, 15, 7]);

// and draw
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, meshTriStrip.length / 3);

requestAnimationFrame(frame);
};

requestAnimationFrame(frame);

编译

CSS

HTML

<canvas id="display" width="800" height="600"></canvas><script type="text/x-vertex-shader" id="vert">
    attribute vec3 a_position;
    attribute vec3 a_normal;

uniform mat4 u_modelview;
    uniform mat4 u_projection;
    uniform float u_tval;

uniform vec3 u_waveorigins[3];

varying vec4 v_normal;

vec3 waveLocation(vec3 loc) {
        loc.y = 0.0;
        float yoff = 9.0 * (
            sin(0.1 * (length(u_waveorigins[0] - loc) + u_tval))
            + sin(0.4 * (length(u_waveorigins[1] - loc) + u_tval))
            + sin(0.075 * (length(u_waveorigins[2] - loc) + u_tval * 2.0))
        );
        loc.y = yoff;
        return loc;
    }

void main() {
        vec3 newLocation = waveLocation(a_position);
        gl_Position = u_projection * u_modelview * vec4(waveLocation(a_position), 1.0);
        v_normal = normalize(u_modelview * vec4(cross(
            (waveLocation(a_position - vec3(0, 0, 0.01)) - newLocation),
            (waveLocation(a_position - vec3(0.01, 0, 0)) - newLocation)
        ), 0.0));
    }
</script><script type="text/x-fragment-shader" id="frag">
    precision mediump float;

uniform vec3 u_reverseLightDirection;

varying vec4 v_normal;

void main() {
        float light = dot(v_normal, vec4(normalize(u_reverseLightDirection), 0));
//                gl_FragColor = light * vec4(1, 1, 0, 1);
        gl_FragColor = vec4(v_normal.xyz, 1.0);
    }
</script>

webgl, shader, normal, wave

编辑器支持Emmet

快捷键

webgl, shader, normal, wave

使用three.js和PlaneBufferGeometry构建的3d交互波浪背景动画

使用regl和gl-matrix制作的webgl版本CRT屏特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：