why Particle system with shader doesn't work? three.js

Question

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

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>

score 2 · Accepted Answer · answered Mar 29 '13 at 08:09

2

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.

answered Mar 29 '13 at 08:09

Tapio

3,466
1
20
20

Thank you @Tapio for the quick response I already have all my particles in a BufferGeometry :) ...so I can do all that just using the BufferGeometry without the need for the vertex and fragment shaders? – Memo Lestas Mar 29 '13 at 08:35
No, of course you still need shaders to draw anything. You need to pass an extra attribute to the shaders, which tells which part of the texture to sample, i.e. "uv", although if you want to map several texels to one particle, you also need to use gl_PointCoord because there is only one vertex per particle (so only one uv). – Tapio Mar 29 '13 at 09:39
Am gonna give it a try, however since am new with shader programing, if you know about an example which I can use as a guide, let me know, it will be awesome. thank you so much @Tapio. – Memo Lestas Mar 31 '13 at 08:53

why Particle system with shader doesn't work? three.js

1 Answers1

Linked