Rotating and scaling a shape

I have finally managed to write a fragment shader. This one in particular is the code for a cross sign. How do I rotate it please? I would like to make it look like an X. Also it it possible to scale it, lets say shrink it by 20%.
If you have any comments on the code, or if there is another simpler way, please feel free

                #define PI 3.14159265359

                mat2 rotate2d(float _angle){
                    return mat2(cos(_angle),-sin(_angle),

void main() {
                vec2 color = vec2(0.0);
                vec2 shape = vec2(0.0);

                // True (ie 1.0) if x between 0.45 and 0.55  
                float x_1 = 1.0 - step(0.55, gl_PointCoord.x);
                float x_2 = step(0.45, gl_PointCoord.x);
                // True (ie 1.0) if y between 0.45 and 0.55  
                float y_1 = 1.0 - step(0.55, gl_PointCoord.y);
                float y_2 = step(0.45, gl_PointCoord.y);
                // cross
                shape = vec2(x_1 * x_2 + y_1 * y_2);
                shape = shape - vec2(0.5);
                shape = rotate2d( 0.25*PI ) * shape;
                shape = shape + vec2(0.5);
                color = vec2(1.0, 0.0);
                gl_FragColor = vec4(shape * color, 0.0, 1.0);

Shape of cross could be done like that:

    uv -= 0.5; // center to screen
    uv.x *= ratio; // ratio = resolution.x / resolution.y

    vec3 col = vec3(0); // background color
    float shape = 0.; // shape
    vec2 cUv = abs(uv * rot(PI * 0.25)); // rotate abs uv 45 degs
    shape = 1. - step(0.1, min(cUv.x, cUv.y)) - step(0.45, max(cUv.x, cUv.y)); // shape of cross itself
    col = mix(col, vec3(1), shape); // mixing black and white with the shape function

Example: Shader - Shadertoy BETA

I am trying to do particles using THREE.Points. If I have understood properly (not sure though), I cannot use uv I believe. Many thanks for your reply in any case

For points, this part:

    uv -= 0.5; // center to screen
    uv.x *= ratio; // ratio = resolution.x / resolution.y

will be like

    vec2 uv = gl_PointCoord.xy - 0.5;

Here is an option with modified PointsMaterial.

Yes, indeed! I got it working. Two days for two simple shapes! Jeez! Many thanks once again

1 Like

Ah cool! Great I will study this codepen. Do you know by any chance if you can reuse a fragment shader. I mean I did a plus sign shape and another one that looks like an X. Is it possible the shader for the X shape to call the plus sign shader and then just rotate it?

I didn’t get what you mean with “reuse a fragment shader”.
Use the same shader code with different value for rotation to get “+” or “x” :thinking: I do it in that codepen with rotating crosses.

I mean, if you want to lets say render only two static shapes on your scene at the same time, one x and one + shape. You write your shader for the + shape, save it on some file and then when you want to do the shader for the x shape to do something like

#include <plus_sign_shader>
// some code to rotate the + sign by 45degrees

Very nice codepens by the way!! So artistic! well done

Great example !!!

I always wondered how do you know exactly what sentence should be replaced in Vertex shaders or frag shaders ? In this example you used ${shader.vertexShader}
.replace( #include <begin_vertex>`,
Is there a list of items that I can be replaced ? Any ref sources to look into ?

I’m asking the question because it’s damn hard to debug GLSL. The magic of console table/log doesn’t exist !


I just explored files in ShaderLib folder :slight_smile:
For example, for vertex shader of PointsMaterial, you can find it here: three.js/points_vert.glsl.js at ea3762dadd58d239486fcb78a1b3d33252a2e8cf · mrdoob/three.js · GitHub
You can see the same, when you call console.log(shader.vertexShader) inside onBeforeCompile.

And to see, what that <begin_vertex> chunk has, go to the respective file in ShaderChunk folder: three.js/begin_vertex.glsl.js at ea3762dadd58d239486fcb78a1b3d33252a2e8cf · mrdoob/three.js · GitHub