Canvas WebGL 分子运动

Motion of the molecule

canvas, 生物

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ut, st = Date.now(),
    um, mouseX = 0,
    mouseY = 0;

function initShaders(gl, vertexShaderId, fragmentShaderId) {
    var vertexEl = document.querySelector(vertexShaderId);
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexEl.text);
    gl.compileShader(vertexShader);

var fragmentEl = document.querySelector(fragmentShaderId);
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragmentEl.text);
    gl.compileShader(fragmentShader);

var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    gl.useProgram(program);

return program;
}

function initGraphics() {
    gl = canvas.getContext('webgl');
    var width = canvas.width;
    var height = canvas.height;
    gl.viewport(0, 0, width, height);

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

var program = initShaders(gl, '#sv', '#sf');
    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

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

var vPosition = gl.getAttribLocation(program, 'vPosition');
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vPosition);

ut = gl.getUniformLocation(program, 'time');
    um = gl.getUniformLocation(program, 'mouse');
    var resolution = new Float32Array([canvas.width, canvas.height]);
    gl.uniform2fv(gl.getUniformLocation(program, 'resolution'), resolution);
}

function render() {
    gl.uniform1f(ut, (Date.now() - st) / 1000);
    gl.uniform2fv(um, new Float32Array([mouseX, mouseY]));
    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
    requestAnimationFrame(render);
}

initGraphics();
render();

编译

CSS

HTML

Motion of the molecule

canvas, 生物

编辑器支持Emmet

快捷键

Motion of the molecule

canvas, 生物

Canvas WebGL 不规则博动的3D物体

HTML5 Canvas 超酷的粒子时钟+分散/聚合动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：