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