Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed code blocks on YUV Videos page #231

Merged
merged 1 commit into from
Dec 26, 2024
Merged

Fixed code blocks on YUV Videos page #231

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 65 additions & 69 deletions Manual/contents/GameMaker_Language/GML_Reference/Drawing/Videos/YUV_Videos.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Adobe RoboHelp 2020" />
<meta name="generator" content="Adobe RoboHelp 2022" />
<title>YUV Videos</title>
<meta name="topic-status" content="Draft" />
<link rel="stylesheet" type="text/css" href="../../../../assets/css/default.css" />
Expand All @@ -21,79 +21,75 @@ <h1>YUV Videos</h1>
<p>Read the <span class="inline"><a href="video_draw.htm">video_draw()</a></span> reference page first for information on what data that function returns for YUV videos, and then continue reading below for instructions on using that data to draw the video.</p>
<h2>YUV Shader</h2>
<p>Create a shader asset in your project, and replace its Fragment Shader (<span class="inline2">.fsh</span>) code with this:</p>
<pre>//
// CUSTOM fragment shader for handling YUV content
//
varying vec2 v_vTexcoord;
varying vec4 v_vColour;
uniform sampler2D v_chroma;
const float x = 1.164383;
const float y = 1.138393;
const float z = 1.138393;
const vec3 src_bias = vec3(16.0 / 255.0, 128.0 / 255.0, 128.0 / 255.0);
const mat3 src_xform = mat3(1.00000000 * x, 0.00000000 * y, 1.57480000 * z,
1.00000000 * x, -0.18732427 * y, -0.46812427 * z,
1.00000000 * x, 1.85560000 * y, 0.00000000 * z);
void main()
{
float yy = texture2D(gm_BaseTexture, vec2(v_vTexcoord.x, v_vTexcoord.y)).r;
vec2 cbcr = texture2D(v_chroma, vec2(v_vTexcoord.x, v_vTexcoord.y)).rg;
vec3 yuv = vec3(yy, cbcr);
yuv -= src_bias;
yuv *= src_xform;
gl_FragColor = vec4(yuv, 1.0);
}

</pre>
<p class="code">//<br />
// CUSTOM fragment shader for handling YUV content<br />
//<br />
varying vec2 v_vTexcoord;<br />
varying vec4 v_vColour;<br />
uniform sampler2D v_chroma;<br />
const float x = 1.164383;<br />
const float y = 1.138393;<br />
const float z = 1.138393;<br />
const vec3 src_bias = vec3(16.0 / 255.0, 128.0 / 255.0, 128.0 / 255.0);<br />
const mat3 src_xform = mat3(1.00000000 * x,  0.00000000 * y,  1.57480000 * z,<br />
                            1.00000000 * x, -0.18732427 * y, -0.46812427 * z,<br />
                            1.00000000 * x,  1.85560000 * y,  0.00000000 * z);<br />
void main()<br />
{<br />
    float yy = texture2D(gm_BaseTexture, vec2(v_vTexcoord.x, v_vTexcoord.y)).r;<br />
    vec2 cbcr = texture2D(v_chroma, vec2(v_vTexcoord.x, v_vTexcoord.y)).rg;<br />
    vec3 yuv = vec3(yy, cbcr);<br />
    yuv -= src_bias;<br />
    yuv *= src_xform;<br />
    gl_FragColor = vec4(yuv, 1.0);<br />
}</p>
<h2>Get Sampler</h2>
<p>In the Create event of your object, get the sampler ID of the <span class="inline2">v_chroma</span> shader uniform, only if the video is YUV:</p>
<pre>var _format = video_get_format();
if (_format == video_format_yuv)
{
videochromasampler = shader_get_sampler_index(shader_YUV, &quot;v_chroma&quot;);
}
</pre>
<p class="code">var _format = video_get_format();<br />
if (_format == video_format_yuv)<br />
{<br />
    videochromasampler = shader_get_sampler_index(shader_YUV, &quot;v_chroma&quot;);<br />
}</p>
<h2 id="h">Draw Video</h2>
<p>In the Draw event of your object, call <span class="inline"><a href="video_draw.htm">video_draw()</a></span>, and if its first array position is <strong>0</strong> (meaning the video is playing), draw the video.</p>
<p>In the code below, we&#39;re using a switch statement on the <span class="inline"><a href="video_get_format.htm">video_get_format()</a></span> function. If the video is using the RGBA format, then it simply draws the surface in position <span class="inline2">[1]</span> of the array.</p>
<p>If the video is using the YUV format, it uses the shader to draw the two surfaces (in positions <span class="inline2">[1]</span> and <span class="inline2">[2]</span>) onto a primitive quad.</p>
<pre>var _data = video_draw();
if(_data[0] == 0)
{
switch(video_get_format())
{
case video_format_rgba:
var _surf = _data[1];
draw_surface(_surf,0,0);
break;

// #### YUV PART HERE ####
case video_format_yuv:
var _surf = _data[1];
var _chromasurf = _data[2];
if(surface_exists(_surf) and surface_exists(_chromasurf))
{
shader_set(shader_YUV);

var _tex_id = surface_get_texture(_surf);
var _chroma_tex_id = surface_get_texture(_chromasurf);
texture_set_stage(videochromasampler, _chroma_tex_id);
gpu_set_texfilter(false);

draw_primitive_begin_texture(pr_trianglestrip, _tex_id);
draw_vertex_texture(0, 0, 0, 0);
draw_vertex_texture(surface_get_width(_chromasurf), 0, 1, 0);
draw_vertex_texture(0, surface_get_height(_chromasurf), 0, 1);
draw_vertex_texture(surface_get_width(_chromasurf), surface_get_height(_chromasurf), 1, 1);
draw_primitive_end();

gpu_set_texfilter(true);
shader_reset();
}
break;
}
}
</pre>
<p class="code">var _data = video_draw();<br />
if(_data[0] == 0)<br />
{<br />
    switch(video_get_format())<br />
    {<br />
        case video_format_rgba:<br />
            var _surf = _data[1];<br />
            draw_surface(_surf,0,0);<br />
        break;<br />
    <br />
        //  #### YUV PART HERE ####<br />
        case video_format_yuv:<br />
            var _surf = _data[1];<br />
            var _chromasurf = _data[2];<br />
            if(surface_exists(_surf) and surface_exists(_chromasurf))<br />
            {<br />
                shader_set(shader_YUV);<br />
            <br />
                var _tex_id = surface_get_texture(_surf);<br />
                var _chroma_tex_id = surface_get_texture(_chromasurf);<br />
                texture_set_stage(videochromasampler, _chroma_tex_id);<br />
                gpu_set_texfilter(false);<br />
            <br />
                draw_primitive_begin_texture(pr_trianglestrip, _tex_id);<br />
                draw_vertex_texture(0, 0, 0, 0);<br />
                draw_vertex_texture(surface_get_width(_chromasurf), 0, 1, 0);<br />
                draw_vertex_texture(0, surface_get_height(_chromasurf), 0, 1);<br />
                draw_vertex_texture(surface_get_width(_chromasurf), surface_get_height(_chromasurf), 1, 1);<br />
                draw_primitive_end();<br />
            <br />
                gpu_set_texfilter(true);<br />
                shader_reset();<br />
            }<br />
        break;<br />
    }<br />
}</p>
<p>The code under <span class="inline2">case video_format_yuv:</span> does the following:</p>
<ul class="colour">
<li>Gets the video surface (<span class="inline2">_surf</span>) and the chroma surface (<span class="inline2">_chromasurf</span>)</li>
Expand Down Expand Up @@ -121,7 +117,7 @@ <h2 id="h">Draw Video</h2>
<div>Next: <a data-xref="{title}" href="video_set_volume.htm">video_set_volume</a></div>
</div>
</div>
<h5><span data-keyref="Copyright Notice">© Copyright YoYo Games Ltd. 2022 All Rights Reserved</span></h5>
<h5><span data-keyref="Copyright Notice">© Copyright YoYo Games Ltd. 2024 All Rights Reserved</span></h5>
</div>
<!-- KEYWORDS
YUV Videos
Expand Down