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>

Tapio · Accepted Answer · 2013-03-29 08:09:58Z

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, 2013 at 8:09

Tapio

3,4561 gold badge23 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Memo Lestas Over a year ago

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?

Tapio Over a year ago

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).

Memo Lestas Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related