GMS 2.3+ surface_set_target() not working in HTML5

Forestherd

Member
Hello!

I am currently trying to apply a water shader over the entirety of my game view.
Here's what its supposed to look like (Windows). Water is rendered on the bottom half of the screen with a slight distortion effect:
expected.PNG

However, this effect does not render on the HTML5 export. Here's what it looks like there:
reality.PNG

After some short debugging, I noticed some strange shader warnings being logged in Chrome's debug console. The warnings were the following:
error.PNG

After further investigation, I narrowed the issue down to this DRAW event in my object that handles rendering the water:
Code:
/// @description Event
var _view_x = camera_get_view_x(view_camera[0]);
var _view_y = camera_get_view_y(view_camera[0]);

var _view_w = camera_get_view_width(view_camera[0]);
var _view_h = camera_get_view_height(view_camera[0]);

var _water_height = 1 - clamp(((water_y - _view_y) / _view_h), 0, 1);

var _scale = cntrl_camera.view_width / view_get_wport(view_camera[0]);

if (!surface_exists(surface_water)) {
    surface_water = surface_create(surface_get_width(application_surface), surface_get_height(application_surface));
}

surface_set_target(surface_water);
draw_clear_alpha(c_white, 0);
draw_surface(application_surface, 0, 0);
surface_reset_target();

shader_set(shd_water);
shader_set_uniform_f(u_fWaterHeight, _water_height);
shader_set_uniform_f(u_fCounter, counter * .1);
draw_surface_ext(surface_water, _view_x, _view_y, _scale, _scale, 0, c_white, 1);
shader_reset();
Specifically, the error seems to be caused by these lines:
Code:
surface_set_target(surface_water);
draw_clear_alpha(c_white, 0);
draw_surface(application_surface, 0, 0);
surface_reset_target();
If I comment these lines out, the warnings do not get logged into the console.
I have reason to believe that the issue isnt caused by the use of shaders, since those work fine once these lines are commented out and the warnings don't appear.

This is as far as I have gotten debugging this issue. Does the HTML5 export not support surfaces? Are there some extra steps I need to take in order to use surfaces in my HTML5 game?
Any and all help is greatly appreciated!
Thankfully this issue isn't too major - if push comes to shove, I can just draw a semi-transparent rectangle for the water and be done with it. I would really love to have this distortion effect in my game though.
 

Nocturne

Friendly Tyrant
Forum Staff
Admin
Moderator
HTML5 should support surfaces fine, so not sure what the issue is. I would add some show_debug_message() calls into the event and output things like the width and height of the surface, as well as one to check and see how often the "if surface_exits" call is being run. Also, out of curiosity, if you comment out the shader code but leave the surface code, do you still get the errors?
 

Forestherd

Member
HTML5 should support surfaces fine, so not sure what the issue is. I would add some show_debug_message() calls into the event and output things like the width and height of the surface, as well as one to check and see how often the "if surface_exits" call is being run. Also, out of curiosity, if you comment out the shader code but leave the surface code, do you still get the errors?
Logging the surface width and height helped a lot! For some reason, surface_get_width(application_surface) and surface_get_height(application_surface) returned 0 in the create event, which in turn meant the surface didn't render. While I still have some issues getting the surface to render in the correct size and resolution on screen, i can at least see the shader and it's effect work properly on HTML5. Thank you for the help!
 
Top