Duimon - HSM Mega Bezel Graphics and Presets - Feedback and Updates

Thank you for the suggestion, and your enthusiasm!

The thing is, the swirl on the logo is the only element in the graphic that has any color saturation. Therefore, these changes should be possible using just parameters.

There are already 12 presets. Adding two more colors would add 24 more.

Doing so, for parameter adjustment variations, would take me down a rabbit hole that I would never emerge from.

3 Likes

I can understand that. Once you do it for this one than how many others would you be willing to it for? It literally would be never-ending cause I have been there myself. Would mind if I created a topic for those who would want it just for Dreamcast? Or I can just add the images and parameter changes here.

2 Likes

Tell you what.

It turns out that parameters alone won’t do it.

I like the orange enough that I will add that alternate. I think it is a legitimate request for a Japanese version.

4 Likes

Thanks for considering one. I will definitely be keeping the other for myself. The Japanese version would have been the best one as the alternative since the system came from a Japanese company.

1 Like

Just thought of testing something and found the shader for the alternatives could be shorter. It still returns the same result.

> #reference "Dreamcast-[STD]-[Guest]-[Bezel].slangp"
> HSM_BZL_COLOR_HUE = "32.000000"
> HSM_BZL_COLOR_SATURATION = "90.000000"
> HSM_BZL_COLOR_VALUE = "79.900000"
> BackgroundImage = "../../../Graphics/SEGA_Dreamcast/Dreamcast_Japan.png"
1 Like

We call this a nested reference, some people are still using them, but I decided against it quite a while ago.

If I make changes to the reference preset, it may cause unintentional changes to the chain.

3 Likes

@Duimon don’t expect me to do other recommendations of shader changes because Dreamcast was the only one that was bugging me. It really bugged me that I would see the blue Dreamcast logo and a blue bezel in the shader, but load a game and see the red one swirling. All the other shaders look great and as I stated before I will be on the look out for bugs and notify you if I see any.

2 Likes

@hgoda90 seeing you play around with the Dreamcast bezel coloring made me try to do something similar with the Turbografx-16 one. I can get close with an orang-y look but not quite. I was actually thinking about gradients as well this weekend and saw you mention it just earlier in the other thread. That would be pretty cool if it’s possible!

3 Likes

Yeah I was thinking of gradients mainly because of the Dreamcast image I posted earlier.

Edit: Check out the post I made earlier that had BZL_COLOR to get the Orange color that took me a decent amount of tries to get the Dreamcast color right.

2 Likes

What is the question about gradients?

I was asking if HyperspaceMadness considered allowing gradients on Bezels.

@Neofuuma I was thinking that if your going for a orange Turbografx-16 bezel, go for a white decal as well so that it is like the 16 in the TurboGrafx-16 logo.

2 Likes

Just saw the post.

The bezel actually has a gradient by default. It took a great deal of trial and error to get it to look the way he intended.

In my effort to recreate his bezel in Adobe Illustrator, I felt his pain. You might be surprised at how difficult it is.

To directly answer your question. The Bezel and Frame are generated as vector objects by the slang code. Adding a gradient parameter will probably not happen.

But, my dual bevel bezel uses images as the second bezel and frame. So it is already possible to use whatever image you want, including a gradient.

2 Likes

Honestly I can follow that to a certain extent. So, a gradient parameter might not happen but a gradient can be included as an image.

1 Like

You and I both, if you look at the code…

vec3 base_color = HSM_Linearize(vec4(HSM_HSVtoRGB(vec3(HSM_BZL_COLOR_HUE, HSM_BZL_COLOR_SATURATION, HSM_BZL_COLOR_VALUE)), 1), DEFAULT_SRGB_GAMMA).rgb;
	float noise_mask = clamp(fract(sin(dot(tube_curved_coord_ctr + vec2(0.5, 0.5) + 1, vec2(12.9898, 78.233))) * 43758.5453), 0, 1);
	vec3 base_color_with_noise = mix(base_color, 1.5 * base_color * noise_mask, HSM_BZL_NOISE);
	vec3 top_color = hmbz_bezel_brightness_top * HSM_BZL_BRIGHTNESS * base_color_with_noise;
	vec3 bottom_color = hmbz_bezel_brightness_bottom * HSM_BZL_BRIGHTNESS * base_color_with_noise;
	vec3 sides_color = hmbz_bezel_brightness_sides * HSM_BZL_BRIGHTNESS * base_color_with_noise;

	vec3 frame_color = hmbz_frame_brightness / 100 * mix(base_color, 1.5 * base_color * noise_mask, 0.6 * HSM_BZL_NOISE);;
	
	vec3 outside_frame_color = hmbz_brightness_shadow * base_color_with_noise;

	vec3 bezel_diffuse_color = mix(sides_color, top_color, top_mask);
	bezel_diffuse_color = mix(bezel_diffuse_color, bottom_color, bottom_mask);

	float top_center_highlight_mask 	= hmbz_bezel_highlight_top * top_mask * HHLP_QuadraticBezier(smoothstep(hmbz_bezel_highlight_width, 0, abs(tube_curved_coord_ctr.x)), vec2(0.5, hmbz_bezel_highlight_falloff_speed));
	float bottom_center_highlight_mask 	= hmbz_bezel_highlight_bottom * bottom_mask * HHLP_QuadraticBezier(smoothstep(hmbz_bezel_highlight_width, 0, abs(tube_curved_coord_ctr.x)), vec2(0.5, hmbz_bezel_highlight_falloff_speed));
	float sides_highlight_mask 			= hmbz_bezel_highlight_sides * sides_mask * HHLP_QuadraticBezier(smoothstep(hmbz_bezel_highlight_width, 0, abs(tube_curved_coord_ctr.y)), vec2(0.5, hmbz_bezel_highlight_falloff_speed));

	float edge_top_center_highlight_mask 		= hmbz_bezel_highlight_top * top_mask * HHLP_QuadraticBezier(smoothstep(hmbz_bezel_edge_highlight_width, 0, abs(tube_curved_coord_ctr.x)), vec2(0.8, 0));
	float edge_bottom_center_highlight_mask 	= hmbz_bezel_highlight_bottom * bottom_mask * HHLP_QuadraticBezier(smoothstep(hmbz_bezel_edge_highlight_width, 0, abs(tube_curved_coord_ctr.x)), vec2(0.8, 0));
	float edge_sides_highlight_mask 			= hmbz_bezel_highlight_sides * sides_mask * HHLP_QuadraticBezier(smoothstep(hmbz_bezel_edge_highlight_width, 0, abs(tube_curved_coord_ctr.y)), vec2(0.8, 0));

	edge_highlight_mask = hmbz_bezel_highlight_edge * edge_mask * (edge_top_center_highlight_mask + edge_bottom_center_highlight_mask + edge_sides_highlight_mask);

	// Combine all the individual highlights into one mask
	float combined_highlight_mask = (1 + 2.5 * HSM_BZL_NOISE) * (1 - noise_mask * 2.5 * HSM_BZL_NOISE) * (top_center_highlight_mask + bottom_center_highlight_mask + sides_highlight_mask);
	float bezel_highlight_multiplier = HSM_BZL_HIGHLIGHT * combined_highlight_mask + HSM_BZL_HIGHLIGHT * edge_highlight_mask;
	vec3 bezel_color = bezel_diffuse_color * (1 + 15 * bezel_highlight_multiplier) + 1 * bezel_highlight_multiplier;

	// Add the inner edge highlight on top of the bezel color which has it's own highlight
	float inner_edge_highlight_multiplier = hmbz_bezel_brightness_frame_inner_edge + HSM_BZL_HIGHLIGHT * 10 * hmbz_bezel_brightness_frame_inner_edge;
	vec3 frame_inner_edge_color = base_color * (1 + 15 * inner_edge_highlight_multiplier) +	0.5 * inner_edge_highlight_multiplier;

	bezel_color = mix(bezel_color, frame_inner_edge_color, frame_inner_edge_mask);

	float dist_inside_outer_edge = min(0.50 - abs(frame_outside_coord_ctr.x), 0.50 - abs(frame_outside_coord_ctr.y));
	float frame_outer_edge_width = HSM_FRM_OUTER_EDGE_THICKNESS;
	vec3 frame_diffuse_color = mix(frame_color, 0.2 * frame_color, HSM_FRM_OUTER_EDGE_SHADING * smoothstep(frame_outer_edge_width, 0, dist_inside_outer_edge));

I don’t even understand it well enough to know if that is a sample of the bezel code. :grin:

I just know that whenever you se a “vec2” or a “vec3” etc. he is drawing a shape using code.

When I first joined the forum, he was using images for both the bezel and frame, but it changed to code generated graphics quickly.

3 Likes

Changing all this stuff definitely takes some trial and error.

2 Likes

No, I think it’s all very intentional, it was the gradient and shading that took trial and error until he was happy with it.

Drawing the shapes using my illustration tools, is pretty easy. Getting them to not look like flat 2D shapes, takes creative wizardry.

As tough as it was for me in an illustration software. I am totally amazed he could do it in code. :hushed:

Mere words cannot suffice.

This is a version of my bezel.

I would probably not have been able to create it without his input.

As it stands, I am going to replace it with one generated by the shader. (Now that the tools to do so are built in to the shader.)

3 Likes

To allow a gradient as a parameter looks difficult just by looking at the code. Looking at it I can tell it is set up to only allow one color as base_color.

2 Likes

For the bezel portion, I wouldn’t even suggest that you try an image. The frame has a highlight overlay image and parameter. Using either additive blending or multiply blending you could change the frame to have a gradient easily.

This is the frame highlight image that ships with the Mega Bezel.

And here is the one I use for my “Custom-Bezel_001”.

It is masked to just the frame so the creation of the image is really simple.

It scales with the frame but not with frame width. What exactly did you have in mind?

2 Likes

How experienced I am at this, it wouldn’t be that easy. So what your saying is use a image on the frame to apply a gradient with blending?

Edit: Didn’t add what I had in mind. What I was thinking about was to mainly just see what it would look first. It would be to add all three Dreamcast colors to the frame like my Dreamcast variety picture.

1 Like