From 7282bec19eb099a8240f7efd55fc6f15d7141652 Mon Sep 17 00:00:00 2001 From: Andre Weissflog Date: Sun, 22 Sep 2024 11:58:17 +0200 Subject: [PATCH] webgl2 sample update wip --- html5/arraytex-emsc.c | 108 ++++++++++++++++++------------------- html5/blend-emsc.c | 77 +++++++++++++------------- html5/bufferoffsets-emsc.c | 21 ++++---- 3 files changed, 102 insertions(+), 104 deletions(-) diff --git a/html5/arraytex-emsc.c b/html5/arraytex-emsc.c index 80b8fc3d..fd6dd966 100644 --- a/html5/arraytex-emsc.c +++ b/html5/arraytex-emsc.c @@ -129,66 +129,66 @@ int main() { state.bind = (sg_bindings){ .vertex_buffers[0] = vbuf, .index_buffer = ibuf, - .fs = { - .images[0] = img, - .samplers[0] = smp, - } + .images[0] = img, + .samplers[0] = smp, }; // shader to sample from array texture sg_shader shd = sg_make_shader(&(sg_shader_desc){ + .vertex_func.source = + "#version 300 es\n" + "uniform mat4 mvp;\n" + "uniform vec2 offset0;\n" + "uniform vec2 offset1;\n" + "uniform vec2 offset2;\n" + "in vec4 position;\n" + "in vec2 texcoord0;\n" + "out vec3 uv0;\n" + "out vec3 uv1;\n" + "out vec3 uv2;\n" + "void main() {\n" + " gl_Position = mvp * position;\n" + " uv0 = vec3(texcoord0 + offset0, 0.0);\n" + " uv1 = vec3(texcoord0 + offset1, 1.0);\n" + " uv2 = vec3(texcoord0 + offset2, 2.0);\n" + "}\n", + .fragment_func.source = + "#version 300 es\n" + "precision mediump float;\n" + "precision lowp sampler2DArray;\n" + "uniform sampler2DArray tex;\n" + "in vec3 uv0;\n" + "in vec3 uv1;\n" + "in vec3 uv2;\n" + "out vec4 frag_color;\n" + "void main() {\n" + " vec4 c0 = texture(tex, uv0);\n" + " vec4 c1 = texture(tex, uv1);\n" + " vec4 c2 = texture(tex, uv2);\n" + " frag_color = vec4(c0.xyz + c1.xyz + c2.xyz, 1.0);\n" + "}\n", .attrs = { - [0].name = "position", - [1].name = "texcoord0" + [0].glsl_name = "position", + [1].glsl_name = "texcoord0" }, - .vs = { - .uniform_blocks[0] = { - .size = sizeof(params_t), - .uniforms = { - [0] = { .name="mvp", .type=SG_UNIFORMTYPE_MAT4 }, - [1] = { .name="offset0", .type=SG_UNIFORMTYPE_FLOAT2 }, - [2] = { .name="offset1", .type=SG_UNIFORMTYPE_FLOAT2 }, - [3] = { .name="offset2", .type=SG_UNIFORMTYPE_FLOAT2 } - } - }, - .source = - "#version 300 es\n" - "uniform mat4 mvp;\n" - "uniform vec2 offset0;\n" - "uniform vec2 offset1;\n" - "uniform vec2 offset2;\n" - "in vec4 position;\n" - "in vec2 texcoord0;\n" - "out vec3 uv0;\n" - "out vec3 uv1;\n" - "out vec3 uv2;\n" - "void main() {\n" - " gl_Position = mvp * position;\n" - " uv0 = vec3(texcoord0 + offset0, 0.0);\n" - " uv1 = vec3(texcoord0 + offset1, 1.0);\n" - " uv2 = vec3(texcoord0 + offset2, 2.0);\n" - "}\n", + .uniform_blocks[0] = { + .stage = SG_SHADERSTAGE_VERTEX, + .size = sizeof(params_t), + .glsl_uniforms = { + [0] = { .glsl_name = "mvp", .type = SG_UNIFORMTYPE_MAT4 }, + [1] = { .glsl_name = "offset0", .type = SG_UNIFORMTYPE_FLOAT2 }, + [2] = { .glsl_name = "offset1", .type = SG_UNIFORMTYPE_FLOAT2 }, + [3] = { .glsl_name = "offset2", .type = SG_UNIFORMTYPE_FLOAT2 } + } + }, + .images[0] = { .stage = SG_SHADERSTAGE_FRAGMENT, .image_type = SG_IMAGETYPE_ARRAY }, + .samplers[0].stage = SG_SHADERSTAGE_FRAGMENT, + .image_sampler_pairs[0] = { + .stage = SG_SHADERSTAGE_FRAGMENT, + .glsl_name = "tex", + .image_slot = 0, + .sampler_slot = 0 }, - .fs = { - .images[0] = { .used = true, .image_type = SG_IMAGETYPE_ARRAY }, - .samplers[0].used = true, - .image_sampler_pairs[0] = { .used = true, .glsl_name = "tex", .image_slot = 0, .sampler_slot = 0 }, - .source = - "#version 300 es\n" - "precision mediump float;\n" - "precision lowp sampler2DArray;\n" - "uniform sampler2DArray tex;\n" - "in vec3 uv0;\n" - "in vec3 uv1;\n" - "in vec3 uv2;\n" - "out vec4 frag_color;\n" - "void main() {\n" - " vec4 c0 = texture(tex, uv0);\n" - " vec4 c1 = texture(tex, uv1);\n" - " vec4 c2 = texture(tex, uv2);\n" - " frag_color = vec4(c0.xyz + c1.xyz + c2.xyz, 1.0);\n" - "}\n" - } }); // create pipeline object @@ -241,7 +241,7 @@ static EM_BOOL draw(double time, void* userdata) { sg_begin_pass(&(sg_pass){ .action = state.pass_action, .swapchain = emsc_swapchain() }); sg_apply_pipeline(state.pip); sg_apply_bindings(&state.bind); - sg_apply_uniforms(SG_SHADERSTAGE_VS, 0, &SG_RANGE(vs_params)); + sg_apply_uniforms(0, &SG_RANGE(vs_params)); sg_draw(0, 36, 1); sg_end_pass(); sg_commit(); diff --git a/html5/blend-emsc.c b/html5/blend-emsc.c index 3138ee74..eb7fcece 100644 --- a/html5/blend-emsc.c +++ b/html5/blend-emsc.c @@ -64,29 +64,28 @@ int main() { // a shader for the fullscreen background quad sg_shader bg_shd = sg_make_shader(&(sg_shader_desc){ - .attrs = { - [0].name = "position" - }, - .vs.source = - "attribute vec2 position;\n" + .vertex_func.source = + "#version 300 es\n" + "layout(location=0) in vec2 position;\n" "void main() {\n" " gl_Position = vec4(position, 0.5, 1.0);\n" "}\n", - .fs = { - .uniform_blocks[0] = { - .size = sizeof(fs_params_t), - .uniforms = { - [0] = { .name="tick", .type=SG_UNIFORMTYPE_FLOAT } - } + .fragment_func.source = + "#version 300 es\n" + "precision mediump float;\n" + "uniform float tick;\n" + "out vec4 frag_color;\n" + "void main() {\n" + " vec2 xy = fract((gl_FragCoord.xy-vec2(tick)) / 50.0);\n" + " frag_color = vec4(vec3(xy.x*xy.y), 1.0);\n" + "}\n", + .uniform_blocks[0] = { + .stage = SG_SHADERSTAGE_FRAGMENT, + .size = sizeof(fs_params_t), + .glsl_uniforms = { + [0] = { .glsl_name = "tick", .type = SG_UNIFORMTYPE_FLOAT } }, - .source = - "precision mediump float;\n" - "uniform float tick;\n" - "void main() {\n" - " vec2 xy = fract((gl_FragCoord.xy-vec2(tick)) / 50.0);\n" - " gl_FragColor = vec4(vec3(xy.x*xy.y), 1.0);\n" - "}\n" - } + }, }); // a pipeline state object for rendering the background quad @@ -103,31 +102,31 @@ int main() { // a shader for the blended quads sg_shader quad_shd = sg_make_shader(&(sg_shader_desc){ - .attrs = { - [0].name = "position", - [1].name = "color0" - }, - .vs.uniform_blocks[0] = { - .size = sizeof(vs_params_t), - .uniforms = { - [0] = { .name="mvp", .type=SG_UNIFORMTYPE_MAT4 } - } - }, - .vs.source = + .vertex_func.source = + "#version 300 es\n" "uniform mat4 mvp;\n" - "attribute vec4 position;\n" - "attribute vec4 color0;\n" - "varying vec4 color;\n" + "layout(location=0) in vec4 position;\n" + "layout(location=1) in vec4 color0;\n" + "out vec4 color;\n" "void main() {\n" " gl_Position = mvp * position;" " color = color0;\n" "}\n", - .fs.source = + .fragment_func.source = + "#version 300 es\n" "precision mediump float;\n" - "varying vec4 color;\n" + "in vec4 color;\n" + "out vec4 frag_color;\n" "void main() {\n" - " gl_FragColor = color;\n" - "}" + " frag_color = color;\n" + "}", + .uniform_blocks[0] = { + .stage = SG_SHADERSTAGE_VERTEX, + .size = sizeof(vs_params_t), + .glsl_uniforms = { + [0] = { .glsl_name = "mvp", .type = SG_UNIFORMTYPE_MAT4 } + } + }, }); // one pipeline object per blend-factor combination @@ -200,7 +199,7 @@ static EM_BOOL draw(double time, void* userdata) { // draw a background quad sg_apply_pipeline(state.bg_pip); sg_apply_bindings(&state.bind); - sg_apply_uniforms(SG_SHADERSTAGE_FS, 0, &SG_RANGE(state.fs_params)); + sg_apply_uniforms(0, &SG_RANGE(state.fs_params)); sg_draw(0, 4, 1); // draw the blended quads @@ -216,7 +215,7 @@ static EM_BOOL draw(double time, void* userdata) { if (state.pips[src][dst].id != SG_INVALID_ID) { sg_apply_pipeline(state.pips[src][dst]); sg_apply_bindings(&state.bind); - sg_apply_uniforms(SG_SHADERSTAGE_VS, 0, &SG_RANGE(state.vs_params)); + sg_apply_uniforms(0, &SG_RANGE(state.vs_params)); sg_draw(0, 4, 1); } } diff --git a/html5/bufferoffsets-emsc.c b/html5/bufferoffsets-emsc.c index e75b3142..0a952d77 100644 --- a/html5/bufferoffsets-emsc.c +++ b/html5/bufferoffsets-emsc.c @@ -63,23 +63,22 @@ int main() { // create a shader to render 2D colored shapes sg_shader shd = sg_make_shader(&(sg_shader_desc){ - .attrs = { - [0].name = "pos", - [1].name = "color0" - }, - .vs.source = - "attribute vec2 pos;" - "attribute vec3 color0;" - "varying vec4 color;" + .vertex_func.source = + "#version 300 es\n" + "layout(location=0) in vec2 pos;" + "layout(location=1) in vec3 color0;" + "out vec4 color;" "void main() {" " gl_Position = vec4(pos, 0.5, 1.0);\n" " color = vec4(color0, 1.0);\n" "}\n", - .fs.source = + .fragment_func.source = + "#version 300 es\n", "precision mediump float;\n" - "varying vec4 color;\n" + "in vec4 color;\n" + "out vec4 frag_color;\n" "void main() {\n" - " gl_FragColor = color;\n" + " frag_color = color;\n" "}\n" });