<?xml version="1.0"?>
<rss version="2.0">
	<channel>
		<title>Learning shaders, one and for all. </title>
		<link>http://www.allegro.cc/forums/view/617536</link>
		<description>Allegro.cc Forum Thread</description>
		<webMaster>matthew@allegro.cc (Matthew Leverton)</webMaster>
		<lastBuildDate>Sat, 11 Aug 2018 03:44:11 +0000</lastBuildDate>
	</channel>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>So in the game I&#39;m porting, I have a function where I need recolor pixels in a particular area except for black. It looks something like this </p><p>Recolor (x1,y1,x2,y2,color);</p><p>Where x1,y1 is the upper left corner of the area and x2 and y2 is the lower left. Now, how I&#39;m doing it now, is copying the area from the screen to a temp bitmap, and then using a for/next loop to check the color of every pixel and then set that pixel color if it&#39;s not black. After that is done, I copy that bitmap section back to the screen.</p><p>It&#39;s super slow, and large bitmaps are causing my game to drop to below 5 FPS. That in itself is strange because, I mean, I&#39;m pushing 3.4Ghz here and someting a trivial as changing a pixel color is bogging down my system. I&#39;ve been told that I should be using a pixel shader, and doing a quick skims about them they seem over complicated for what I&#39;m trying to accomplish. But now it&#39;s serously impacting my game and I need to learn them once and for all. </p><p>The problem I&#39;m having is that every time I try and research info about what a pixel shader it&#39;s either really vague or goes in some crazy OpenGL/Direct3D low level graphics card mathematics junk. </p><p>The Allegro API is not helpful.  It shows me how to make a shader object, but then say I need to attach the source code to a shader to make it work. What source code? What language? How do you &quot;program&quot; a shader? When I look up a shader language it, it gives me like 30 of them with stuff like &quot;fragmets&quot; and you have to pass vectors and stuff. It seems so complex.</p><p>I guess the upshot is, can someone show me the &quot;front door&quot; on all of this. No 3D OpenGL/DaretX stuff, no low level graphics card gunk, I don&#39;t need &quot;vectors&quot; or &quot;fragments&quot; or &quot;tessellation&quot;, I am just looking for a fast way to recolor an area of the screen to another color (except for black).
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (nshade)</author>
		<pubDate>Fri, 10 Aug 2018 23:42:40 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>What you have to realize is that allegro uses video bitmaps by default. This means they are stored on the GPU. Whenever you modify a video bitmap by using al_lock_bitmap, it has to download the texture region you lock off of the video card. Once you&#39;re done modifying it, you have to upload it back to the gpu. This is very slow.</p><p>You can use a shader to alter the color for sure. Trouble comes when you need to read that data off of the gpu. This is where the bottleneck comes from.</p><div class="quote_container"><div class="title"><a href="http://www.allegro.cc/forums/thread/617536/1038870#target">nshade</a> said:</div><div class="quote"><p>
The Allegro API is not helpful. It shows me how to make a shader object, but then say I need to attach the source code to a shader to make it work. What source code? What language? How do you &quot;program&quot; a shader? When I look up a shader language it, it gives me like 30 of them with stuff like &quot;fragmets&quot; and you have to pass vectors and stuff. It seems so complex.
</p></div></div><p>
You&#39;ll find the manual answers several of your questions.</p><p><a href="https://liballeg.org/a5docs/trunk/shader.html">https://liballeg.org/a5docs/trunk/shader.html</a></p><p>There is an example program called ex_shader.c that demonstrates simple use of a shader.</p><p><a href="https://github.com/liballeg/allegro5/blob/master/examples/ex_shader.cpp">https://github.com/liballeg/allegro5/blob/master/examples/ex_shader.cpp</a></p><p>The source code for the shaders used is in the data directory.</p><p><a href="https://github.com/liballeg/allegro5/tree/master/examples/data">https://github.com/liballeg/allegro5/tree/master/examples/data</a></p><p>You should really try to learn this yourself.</p><p>However, I will try to make a simple demo sometime later today.
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Edgar Reynaldo)</author>
		<pubDate>Sat, 11 Aug 2018 00:32:19 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>Sounds like you want to do a palette effect. Those were quite easy to achieve in the past with Allegro 4 but on modern graphics using hardware acceleration I guess shaders are the only way to go.</p><p>Someone posted <a href="https://learnopengl.com/">this page</a> a while ago, it has a good introduction to shaders and it should be easy to adapt to using the Allegro shader addon.</p><p>Also, have you tried locking your bitmaps before manipulating the pixels?.
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (kenmasters1976)</author>
		<pubDate>Sat, 11 Aug 2018 01:51:05 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>This helps actually. It looks like shaders are linked to a language called &quot;glsl&quot; and I should be looking at that. The &quot;vectors&quot; are just ways of addressing variables.<br />Looking for &quot;glsl tutorial&quot; is being much more fruitful then &quot;shader tutorial&quot; which was way much more technical.</p><p>Looking at allegro, it appears that you write a glsl program and then attach that to Allegro. Then you turn it on when you want to use it.  </p><p>I even found a hello world program and a canvas to experiment with on online. (Evidently you can do shaders in a web browser!) neat...</p><p>As for locking the surfaces.. Yea, I do that... Here is the function in question</p><div class="source-code"><div class="toolbar"><span class="button numbers"><b>#</b></span><span class="button select">Select</span><span class="button expand">Expand</span></div><div class="inner"><span class="number">  1</span><span class="k3">*</span><span class="k3">!</span>
<span class="number">  2</span><span class="k3">*</span> \brief Replace a color a particular region, ignoring black
<span class="number">  3</span><span class="k3">*</span> \param d Destination buffer
<span class="number">  4</span><span class="k3">*</span> \param s Source buffer
<span class="number">  5</span><span class="k3">*</span> \param dx Destination X
<span class="number">  6</span><span class="k3">*</span> \param dy Destination Y
<span class="number">  7</span><span class="k3">*</span> \param sx Source X
<span class="number">  8</span><span class="k3">*</span> \param sy Source Y
<span class="number">  9</span><span class="k3">*</span> \param w Width
<span class="number"> 10</span><span class="k3">*</span> \param h Height
<span class="number"> 11</span><span class="k3">*</span> \param col1  Color to replace
<span class="number"> 12</span><span class="k3">*</span> \param col2  Color to replace it to
<span class="number"> 13</span><span class="k3">*</span><span class="k3">/</span>
<span class="number"> 14</span><span class="k1">void</span> ReplaceColor<span class="k2">(</span><span class="k1">int</span> d, <span class="k1">int</span> s, <span class="k1">int</span> dx, <span class="k1">int</span> dy, <span class="k1">int</span> sx, <span class="k1">int</span> sy, <span class="k1">int</span> w,
<span class="number"> 15</span>  <span class="k1">int</span> h, <span class="k1">int</span> col1, <span class="k1">int</span> col2<span class="k2">)</span>
<span class="number"> 16</span><span class="k2">{</span>
<span class="number"> 17</span>  <a href="http://www.allegro.cc/manual/ALLEGRO_BITMAP"><span class="a">ALLEGRO_BITMAP</span></a> <span class="k3">*</span>replacebuf<span class="k2">;</span>
<span class="number"> 18</span>  replacebuf <span class="k3">=</span> <a href="http://www.allegro.cc/manual/al_create_bitmap"><span class="a">al_create_bitmap</span></a><span class="k2">(</span>GameWidth, GameHeight<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 19</span>
<span class="number"> 20</span>  <span class="c">//The native resolution is 1280x800 which is 4x the original 320x200 resolution</span>
<span class="number"> 21</span>  <span class="k1">int</span> scaledSrcX <span class="k3">=</span> sx <span class="k3">*</span> <span class="n">4</span><span class="k2">;</span>
<span class="number"> 22</span>  <span class="k1">int</span> scaledSrcY <span class="k3">=</span> sy <span class="k3">*</span> <span class="n">4</span><span class="k2">;</span>
<span class="number"> 23</span>  <span class="k1">int</span> scaledDestX <span class="k3">=</span> dx <span class="k3">*</span> <span class="n">4</span><span class="k2">;</span>
<span class="number"> 24</span>  <span class="k1">int</span> scaledDestY <span class="k3">=</span> dy <span class="k3">*</span> <span class="n">4</span><span class="k2">;</span>
<span class="number"> 25</span>  <span class="k1">int</span> scaledW <span class="k3">=</span> w <span class="k3">*</span> <span class="n">4</span><span class="k2">;</span>
<span class="number"> 26</span>  <span class="k1">int</span> scaledH <span class="k3">=</span> h <span class="k3">*</span> <span class="n">4</span><span class="k2">;</span>
<span class="number"> 27</span>
<span class="number"> 28</span>  <span class="k1">int</span> maskx<span class="k2">;</span>
<span class="number"> 29</span>  <span class="k1">int</span> masky<span class="k2">;</span>
<span class="number"> 30</span>  <span class="k1">unsigned</span> <span class="k1">char</span> r1, g1, b1<span class="k2">;</span>
<span class="number"> 31</span>  <span class="k1">unsigned</span> <span class="k1">char</span> r2, g2, b2<span class="k2">;</span>
<span class="number"> 32</span>  <span class="k1">unsigned</span> <span class="k1">char</span> r3, g3, b3<span class="k2">;</span>
<span class="number"> 33</span>
<span class="number"> 34</span>  <span class="c">//deconstruct color 1 and 2</span>
<span class="number"> 35</span>  <a href="http://www.allegro.cc/manual/al_unmap_rgb"><span class="a">al_unmap_rgb</span></a><span class="k2">(</span>palette<span class="k2">[</span>col1<span class="k2">]</span>, <span class="k3">&amp;</span>r1, <span class="k3">&amp;</span>g1, <span class="k3">&amp;</span>b1<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 36</span>  <a href="http://www.allegro.cc/manual/al_unmap_rgb"><span class="a">al_unmap_rgb</span></a><span class="k2">(</span>palette<span class="k2">[</span>col2<span class="k2">]</span>, <span class="k3">&amp;</span>r2, <span class="k3">&amp;</span>g2, <span class="k3">&amp;</span>b2<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 37</span>
<span class="number"> 38</span>  <a href="http://www.allegro.cc/manual/al_set_target_bitmap"><span class="a">al_set_target_bitmap</span></a><span class="k2">(</span>replacebuf<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 39</span>  <a href="http://www.allegro.cc/manual/al_clear_to_color"><span class="a">al_clear_to_color</span></a><span class="k2">(</span><a href="http://www.allegro.cc/manual/al_map_rgb"><span class="a">al_map_rgb</span></a><span class="k2">(</span><span class="n">0</span>, <span class="n">0</span>, <span class="n">0</span><span class="k2">)</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 40</span>  <a href="http://www.allegro.cc/manual/al_draw_bitmap_region"><span class="a">al_draw_bitmap_region</span></a><span class="k2">(</span>bufmap<span class="k2">[</span>s<span class="k2">]</span>, scaledSrcX, scaledSrcY, scaledW, scaledH, scaledDestX, scaledDestY, <span class="n">0</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 41</span>
<span class="number"> 42</span>  <a href="http://www.allegro.cc/manual/al_lock_bitmap"><span class="a">al_lock_bitmap</span></a><span class="k2">(</span>replacebuf, ALLEGRO_PIXEL_FORMAT_ANY, ALLEGRO_LOCK_READWRITE<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 43</span>  <span class="k1">for</span> <span class="k2">(</span>masky <span class="k3">=</span> <span class="n">0</span><span class="k2">;</span> masky <span class="k3">&lt;</span> scaledH<span class="k2">;</span> masky<span class="k3">+</span><span class="k3">+</span><span class="k2">)</span>
<span class="number"> 44</span>  <span class="k2">{</span>
<span class="number"> 45</span>    <span class="k1">for</span> <span class="k2">(</span>maskx <span class="k3">=</span> <span class="n">0</span><span class="k2">;</span> maskx <span class="k3">&lt;</span> scaledW<span class="k2">;</span> maskx<span class="k3">+</span><span class="k3">+</span><span class="k2">)</span> <span class="k2">{</span>
<span class="number"> 46</span>      <span class="c">//get pixel color</span>
<span class="number"> 47</span>      masktemp <span class="k3">=</span> <a href="http://www.allegro.cc/manual/al_get_pixel"><span class="a">al_get_pixel</span></a><span class="k2">(</span>replacebuf, maskx <span class="k3">+</span> scaledDestX, masky <span class="k3">+</span> scaledDestY<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 48</span>      <a href="http://www.allegro.cc/manual/al_unmap_rgb"><span class="a">al_unmap_rgb</span></a><span class="k2">(</span>masktemp, <span class="k3">&amp;</span>r3, <span class="k3">&amp;</span>g3, <span class="k3">&amp;</span>b3<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 49</span>      <span class="k1">if</span> <span class="k2">(</span><span class="k3">!</span><span class="k2">(</span>r3 <span class="k3">=</span><span class="k3">=</span> <span class="n">0</span> <span class="k3">&amp;</span><span class="k3">&amp;</span> g3 <span class="k3">=</span><span class="k3">=</span> <span class="n">0</span> <span class="k3">&amp;</span><span class="k3">&amp;</span> b3 <span class="k3">=</span><span class="k3">=</span> <span class="n">0</span><span class="k2">)</span><span class="k2">)</span> <span class="k2">{</span>
<span class="number"> 50</span>        <span class="k1">if</span> <span class="k2">(</span>r3 <span class="k3">=</span><span class="k3">=</span> r1 <span class="k3">&amp;</span><span class="k3">&amp;</span> g3 <span class="k3">=</span><span class="k3">=</span> g1 <span class="k3">&amp;</span><span class="k3">&amp;</span> b3 <span class="k3">=</span><span class="k3">=</span> b1<span class="k2">)</span> <span class="k2">{</span>
<span class="number"> 51</span>          <a href="http://www.allegro.cc/manual/al_put_pixel"><span class="a">al_put_pixel</span></a><span class="k2">(</span>maskx <span class="k3">+</span> scaledDestX, masky <span class="k3">+</span> scaledDestY, palette<span class="k2">[</span>col2<span class="k2">]</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 52</span>        <span class="k2">}</span>
<span class="number"> 53</span>      <span class="k2">}</span>
<span class="number"> 54</span>    <span class="k2">}</span>
<span class="number"> 55</span>  <span class="k2">}</span>
<span class="number"> 56</span>
<span class="number"> 57</span>  <a href="http://www.allegro.cc/manual/al_unlock_bitmap"><span class="a">al_unlock_bitmap</span></a><span class="k2">(</span>replacebuf<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 58</span>
<span class="number"> 59</span>  <a href="http://www.allegro.cc/manual/al_set_target_bitmap"><span class="a">al_set_target_bitmap</span></a><span class="k2">(</span>bufmap<span class="k2">[</span>d<span class="k2">]</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 60</span>  <a href="http://www.allegro.cc/manual/al_draw_bitmap_region"><span class="a">al_draw_bitmap_region</span></a><span class="k2">(</span>replacebuf, scaledDestX, scaledDestY, scaledW, scaledH, scaledDestX, scaledDestY, <span class="n">0</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 61</span>  <a href="http://www.allegro.cc/manual/al_set_target_bitmap"><span class="a">al_set_target_bitmap</span></a><span class="k2">(</span><a href="http://www.allegro.cc/manual/al_get_backbuffer"><span class="a">al_get_backbuffer</span></a><span class="k2">(</span>DISPLAY<span class="k2">)</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 62</span>  <span class="k1">if</span> <span class="k2">(</span>d <span class="k3">=</span><span class="k3">=</span> SCREEN<span class="k2">)</span> <span class="k2">{</span> UpdateScreen<span class="k2">(</span><span class="k2">)</span><span class="k2">;</span> <span class="k2">}</span>
<span class="number"> 63</span>  <a href="http://www.allegro.cc/manual/al_destroy_bitmap"><span class="a">al_destroy_bitmap</span></a><span class="k2">(</span>replacebuf<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 64</span><span class="k2">}</span>
</div></div><p>
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (nshade)</author>
		<pubDate>Sat, 11 Aug 2018 01:51:13 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p><a href="https://learnopengl.com/Getting-started/Shaders">https://learnopengl.com/Getting-started/Shaders</a> has a good intro to shaders.</p><p>As for why your program is slow, there are several reasons.</p><p>1) You&#39;re creating a temporary ALLEGRO_BITMAP* buffer every time you draw something in a different color. The constant allocation and destruction of this buffer slows your code down.</p><p>2) The buffer is unnecessary, because you&#39;re using a locked region.</p><p>3) ALLEGRO_LOCK_READWRITE causes the texture to be downloaded off the gpu on locking, and uploaded back to the gpu when unlocked. This is slow. Reading causes download. Writing causes upload.</p><p>4) Just lock bufmap[i] directly, using only the region you need to recolor.</p><p>5) A shader could replace the color as it is drawn on the gpu, which would avoid all this nonsense altogether. It&#39;s perfect for what you want.
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Edgar Reynaldo)</author>
		<pubDate>Sat, 11 Aug 2018 03:44:11 +0000</pubDate>
	</item>
</rss>
