使用three.js 为粒子程序生成的纹理答案

【问题标题】：Procedurally generated texture for Particle with three.js使用three.js 为粒子程序生成的纹理
【发布时间】：2012-12-13 12:46:34
【问题描述】：

我的目标是创建一个粒子系统，其中涉及每个粒子（顶点）的程序生成纹理，但我发现很难创建一个在 Canvas 和 WebGL 渲染器下使用三个.js 的粒子系统的原型

我想要达到的标准：

独立于渲染器（ParticleCanvasMaterial 不适用于 WebGL）
圆形纹理（ParticleBasicMaterial 不喜欢画布纹理；无法使其输出圆形）
程序生成这些纹理（不能只使用带有准备好的圆形纹理的 loadTexture）

目前可以使用three.js吗？我是否缺少某些功能？

//create a texture generation function
function simpleTexture() {

    // generate canvas
    var canvas = document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 100;

    // get context
    var context = canvas.getContext('2d');

    // circle texture
    context.beginPath();
    context.arc(50, 50, 50, 0, Math.PI*2, true); 
    context.closePath();
    context.fillStyle = "red";
    context.fill();

    // get texture
    texture = new THREE.Texture(
        canvas
    );

    texture.needsUpdate = true;
    return texture;

}

    //then use it like following...

    var material = new THREE.ParticleBasicMaterial({
        color: 0xffffff,
        size: 1,
        map: simpleTexture,
        blending: THREE.AdditiveBlending,
        transparent: true
    });

    var system = new THREE.ParticleSystem(particles, material);

【问题讨论】：

标签： javascript three.js procedural-generation

【解决方案1】：

对于问题 1，您无能为力。使用 ParticleCanvasMaterial 代替 CanvasRenderer。

关于 2 和 3，您可以拥有ParticleBasicMaterial 和WebGLRenderer 的程序生成纹理。这是一个圆形纹理和随机顶点颜色：http://jsfiddle.net/7yDGy/1/

【讨论】：

谢谢，你的例子看起来和我的很像，我在第二个问题上一定遗漏了一些属性。（哦，在我接受这个答案之前，我可以确认这个解决方案不适用于 CanvasRenderer 吗？因为这是我最初的问题：是否可以这样做并且仍然允许回退到 CanvasRenderer，因此“独立于渲染器”)
所以基本上我需要一些方法来规范化 ParticleCanvasMaterial 和 ParticleBasicMaterial，并根据渲染器选择材质类型，对吧？
是的，这就是你必须要做的。试一试，如果您还有其他问题，请发布新问题。

【解决方案2】：

为什么不加载图像？你可以随时调整它的属性，而不是到处乱扔新的像素块。

【讨论】：

因为我的最终目标是创建一个程序生成的行星系统，所以纹理（地形）彼此非常不同。（由于画布渲染器的性能，不适合球体几何）