0

私の目標は、パーティクル (頂点) ごとに手続き的に生成されたテクスチャを含むパーティクル システムを作成することですが、three.js を使用して、Canvas と WebGL レンダラーの両方で動作するようなパーティクル システムのプロトタイプを作成するのは難しいと感じています。

私が達成しようとしている基準：

  1. レンダラー非依存(ParticleCanvasMaterial は WebGL では動作しません)
  2. 円形のテクスチャ(ParticleBasicMaterial はキャンバス テクスチャが好きではないため、円形を出力できません)
  3. これらのテクスチャを手続き的に生成します (準備された円テクスチャで 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);
4

2 に答える 2

5

質問 1 については何もできません。 ParticleCanvasMaterialfor を使用してくださいCanvasRenderer。

2 と 3 に関しては、 と で手続き的に生成されたテクスチャを持つことができます。これは、円形のテクスチャとランダムな頂点の色を持つものです: http://jsfiddle.net/7yDGy/1/ParticleBasicMaterialWebGLRenderer

于 2012-12-13T15:59:02.327 に答える
0

画像をロードしないのはなぜですか? ピクセルの新しいブロック全体を押し込むよりも、その属性をその場でいつでも微調整できます。

于 2012-12-13T16:10:20.050 に答える