Question

    function createParticles(imgData) {
        const geometry = new THREE.BufferGeometry();
        var c = 0, x = 0, y = 0, positions = [], colors = [];
        var data = imgData.data;
        x = -imgData.width * 0.5;
        y = imgData.height * 0.5;
        for (var i = 0; i < imgData.width; i++) {
            for (var j = 0; j < imgData.height; j++) {
                positions.push(i - imgData.width * 0.5, j - imgData.height * 0.5, 0);
            }



        }
        geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
        var material = new THREE.ShaderMaterial({ fragmentShader: document.getElementById('f-shader').textContent });
        return new THREE.Points(geometry, material);
    }

这是我的着色器：

 <script type="shader" id="f-shader">
    void main(){
        gl_FragColor = vec4(1.0, 0.58, 0.86, 1.0);
    }
</script>

我添加了这个shadermaterial，但没有任何内容，并且当没有材料

时将显示这些点

Answer 1

您还需要指定顶点着色器，顶点着色器必须在其中进行gl_PointSize调用。类似的东西：

void main() {
    gl_PointSize = 10.0;
    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
}

shaderMaterial不工作宽度点

1 个答案: