Question

我使用THREE.js，粒子系统和＆＃34; GPGPU＆＃34;创建了一个星形动画。这可以在https://tuqire.github.io/text-stars/看到。但是我遇到了一些问题。

基本上有两个我无法理解的错误。他们是：

1）当你输入一些字母，一些＆＃34;明星＆＃34;在它们动画时会闪烁。

2）在星星不会去的字母上有一个奇怪的网格。

我收集问题可能是我的着色器（我绝不是WebGL专家）。

下面是我的片段着色器（简化）：

uniform sampler2D starImg;
uniform sampler2D tColour;

varying vec2 vUv;

void main() {
    vec4 colour = texture2D(tColour, vUv).rgba;
    gl_FragColor = colour * texture2D(starImg, gl_PointCoord);
}

vUv值在顶点着色器中定义，只是position.xy。

我创建了我的粒子系统：

const geometry = new THREE.Geometry();

for (let i = 0; i < this.numParticles; i++) {
    const vertex = new THREE.Vector3();
    vertex.x = (i % tWidth) / tWidth;
    vertex.y = Math.floor(i / tWidth) / tHeight;        
    geometry.vertices.push(vertex);
}

this.particles = new THREE.Points(geometry, this.material);
this.particles.frustumCulled = false;

任何人都可以指示我可能出错的地方或遗失的地方吗？一位崭露头角的WebGL开发人员将非常感激。

粒子渲染调用：

this.positionFBO.simulate();
this.sizeFBO.simulate();
this.sizeFBO.simulationShader.uniforms.tPosition.value = this.material.uniforms.tPosition.value = this.positionFBO.getCurrentFrame();
this.material.uniforms.tSize.value = this.sizeFBO.getCurrentFrame();

我使用此库进行fbo计算：https://github.com/tuqire/three.js-fbo

三个js粒子闪烁图像

0 个答案: