Question

我正在尝试制造太阳能系统......第一步，我想让太阳看起来发光。

为此，shape = new THREE.BufferGeometry();并添加一些属性。一个是position，另一个是textureOrder。

我认为这个textureOrder可以是一个索引，用于确定在Fragment Shader中使用哪个纹理，if(textureOrder == 1.0) use textureA;类似的东西;

此textureOrder具体填充浮点值0.0,1.0，...，5.0。但我不能像我预期的那样使用这个值。我猜，它只有0.0被传递.. ..不是吗？

在这些纹理中，显示了一个，而不是其他纹理。我认为这是第一个案例textureOrder = 0.0。

- 用不同的图像纹理每个顶点是否正确？如果没有，我该怎么做？

关于gl_PointSize的另一个问题是..我希望我的太阳距离越来越大但是因为我声明并设置了gl_PointSize值，所以它是固定的。如果我删除gl_PointSize，可以看到nothings;

- 如何停止此固定大小的内容？

这是我的代码..

<script type="x-shader/x-vertex" id="vs-sun">
    attribute float textureOrder;
    varying float tOrder;

    void main() {
        tOrder = textureOrder;
        gl_PointSize = 100.0;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(0.0,0.0,0.0,1.0);
    }
</script>

<script type="x-shader/x-fragment" id="fs-sun" >
    uniform float time;
    uniform sampler2D tsun_core;
    uniform sampler2D tsun_innerglow;
    uniform sampler2D tsun_starlight;
    uniform sampler2D tsun_outerglow;
    uniform sampler2D tsun_shortjetlight;
    uniform sampler2D tsun_longjetlight;
    varying float tOrder;

    vec4 getFC() {
        float ratio = 0.01;
        vec3 vColor = vec3(1.0, 1.0, 1.0);

        if(tOrder == 0.0) return vec4(vColor, 0.75 + 0.25 * sin(ratio*time)) * texture2D(tsun_core, gl_PointCoord);
        else if(tOrder == 1.0) return vec4(vColor, 0.75 + 0.25 * sin(ratio*time)) * texture2D(tsun_innerglow, gl_PointCoord);
        else if(tOrder == 2.0) return vec4(vColor, 0.75 + 0.25 * sin(ratio*time)) * texture2D(tsun_starlight, gl_PointCoord);
        else if(tOrder == 3.0) return vec4(vColor, 0.75 + 0.25 * sin(ratio*time)) * texture2D(tsun_outerglow, gl_PointCoord);
        else if(tOrder == 4.0) return vec4(vColor, 0.75 + 0.25 * sin(ratio*time)) * texture2D(tsun_shortjetlight, gl_PointCoord);
        else if(tOrder == 5.0) return vec4(vColor, 0.75 + 0.25 * sin(ratio*time)) * texture2D(tsun_longjetlight, gl_PointCoord);
        else return vec4(vColor, 0.75 + 0.25 * sin(ratio*time));
    }

    void main() {
        gl_FragColor = getFC();
    }
</script>

// Constructing * The Solar *
shape = new THREE.BufferGeometry();
    shape.addAttribute('position', new THREE.Float32Attribute(6,3));
    shape.addAttribute('textureOrder', new THREE.Int8Attribute(6,1));

    for(i=0; i<6; i++) {
        shape.attributes.position.setXYZ(i, 0, 0, 0);
        shape.attributes.textureOrder.setX(i, i);
    };

var d = new Date();

mater = new THREE.ShaderMaterial({
    uniforms: {
        time: { type: 'f', value: 1.0 },
        tsun_core: { type: 't', value: THREE.ImageUtils.loadTexture('sun_core.png') },
        tsun_innerglow: { type: 't', value: THREE.ImageUtils.loadTexture('sun_innerglow.png') },
        tsun_starlight: { type: 't', value: THREE.ImageUtils.loadTexture('sun_starlight.png') },
        tsun_outerglow: { type: 't', value: THREE.ImageUtils.loadTexture('sun_outerglow.png') },
        tsun_shortjetlight: { type: 't', value: THREE.ImageUtils.loadTexture('sun_shortjetlight.png') },
        tsun_longjetlight: { type: 't', value: THREE.ImageUtils.loadTexture('sun_longjetlight.png') }
    },
    vertexShader: document.getElementById('vs-sun').textContent,
    fragmentShader: document.getElementById('fs-sun').textContent
});
    mater.depthTest = false;
    mater.vertexColor = true;
    mater.transparent = true;
    mater.blending = THREE.AdditiveBlending;

sun = new THREE.ParticleSystem(shape, mater);
scene.add(sun);

Answer 1

这样做的一种方法是将纹理组织在称为texture atlas的东西中。传递vec2而不是传递该索引，并且已经计算了偏移量。

对于调整大小的东西，你可以在three.js中查看粒子着色器。您需要将透视缩短应用于pointSize。

three.js所;通过着色器在每个顶点上的不同纹理

1 个答案: