Scale X and Y in Points shader

Questions
, ,
1

I want scale particles like this example when scrolling. this is my demo. I grabbed from shaders from this. How can I achieve it?

2

TLDR; Smoothly move/zoom your camera towards the particles.

Yes it is scaling, but it’s not! What I mean is, it’s not scaling by implicitly setting the scale property. It’s scaling by moving the particles towards the camera, or the other way around, by moving/zooming the camera inside the particles.

3

Sorry for the unclear question.

It’s scaling by moving the particles towards the camera.|

I’m asking about this one. I want to scale a Point but I don’t see Points don’t provide a scale parameter.

4

THREE.PointsMaterial has two properties – size and sizeAttenuation. You might want to set the attenuation to true. However, if you use custom shaders, you either have to manage attenuation in the shader by yourself, or use the original Three.js shader and inject your code in it.

Example without custom shaders

5

I suppose, sizeAttenuation doesn’t do with scaling. I want to strech a particle like this image.

Screenshot 2023-07-17 204209

6

I see. I can think of three options:

  • each “dash” is a sequence of several points (maybe 10) close to each other
  • each “dash” is a prolonged mesh that looks like a point from a distance
  • use motion blur effect
7

but it’s a circle when it’s not scrolling.

8

Looking at the website, it looks like it’s just simple motion blur done in post processing :sweat_smile:

1 Like
9

This is not a problem. Here is a demo. I hope you can extract from the code anything that you find useful for your project:

https://codepen.io/boytchev/full/VwVXOPq

image

4 Likes
10

Thank you so much.

Sorry. I’m new to threejs. How do you animate particles based on camera position z instead of looping?

11

Generally, animation is done by changing properties based on some value. Usually this value is time, but it could be anything else, including the position of the camera, controlled by the user. In the case of stars and camera, you may use two approaches:

  • camera is fixed, but stars are moving
  • camera is moving, but stars are fixed

Both of them may produce the same visual result, but the second approach is shorter. Of course, you can also do:

  • camera is moving and stars are moving

but it is always better to have simpler motion than complex motion.