WebGL: Three.js and Particle System

用Three.js构建的三维图形，看起来像是爆米花上的超级玛丽。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var DOT_SIZE = 16;
var X_START_POS = 0;
var Y_START_POS = 0;
var Z_START_POS = 0;

// ‥‥‥‥‥‥‥‥‥‥‥‥‥□□□
// ‥‥‥‥‥‥〓〓〓〓〓‥‥□□□
// ‥‥‥‥‥〓〓〓〓〓〓〓〓〓□□
// ‥‥‥‥‥■■■□□■□‥■■■
// ‥‥‥‥■□■□□□■□□■■■
// ‥‥‥‥■□■■□□□■□□□■
// ‥‥‥‥■■□□□□■■■■■‥
// ‥‥‥‥‥‥□□□□□□□■‥‥
// ‥‥■■■■■〓■■■〓■‥‥‥
// ‥■■■■■■■〓■■■〓‥‥■
// □□■■■■■■〓〓〓〓〓‥‥■
// □□□‥〓〓■〓〓□〓〓□〓■■
// ‥□‥■〓〓〓〓〓〓〓〓〓〓■■
// ‥‥■■■〓〓〓〓〓〓〓〓〓■■
// ‥■■■〓〓〓〓〓〓〓‥‥‥‥‥
// ‥■‥‥〓〓〓〓‥‥‥‥‥‥‥‥

var dataSet = [
    "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BG", "BG", "BG",
    "BK", "BK", "BK", "BK", "BK", "BK", "RD", "RD", "RD", "RD", "RD", "BK", "BK", "BG", "BG", "BG",
    "BK", "BK", "BK", "BK", "BK", "RD", "RD", "RD", "RD", "RD", "RD", "RD", "RD", "RD", "BG", "BG",
    "BK", "BK", "BK", "BK", "BK", "BR", "BR", "BR", "BG", "BG", "BR", "BG", "BK", "RD", "RD", "RD",
    "BK", "BK", "BK", "BK", "BR", "BG", "BR", "BG", "BG", "BG", "BR", "BG", "BG", "RD", "RD", "RD",
    "BK", "BK", "BK", "BK", "BR", "BG", "BR", "BR", "BG", "BG", "BG", "BR", "BG", "BG", "BG", "RD",
    "BK", "BK", "BK", "BK", "BR", "BR", "BG", "BG", "BG", "BG", "BR", "BR", "BR", "BR", "RD", "BK",
    "BK", "BK", "BK", "BK", "BK", "BK", "BG", "BG", "BG", "BG", "BG", "BG", "BG", "RD", "BK", "BK",
    "BK", "BK", "RD", "RD", "RD", "RD", "RD", "BL", "RD", "RD", "RD", "BL", "RD", "BK", "BK", "BK",
    "BK", "RD", "RD", "RD", "RD", "RD", "RD", "RD", "BL", "RD", "RD", "RD", "BL", "BK", "BK", "BR",
    "BG", "BG", "RD", "RD", "RD", "RD", "RD", "RD", "BL", "BL", "BL", "BL", "BL", "BK", "BK", "BR",
    "BG", "BG", "BG", "BK", "BL", "BL", "RD", "BL", "BL", "YL", "BL", "BL", "YL", "BL", "BR", "BR",
    "BK", "BG", "BK", "BR", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BR", "BR",
    "BK", "BK", "BR", "BR", "BR", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BR", "BR",
    "BK", "BR", "BR", "BR", "BL", "BL", "BL", "BL", "BL", "BL", "BL", "BK", "BK", "BK", "BK", "BK",
    "BK", "BR", "BK", "BK", "BL", "BL", "BL", "BL", "BK", "BK", "BK", "BK", "BK", "BK", "BK", "BK"
];

function getRgbColor(colorType) {
    var colorHash = {
        "BK": "#000000", // black
        "WH": "#FFFFFF", // white
        "BG": "#FFDDCC", // beige
        "BR": "#800000", // brown
        "RD": "#FF0000", // red
        "YL": "#FFFF00", // yellow
        "GN": "#00FF00", // green
        "WT": "#00FFFF", // water
        "BL": "#0000FF", // blue
        "PR": "#800080" // purple
    };
    return colorHash[colorType];
}

function getRgbColorHex(colorType) {
    var colorHash = {
        "BK": 0x000000, // black
        "WH": 0xFFFFFF, // white
        "BG": 0xFFDDCC, // beige
        "BR": 0x800000, // brown
        "RD": 0xFF0000, // red
        "YL": 0xFFFF00, // yellow
        "GN": 0x00FF00, // green
        "WT": 0x00FFFF, // water
        "BL": 0x0000FF, // blue
        "PR": 0x800080 // purple
    };
    return colorHash[colorType];
}

function getSingleColorDepth(c, rgbType) {
    var result = 0;
    var rgb = getRgbColor(c);
    rgb = rgb.replace("#", "");
    var r = parseInt("0x" + rgb.substr(0, 2), 16);
    var g = parseInt("0x" + rgb.substr(2, 2), 16);
    var b = parseInt("0x" + rgb.substr(4, 2), 16);
    switch (rgbType) {
        case 'r':
            result = r / 255;
            break;
        case 'g':
            result = g / 255;
            break;
        case 'b':
            result = b / 255;
            break;
    }
    return result;
}

var renderer, scene, camera, particleSystem;
var uniforms, attributes;

init();
animate();

function init() {

// dom
    var container = document.getElementById('container');

// renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

// scene
    scene = new THREE.Scene();

//camera
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;

// particle system geometry
    var geometry = createParticleGeometry();
    var colors = geometry.colors;

// material
    attributes = {

size: {
            type: 'f',
            value: []
        },
        customColor: {
            type: 'c',
            value: []
        }

};

uniforms = {

amplitude: {
            type: "f",
            value: 1.0
        },
        color: {
            type: "c",
            value: new THREE.Color(0xffffff)
        },
        texture: {
            type: "t",
            value: getTexture()
        }
    };

// material
    var material = new THREE.ShaderMaterial({

uniforms: uniforms,
        attributes: attributes,
        vertexShader: document.getElementById('vertexshader').textContent,
        fragmentShader: document.getElementById('fragmentshader').textContent,

//blending:       THREE.AdditiveBlending,
        depthTest: true,
        transparent: true

});

// particle system
    particleSystem = new THREE.PointCloud(geometry, material);

particleSystem.dynamic = true;

var vertices = particleSystem.geometry.vertices;
    var values_size = attributes.size.value;
    var values_color = attributes.customColor.value;

for (var v = 0; v < vertices.length; v++) {

values_size[v] = DOT_SIZE * 2.5;
        values_color[v] = colors[v];
    }

particleSystem.rotation.y -= Math.PI / 2;

scene.add(particleSystem);

}

function createParticleGeometry() {
    var geometry = new THREE.Geometry();

// vertex colors
    var colors = [];
    for (var i = 0; i < 10000; i++) {
        var x = Math.random() * 300 - 150;
        var y = Math.random() * 300 - 150;
        var z = Math.random() * 300 - 150;
        var vertex = new THREE.Vector3(x, y, z);

if (vertex.length() < 150) {
            var color = new THREE.Color();
            var x0 = (Math.floor(x / 12) + 8);
            var y0 = (Math.floor(y / 12) + 8);
            var z0 = (Math.floor(z / 12) + 8);
            if (x0 >= (0 + X_START_POS) && y0 >= (0 + Y_START_POS) && x0 < (16 + X_START_POS) && y0 < (16 + Y_START_POS)) {
                var pos = (x0 - X_START_POS) + ((15 - y0) - Y_START_POS) * 16;
                if (dataSet[pos] != "BK") {
                    var c = dataSet[pos];
                    color.setHex(getRgbColorHex(c));
                }
            }

colors.push(color);
            geometry.vertices.push(vertex);

var velocity = new THREE.Vector3(Math.random(), Math.random(), Math.random());
            vertex.velocity = velocity;
        }
    }

geometry.colors = colors;

return geometry;
}

function animate() {

requestAnimationFrame(animate);

render();

}

function render() {

// rotate
    particleSystem.rotation.y += 0.015;

// render
    renderer.render(scene, camera);

}

function getTexture() {
    var size = 1;
    var canvas = document.createElement('canvas');
    canvas.width = canvas.height = 16;
    var ctx = canvas.getContext('2d');

for (var i = 0; i < dataSet.length; i++) {
        var x = (i % 16) * size;
        var y = Math.floor(i / 16) * size;
        var color = getRgbColor(dataSet[i]);
        if (dataSet[i] != "BK") {
            ctx.fillStyle = color;
            ctx.fillRect(x, y, size, size);
        }
    }

var tx = new THREE.Texture(canvas);
    tx.needsUpdate = true;
    return tx;
}

编译

CSS

HTML

varying vec4 vColor;

void main() {

vColor = customColor;

vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

gl_PointSize = size * ( 150.0 / length( mvPosition.xyz ) );

gl_Position = projectionMatrix * mvPosition;

gl_Position.y += abs(sin(gl_Position.x/30.0)* 20.0);
}
</script>

varying vec4 vColor;

void main() {

vec2 uv = vec2(gl_PointCoord.x, 1.0 - gl_PointCoord.y);
    vec4 outColor = texture2D( texture, uv );

if ( outColor.a < 0.5 ) discard;

if (( outColor.r >= 0.6 && outColor.g <= 0.4 && outColor.b <= 0.4 ) 
      ||( outColor.r <= 0.4 && outColor.g <= 0.4 && outColor.b >= 0.6 )){
        gl_FragColor = vec4( color * vColor.xyz, 1.0 );
    } else {
        gl_FragColor = outColor;
    }
// Does not work it's mac following code.
/*
    float depth = gl_FragCoord.z / gl_FragCoord.w;
    const vec3 fogColor = vec3( 0.0 );

float fogFactor = smoothstep( 200.0, 600.0, depth );
    gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
*/
}
</script>

用Three.js构建的三维图形，看起来像是爆米花上的超级玛丽。

编辑器支持Emmet

快捷键

用Three.js构建的三维图形，看起来像是爆米花上的超级玛丽。

WebGL Three.js浑浊的球体 | GLSL光线行进（raymarching）着色器代码演示

webgl three.js实现孟杰海绵（menger sponge）立方体光线追踪（raymarching）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：