 # 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),
sin(_angle),cos(_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
``````

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`.
Example: https://codepen.io/prisoner849/pen/OJmxGOg?editors=0010
Picture:

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” 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>
main(){
// 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 !

Thanks

@Nemines
I just explored files in `ShaderLib` folder 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