Currently, I am experimenting with drawing shapes or geometric figures in ThreeJS r128 using only shaders.
The traditional approach in this library involves creating a mesh with a geometry associated with it, and then applying a shader using the ShaderMaterial class. However, I am struggling to figure out how to render the shader directly on the scene without attaching it to an object. In OpenGL Shading Language (GLSL), it is possible to draw shapes on the screen without defining vertices, which is my goal. But it seems I am stuck in the rendering process.
Is it feasible to render solely with shaders in ThreeJS?
As a test, here is a shader function to create a filled circle:
Fragment Shader:
uniform vec2 u_resolution;
float circleShape(vec2 position, float radius){
return step(radius, length(position));
}
void main(){
vec2 position = gl_FragCoord.xy / u_resolution;
float circle = circleShape(position, 0.3);
vec3 color = vec3(circle);
gl_FragColor = vec4(color, 1.0);
}
Here is the Vertex Shader as well:
void main(){
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}