Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Shader

A topic by nitouu created Jun 06, 2023 Views: 201 Replies: 3
Viewing posts 1 to 5

Hello, I'm new and I would like to have your opinion about my first shader (Black Hole),

Here : https://starlogik.itch.io/the-black-hole-shader

Thank you! 

with my sincere greetings.

Moderator moved this topic to Get Feedback
(1 edit) (+1)

Hi, nice to see someone  interested in shader programming, I'm a graphics engineer, my answer may look harsh, but that's from my professional perspective to you:

I'm not going to sugarcoat it: It looks very good, but for a student, not a professional, it really looks like you're learning and got your first piece of art out there, so I don't think it's worth it charging  (I wouldn't buy) unless you have a personal emergency or something similar. 

To be honest with you, when I was a student I would not be able to do a professional looking black hole, not without feedback about my code, so in your situation I'd not charge so people can comment and help me improve my shader.

Here are a few reasons why and how to improve (without access to your shader):

First, plain and simple: I can find better looking shaders for free (license apart): https://www.shadertoy.com/results?query=black+hole

And those are all animated, while I don't know if yours is because you just uploaded an image, not a video.

However looking better is not the only thing that matters, yours could still look worse and be worth it buying IF you prove that yours runs faster and more efficiently than the ones out there. You see, shader toy's shaders are all ray-cast based, so they are expensive as hell, you could benefit from that if you simply use rasterization with blending and some sort of multi-pass to achieve the same results, there are also ways to improve performance on ray-marching if needed.

So to actually make it a professional work and justify a price tag I think you would need to:

  •  make it animatable
  • upload more images
  • upload a video
  • add black hole physical effects like the gravitational lensing (If you haven't already because it's not possible to see from your single image).
  • Make it faster and more efficient than the ones out there and prove it
  • Technical explanation in details about what you did.
(+1)

Thanks for taking the time to feedback on my code. and I will apply your advice! Thanks a lot 

(1 edit)

Ok, now that I can look at your code, here is how to improve your shader and your experience.

First, there are 2 areas to improve in your effect:

  1.  Internal to the shader: your shader code alone.
  2. External to the shader: Ways to improve quality and performance that would require you to change the one (application/engine) invoking your shader.

Starting with Internal only improvements (the easier one):

You have to define a shader version at the beginning :

#version 150

I think 1.5 would be enough for your effect, (I know http://editor.thebookofshaders.com/ does not work with #version, it seems a limitation on their end) but this is important to tell the developer using your shader what GL version your shader needs in order to to run. (you can leave it commented out to make your life easier, but you must indicate it)

Use "in" for function parameters that are read only, they work like C++ const& so it's a small optimization:

vec2 normalizedCoordinates(in vec2 fragCoords)

Use pre-processor defines for consts, I know that is another limitation of the online shader editor you used to create your shader, but keep in mind that if someone is going to use that shader in their game , it will not be using the http://editor.thebookofshaders.com/ compiler, you can keep the global float until you decide your values and then you should make sure they are #defines before you wrap it up.

// instead of:
//float intensity = 0.5;
// use
#define INTENSITY 0.5

Use descriptive names for everything, ( the only exception are heavily optimized equations, in which would require you to explain what you did). So this applies to things like:

... vec3(0.985, 0.786, 0.002) * glow(st, .2), smoothstep( .280, 1.678, ellipse) / intensity)

The vec3(0.985, 0.786, 0.002) should be a #define with a proper name tag so we know what it means.

Lastly, this is more personal, but since you plan to sell code, then I suggest you do new-line after function declaration, makes your code easier to read, specially when you have to deal with large code:

float circle(float radius, vec2 st) 
{     
    ... 
}

Now about external improvements:

These ones would require you to make changes to your shader AND whatever is invoking your shader, so testing it in http://editor.thebookofshaders.com/ online compiler is out of the question here, you will need your own engine/application to do these.

All previous optimizations are like ants close to these one: Your shader is a screen space effect, so it needs a quad to be rendered so your pixel shader can fill in ALL pixels, however the black hole and all its components are not occupying the whole screen, so all pixels outside of the effect itself are just uselessly taking performance.

So you can start rendering a sphere or even better, a impostor circle (one that always faces the camera), and apply the effect onto that surface only. For that you will also need a vertex shader.

From that point, your pixel shader may have some internal optimizations as well, for instance, this function can die:

vec2 normalizedCoordinates(vec2 fragCoords) {     return fragCoords / u_resolution.xy; }

As it only normalizes the screen UVs, whereas your circle should send the pre-normalized tex. coords to your vertex shader up to the pixel shader for you. This means you will not guide the effect via gl_FragCoord, you will use:

in vec2 texCoord;

As a global, indicating a varying coming from your vertex shader.

The glow in your black hole can be applied to the edges of your circle, but the elliptical bloom you do may have to be rasterized as well, You can do it using the same formula to bake your circle, you simply distort it to make an ellipse. 

These of course will have to be combined using blending, so you will need to take advantage of your alpha channel.

Keep in mind that these optimizations are for games, i.e., real time rendering.

Takeaway:

The effect is good, but it's green, there's lots of room for improvement both on quality and performance. Do not reflect your work with the ones out there, respect your learning curve and keep improving, eventually you will surpass them.