为什么带着色器的粒子系统不起作用?三.js [英] why Particle system with shader doesn't work? three.js

问题描述

有人可以帮我吗?我有这个着色器，它适用于 THREE.Mesh 但不适用于 THREE.Particlesystem?

Hi can anyone help me whith this? I have this shader, it works with THREE.Mesh but doesn't with THREE.Particlesystem?

我希望每个粒子都有给定贴图(纹理)的一部分并相应地改变它们的位置，就像这样 http://www.chromeexperiments.com/detail/webcam-displacement/?f=webgl

I want each particle to have a portion of a given map(texture) and change their positions accordingly, something like this http://www.chromeexperiments.com/detail/webcam-displacement/?f=webgl

<script id="vs" type="x-shader/x-vertex">


            uniform sampler2D map;

            varying vec2 vUv;

            void main() {

                vUv = uv;

                vec4 color = texture2D( map, vUv );
                float value = ( color.r + color.g + color.b ) / 3.0;

                vec4 pos = vec4( position.xy, value * 100.0, 1.0 );

                                gl_PointSize = 20.0;

                gl_Position = projectionMatrix * modelViewMatrix * pos;

            }

        </script>

<script id="fs" type="x-shader/x-fragment">

            uniform sampler2D map;

            varying vec2 vUv;

            void main() {

                gl_FragColor = texture2D( map, vUv );

            }

</script>

推荐答案

ParticleSystem 并不真正支持 UV，因为没有面，只有单点.纹理映射粒子是使用 gl_PointCoord (IIRC) 完成的，但这为每个粒子提供了相同的映射.为了给每个粒子提供相同纹理的不同部分，您应该使用 BufferGeometry，它在最新版本的three.js 中支持包括自定义属性在内的所有属性(并且非常高效和快速！).然后，您将为每个粒子提供一个 vec2 偏移属性:您可以从该偏移和 gl_PointCoord 中获得正确的 UV.

ParticleSystem doesn't really support UVs as there aren't faces, just single points. Texture mapping particles is done with gl_PointCoord (IIRC), but that gives you same mapping for every particle. In order to give different portion of the same texture to each particle, you should use BufferGeometry, which in the latest version of three.js supports all attributes including custom ones (and it is very efficient and fast!). You'd then supply a vec2 offset attribute for each particle: you get the correct UV from this offset and the gl_PointCoord.

这篇关于为什么带着色器的粒子系统不起作用?三.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！