• Hello [name]! Thanks for joining the GMC. Before making any posts in the Tech Support forum, can we suggest you read the forum rules? These are simple guidelines that we ask you to follow so that you can get the best help possible for your issue.

HTML5 can't use vertex buffers in HTML5 (Solved, I think)

Ruimm

Member
Hi!
I'm trying to create some 3d shapes in HTML5 using vertex buffers but they never draw to screen. when I run the game on macOS it works.
Here's the code I'm using to draw a triangle:
GML:
vertex_format_begin();
vertex_format_add_position_3d();
vertex_format_add_color();
var format = vertex_format_end();

vertex_buffer = vertex_create_buffer();
vertex_begin(vertex_buffer, format);
vertex_position_3d(vertex_buffer, -100, -100, 0);
vertex_color(vertex_buffer, c_red, 255);
vertex_position_3d(vertex_buffer, 100, -100, 0);
vertex_color(vertex_buffer, c_red, 255);
vertex_position_3d(vertex_buffer, 0, 100, 0);
vertex_color(vertex_buffer, c_red, 255);
vertex_end(vertex_buffer);

var tex = sprite_get_texture(spr_quad, 0);
draw_set_color(c_red);
vertex_submit(vertex_buffer, pr_trianglelist, tex);
and here's my camera code:
Code:
x = 0;
y = 0;
z = -100;

_cam = view_camera[0];

_view_mat = matrix_build_lookat(x, y, z, x, y, z+1, 0, 1, 0);
var aspect = camera_get_view_width(_cam) / camera_get_view_height(_cam);
_proj_mat = matrix_build_projection_perspective_fov(90, aspect, 1, 10000);

camera_set_proj_mat(_cam, _proj_mat);
camera_set_view_mat(_cam, _view_mat);
when I run the game on macOS I can see a red triangle on screen but when I try HTML5 the triangle is not being drawn. I'm also not getting any error message on the console... not really sure what is going on.
In the HTML5 game options I've set WebGL as "Required"
Are vertex buffers not supported on HTML5? is there something else I need to do? HeEeEelp?!?!
 

Ruimm

Member
so after trying several things I found that it is required to define position, color and tex coords to draw with vertex_buffers in HTML5.
On macOS if I don't define the texcoords I get a primitive with a flat color. On HTML5 the same code will not draw anything.
Not sure if this is a bug or expected behaviour but I think both platforms should give the same result, so it should be a bug?
Anyway, at least I know how to fix it :)
 

Ricardo

Member
so after trying several things I found that it is required to define position, color and tex coords to draw with vertex_buffers in HTML5.
On macOS if I don't define the texcoords I get a primitive with a flat color. On HTML5 the same code will not draw anything.
Not sure if this is a bug or expected behaviour but I think both platforms should give the same result, so it should be a bug?
Anyway, at least I know how to fix it :)
Inconsistencies between platforms may be considered a bug (unless explicit stated in the manual due to a technical reason). Please consider opening a ticket (uploading an example project that demonstrates the issue) so the devs can take a look at it.
 
so after trying several things I found that it is required to define position, color and tex coords to draw with vertex_buffers in HTML5.
On macOS if I don't define the texcoords I get a primitive with a flat color. On HTML5 the same code will not draw anything.
Not sure if this is a bug or expected behaviour but I think both platforms should give the same result, so it should be a bug?
Anyway, at least I know how to fix it :)
Sorry to bump this 3 years old post, but I've found also that not only do you need to define position colour and tex coords, you have to define them in that order specifically. I was defining them position, tex coords and colour and it simply drew nothing.

Swapping those last 2 over fixed it.
 
Top