Scirra
Adjust HSL Luminosity Issue
Problem description
Luminosity gives different results. Photoshop, Affinity Designer and PineTools gives same result. I hope it will be fixed, the colors in the picture look very bad when using different values.
Attach a .c3p
Steps to reproduce
- Open project and look pictures
Observed result
Expected result
More details
Affected browsers/platforms: Chrome
First affected release: tested with latest stable
System details
View details
Platform information Product: Construct 3 r440 (stable) Browser: Chrome 136.0.7103.114 Browser engine: Chromium Context: webapp Operating system: Windows 11 Device type: desktop Device pixel ratio: 0.8999999761581421 Logical CPU cores: 16 Approx. device memory: 8 GB User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36 Language setting: en-US
Local storage Storage quota (approx): 189 GB Storage usage (approx): 357 MB (0.2%) Persistant storage: Yes
Browser support notes This list contains missing features that are not required, but could improve performance or user experience if supported.
Nothing is missing. Everything is OK! WebGL information Version string: WebGL 2.0 (OpenGL ES 3.0 Chromium) Numeric version: 2 Supports NPOT textures: yes Supports GPU profiling: no Vendor: Google Inc. (NVIDIA) Renderer: ANGLE (NVIDIA, NVIDIA GeForce GTX 1060 3GB (0x00001C02) Direct3D11 vs_5_0 ps_5_0, D3D11) Major performance caveat: no Maximum texture size: 16384 Point size range: 1 to 1024 Extensions:
EXT_clip_control EXT_color_buffer_float EXT_color_buffer_half_float EXT_conservative_depth EXT_depth_clamp EXT_disjoint_timer_query_webgl2 EXT_float_blend EXT_polygon_offset_clamp EXT_render_snorm EXT_texture_compression_bptc EXT_texture_compression_rgtc EXT_texture_filter_anisotropic EXT_texture_mirror_clamp_to_edge EXT_texture_norm16 KHR_parallel_shader_compile NV_shader_noperspective_interpolation OES_draw_buffers_indexed OES_sample_variables OES_shader_multisample_interpolation OES_texture_float_linear OVR_multiview2 WEBGL_blend_func_extended WEBGL_clip_cull_distance WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context WEBGL_multi_draw WEBGL_polygon_mode WEBGL_provoking_vertex WEBGL_stencil_texturing Audio information System sample rate: 48000 Hz Output channels: 2 Output interpretation: speakers Supported decode formats:
WebM Opus (audio/webm;codecs=opus) WebM Vorbis (audio/webm;codecs=vorbis) MPEG-4 Opus (audio/mp4;codecs=opus) MPEG-4 AAC (audio/mp4;codecs=mp4a.40.2) MP3 (audio/mpeg) FLAC (audio/flac) PCM WAV (audio/wav;codecs=1) Supported encode formats:
WebM Opus (audio/webm;codecs=opus) MPEG-4 Opus (audio/mp4;codecs=opus) MPEG-4 AAC (audio/mp4;codecs=mp4a.40.2) Video information Supported decode formats:
WebM AV1 (video/webm;codecs=av01.0.00M.08) WebM VP9 (video/webm;codecs=vp9) WebM VP8 (video/webm;codecs=vp8) MPEG-4 AV1 (video/mp4;codecs=av01.0.00M.08) MPEG-4 H.265 (video/mp4;codecs=hev1.1.2.L93.B0) MPEG-4 H.264 (video/mp4;codecs=avc1.420034) Supported encode formats:
WebM AV1 (video/webm;codecs=av01.0.00M.08) WebM VP9 (video/webm;codecs=vp9) WebM VP8 (video/webm;codecs=vp8) WebM H.264 (video/webm;codecs=avc1.420034) MPEG-4 AV1 (video/mp4;codecs=av01.0.00M.08) MPEG-4 VP9 (video/mp4;codecs=vp9) MPEG-4 H.265 (video/mp4;codecs=hev1.1.2.L93.B0) MPEG-4 H.264 (video/mp4;codecs=avc1.420034)
This looks similar to #8458, where the issue was not a bug in Construct's effects but a misinterpretation of the units applied. Are you sure that something similar hasn't happened with the luminosity as well?
@AshleyScirra I used same values correctly.
C3: 0, 200 Range Others: -100, 100 Range
So; C3: 30 should be same as -70 with others. Also I try different values for Luminosity but it doesn't give me same result with any value. I think C3 effect algorithm wrong for Luminosity.
C3
Affinity
PineTools
It is curious, I too get different results when setting say 50% on C3 and -50 on Paint.NET.
Although visually it's making sense, 0 is 0 on both.
Unusual!
it definitely makes logically the most sense to have a -100 to 100 range. Where -100 makes white pixels black and at 100 black pixels are white. But this would break backwards compat, I would suggest deprecating and add a new effect with more expected ranges. If that route is taken it would be interesting to also look into more modern color spaces like okhsl. https://bottosson.github.io/posts/colorpicker/ (https://www.shadertoy.com/view/7sVGD1)
Do you know what color space the other tools are operating in and precisely what calculation they are performing?
HSL conversion is a fairly standard bit of code and I think we're using a standard shader implementation of it, and right now I'm not sure what we would need to change. My best guess is that the other tools are doing something different with gamma correction or color spaces.
Pinetools using Pixastic library (I think they used same (not %100) algorithm with Photoshop, Affinity and other image editors) https://github.com/jseidelin/pixastic/blob/master/pixastic.effects.js
From Pinetools: https://pinetools.com/files/tools/pixastic.efectos.js You can search "Pixastic.hsl"
Note: Using different values slightly gives different results.
for Color Space: I didn't change any settings, all aplications using sRGB. This from Photoshop.