Threejs学习笔记

粒子

1：点大小

需要在顶点着色器设置点大小，不然无法显示，参考以下代码

// 点大小
    gl_PointSize = 20.0
    gl_PointSize *= (1.0 / - viewPosition.z);

2: gpgpu

GPGPU是什么

首先我们需要了解GPGPU是什么，GPGPU也叫做通用GPU，是一个图形处理单元，可以通俗的将GPGPU理解为一个辅助CPU的工具，它能够帮助CPU进行非图形相关程序的运算。通常电脑端的GPU负责电脑的图形渲染，这是一个负荷较大的工作，为了给GPU分担一部分压力，一些非图形相关程序的运算就会交给电脑的CPU来完成，而GPGPU则是主要负责非图形相关程序的运算。
以下是gpgpu示例代码

/**
 * gpu 计算
 */
// 初始化
const gpgpu = {}
gpgpu.size = Math.ceil(Math.sqrt(baseGeometry.count))
gpgpu.computation = new GPUComputationRenderer(gpgpu.size, gpgpu.size, renderer)
// 基础粒子
const baseParticleTexture = gpgpu.computation.createTexture()
for(let i=0; i < baseGeometry.count; i++){
    const i3 = i * 3
    const i4 = i * 4

    baseParticleTexture.image.data[i4 + 0] = baseGeometry.instance.attributes.position.array[i3 + 0]
    baseParticleTexture.image.data[i4 + 1] = baseGeometry.instance.attributes.position.array[i3 + 1]
    baseParticleTexture.image.data[i4 + 2] = baseGeometry.instance.attributes.position.array[i3 + 2]
    baseParticleTexture.image.data[i4 + 3] = 0
}

// 粒子变量
gpgpu.particlesVariable = gpgpu.computation.addVariable('uParticles', particlesFragmentShader, baseParticleTexture)
gpgpu.computation.setVariableDependencies(gpgpu.particlesVariable, [gpgpu.particlesVariable])
gpgpu.particlesVariable.material.uniforms.uTime = new THREE.Uniform(0)
// 初始化
gpgpu.computation.init()
// 测试gpgpu
gpgpu.debug = new THREE.Mesh(
    new THREE.PlaneGeometry(3, 3),
    new THREE.MeshBasicMaterial({
        map: gpgpu.computation.getCurrentRenderTarget(gpgpu.particlesVariable).texture
    })
)
gpgpu.debug.position.x = 3
scene.add(gpgpu.debug)

// 动画更新 
function gpgouAnimate(elapsedTime, deltaTime){
    gpgpu.particlesVariable.material.uniforms.uTime.value = elapsedTime
    gpgpu.computation.compute()
    modelMaterial.uniforms.uParticlesTexture.value = gpgpu.computation.getCurrentRenderTarget(gpgpu.particlesVariable).texture
}

在gpgpu应用uniform属性时，需要在GPUComputationRenderer的compute方法前设置.