Skip to content

Commit

Permalink
webgl2 sample update wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@floooh
floooh committed Sep 22, 2024
1 parent e4ddca6 commit 7282bec
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 104 deletions.
108 changes: 54 additions & 54 deletions html5/arraytex-emsc.c
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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();
Expand Down
77 changes: 38 additions & 39 deletions html5/blend-emsc.c
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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);
}
}
Expand Down
21 changes: 10 additions & 11 deletions html5/bufferoffsets-emsc.c
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
});

Expand Down

0 comments on commit 7282bec

Please sign in to comment.