<?xml version="1.0"?>
<rss version="2.0">
	<channel>
		<title>A shader that sets transparancy</title>
		<link>http://www.allegro.cc/forums/view/618787</link>
		<description>Allegro.cc Forum Thread</description>
		<webMaster>matthew@allegro.cc (Matthew Leverton)</webMaster>
		<lastBuildDate>Sat, 25 Feb 2023 20:39:22 +0000</lastBuildDate>
	</channel>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>I&#39;d like to use a shader to find out if vertices are inside a circle. If not make the vertex transparant. The following compiles and runs but simply shows the full image as I made it.</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="c">// Fragment</span>
<span class="number">  2</span><span class="p">#version 420</span>
<span class="number">  3</span>uniform sampler2D tex<span class="k2">;</span>        <span class="c">// used texture unit</span>
<span class="number">  4</span>varying vec2 v_texCoord<span class="k2">;</span>    <span class="c">// x,y coordinates of point tested</span>
<span class="number">  5</span>uniform <span class="k1">float</span> mx, my<span class="k2">;</span>      <span class="c">// x,y coordinates of circle's centre</span>
<span class="number">  6</span>
<span class="number">  7</span><span class="c">// (x-mx)2+(y-my)2=r2 - points on circle</span>
<span class="number">  8</span><span class="c">// x2 - 2mx*x + mx2 + y2 - 2my*y + my2 = r2 - rewritten</span>
<span class="number">  9</span>
<span class="number"> 10</span><span class="k1">float</span> Cirkel<span class="k2">(</span> vec2 p, <span class="k1">float</span> mx, <span class="k1">float</span> my <span class="k2">)</span>
<span class="number"> 11</span><span class="k2">{</span>
<span class="number"> 12</span><span class="c">//  radius is 23px, r squared is 529</span>
<span class="number"> 13</span>  <span class="k1">if</span><span class="k2">(</span><a href="http://www.delorie.com/djgpp/doc/libc/libc_618.html" target="_blank">pow</a><span class="k2">(</span>p.x, <span class="n">2</span><span class="k2">)</span> <span class="k3">-</span> <span class="n">2</span><span class="k3">*</span>mx<span class="k3">*</span>p.x <span class="k3">+</span> <a href="http://www.delorie.com/djgpp/doc/libc/libc_618.html" target="_blank">pow</a><span class="k2">(</span>mx, <span class="n">2</span><span class="k2">)</span> <span class="k3">+</span> <a href="http://www.delorie.com/djgpp/doc/libc/libc_618.html" target="_blank">pow</a><span class="k2">(</span>p.y, <span class="n">2</span><span class="k2">)</span> <span class="k3">-</span> <span class="n">2</span><span class="k3">*</span>my<span class="k3">*</span>p.y <span class="k3">+</span> <a href="http://www.delorie.com/djgpp/doc/libc/libc_618.html" target="_blank">pow</a><span class="k2">(</span>my, <span class="n">2</span><span class="k2">)</span> <span class="k3">&lt;</span> <span class="n">529</span><span class="k2">)</span>
<span class="number"> 14</span>    <span class="k1">return</span> <span class="n">1</span>.<span class="n">0</span><span class="k2">;</span>
<span class="number"> 15</span>  <span class="k1">else</span>
<span class="number"> 16</span>    <span class="k1">return</span> <span class="n">0</span>.<span class="n">0</span><span class="k2">;</span>
<span class="number"> 17</span><span class="k2">}</span>
<span class="number"> 18</span>
<span class="number"> 19</span><span class="k1">void</span> main<span class="k2">(</span><span class="k2">)</span>
<span class="number"> 20</span><span class="k2">{</span>
<span class="number"> 21</span>  gl_FragColor <span class="k3">=</span> texture2D<span class="k2">(</span>tex, v_texCoord<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 22</span>  gl_FragColor.a <span class="k3">=</span> Cirkel<span class="k2">(</span>v_texCoord, mx, my<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 23</span><span class="k2">}</span>
</div></div><p>
and
</p><div class="source-code snippet"><div class="inner"><pre><span class="c">// Vertex</span>
<span class="p">#version 420</span>
varying vec2 v_texCoord<span class="k2">;</span>

<span class="k1">void</span> main<span class="k2">(</span><span class="k2">)</span>
<span class="k2">{</span>
    v_texCoord <span class="k3">=</span> gl_MultiTexCoord0<span class="k2">;</span><span class="c">// * 0.5;// kleinere factor vergroot meer</span>
    gl_Position <span class="k3">=</span> gl_ModelViewProjectionMatrix <span class="k3">*</span> gl_Vertex<span class="k2">;</span>
<span class="k2">}</span>
</pre></div></div><p>

Is this any good at all? Is it possible to use a mask image (white circle in black square) and let a shader do the filling in of the .a component?
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (A. van Patmos)</author>
		<pubDate>Tue, 21 Feb 2023 05:21:28 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>The backbuffer alpha is undefined. Try drawing to a buffer first, then draw using normal alpha blender to the backbuffer.
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Edgar Reynaldo)</author>
		<pubDate>Tue, 21 Feb 2023 19:49:45 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>This is the shader I use to achieve what you are asking for, but it&#39;s an Allegro shader not a pure openGl one - the circle function may be some help though:</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>uniform sampler2D al_tex<span class="k2">;</span>
<span class="number">  2</span>varying vec4 varying_color<span class="k2">;</span>
<span class="number">  3</span>varying vec2 varying_texcoord<span class="k2">;</span>
<span class="number">  4</span>
<span class="number">  5</span>vec4 pixel<span class="k2">;</span>
<span class="number">  6</span>
<span class="number">  7</span>
<span class="number">  8</span><span class="k1">float</span> <a href="http://www.allegro.cc/manual/circle"><span class="a">circle</span></a><span class="k2">(</span>in vec2 coord, in <span class="k1">float</span> r<span class="k2">)</span><span class="k2">{</span>
<span class="number">  9</span>    vec2 dist <span class="k3">=</span> coord <span class="k3">-</span> vec2<span class="k2">(</span><span class="n">0</span>.<span class="n">5</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 10</span>  <span class="k1">return</span> <span class="n">1</span>.<span class="k3">-</span>smoothstep<span class="k2">(</span>r <span class="k3">-</span> <span class="k2">(</span>r <span class="k3">*</span> <span class="n">0</span>.<span class="n">01</span><span class="k2">)</span>, r <span class="k3">+</span> <span class="k2">(</span>r <span class="k3">*</span> <span class="n">0</span>.<span class="n">01</span><span class="k2">)</span>, dot<span class="k2">(</span>dist, dist<span class="k2">)</span> <span class="k3">*</span> <span class="n">4</span>.<span class="n">0</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 11</span><span class="k2">}</span>
<span class="number"> 12</span>
<span class="number"> 13</span><span class="k1">void</span> main<span class="k2">(</span><span class="k2">)</span>
<span class="number"> 14</span><span class="k2">{</span>
<span class="number"> 15</span>  pixel <span class="k3">=</span> texture2D<span class="k2">(</span>al_tex, varying_texcoord<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 16</span>  pixel.a <span class="k3">=</span> <a href="http://www.allegro.cc/manual/circle"><span class="a">circle</span></a><span class="k2">(</span>varying_texcoord, <span class="n">0</span>.<span class="n">9</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 17</span>
<span class="number"> 18</span>  <span class="k1">if</span><span class="k2">(</span>pixel.a <span class="k3">=</span><span class="k3">=</span> <span class="n">0</span><span class="k2">)</span> <span class="k2">{</span>
<span class="number"> 19</span>    pixel.r <span class="k3">=</span> <span class="n">0</span><span class="k2">;</span>
<span class="number"> 20</span>    pixel.g <span class="k3">=</span> <span class="n">0</span><span class="k2">;</span>
<span class="number"> 21</span>    pixel.b <span class="k3">=</span> <span class="n">0</span><span class="k2">;</span>
<span class="number"> 22</span>  <span class="k2">}</span>
<span class="number"> 23</span>
<span class="number"> 24</span>  gl_FragColor <span class="k3">=</span> pixel<span class="k2">;</span>
<span class="number"> 25</span><span class="k2">}</span>
</div></div><p>

This will draw a circle in a bitmap of any size, with the other pixels transparent.
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Dizzy Egg)</author>
		<pubDate>Tue, 21 Feb 2023 22:43:33 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>The backbuffer alpha should be known and filled already I think. I have this:
</p><div class="source-code snippet"><div class="inner"><pre>  wtr <span class="k3">=</span> <a href="http://www.allegro.cc/manual/al_load_bitmap"><span class="a">al_load_bitmap</span></a><span class="k2">(</span><span class="s">"data/voor.bmp"</span><span class="k2">)</span><span class="k2">;</span>
  tmp <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><a href="http://www.allegro.cc/manual/al_get_bitmap_width"><span class="a">al_get_bitmap_width</span></a><span class="k2">(</span>wtr<span class="k2">)</span><span class="k3">*</span><span class="n">2</span>, <a href="http://www.allegro.cc/manual/al_get_bitmap_height"><span class="a">al_get_bitmap_height</span></a><span class="k2">(</span>wtr<span class="k2">)</span><span class="k3">*</span><span class="n">2</span><span class="k2">)</span><span class="k2">;</span>
</pre></div></div><p>
and
</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="k1">while</span> <span class="k2">(</span><span class="n">1</span><span class="k2">)</span>
<span class="number">  2</span><span class="k2">{</span>
<span class="number">  3</span>  <a href="http://www.allegro.cc/manual/al_wait_for_event"><span class="a">al_wait_for_event</span></a><span class="k2">(</span>event_queue, <span class="k3">&amp;</span>ev<span class="k2">)</span><span class="k2">;</span>
<span class="number">  4</span>
<span class="number">  5</span>  <a href="http://www.allegro.cc/manual/ALLEGRO_KEYBOARD_STATE"><span class="a">ALLEGRO_KEYBOARD_STATE</span></a> s<span class="k2">;</span>
<span class="number">  6</span>  <a href="http://www.allegro.cc/manual/al_get_keyboard_state"><span class="a">al_get_keyboard_state</span></a><span class="k2">(</span><span class="k3">&amp;</span>s<span class="k2">)</span><span class="k2">;</span>
<span class="number">  7</span>  <span class="k1">if</span> <span class="k2">(</span><a href="http://www.allegro.cc/manual/al_key_down"><span class="a">al_key_down</span></a><span class="k2">(</span><span class="k3">&amp;</span>s, ALLEGRO_KEY_F8<span class="k2">)</span><span class="k2">)</span>
<span class="number">  8</span>    <span class="k1">break</span><span class="k2">;</span>
<span class="number">  9</span>
<span class="number"> 10</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>tmp<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 11</span>  al_use_shader<span class="k2">(</span>kijker<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 12</span>  al_set_shader_sampler<span class="k2">(</span><span class="s">"tex"</span>, wtr, <span class="n">0</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 13</span>  al_set_shader_float<span class="k2">(</span><span class="s">"x"</span> , x<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 14</span>  al_set_shader_float<span class="k2">(</span><span class="s">"y"</span> , y<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 15</span>  <a href="http://www.allegro.cc/manual/al_draw_scaled_bitmap"><span class="a">al_draw_scaled_bitmap</span></a><span class="k2">(</span>wtr, <span class="n">0</span>, <span class="n">0</span>, <a href="http://www.allegro.cc/manual/al_get_bitmap_width"><span class="a">al_get_bitmap_width</span></a><span class="k2">(</span>wtr<span class="k2">)</span>, <a href="http://www.allegro.cc/manual/al_get_bitmap_height"><span class="a">al_get_bitmap_height</span></a><span class="k2">(</span>wtr<span class="k2">)</span>, <span class="n">0</span>, <span class="n">0</span>, <a href="http://www.allegro.cc/manual/al_get_bitmap_width"><span class="a">al_get_bitmap_width</span></a><span class="k2">(</span>tmp<span class="k2">)</span>, <a href="http://www.allegro.cc/manual/al_get_bitmap_height"><span class="a">al_get_bitmap_height</span></a><span class="k2">(</span>tmp<span class="k2">)</span>, <span class="n">0</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 16</span>  al_use_shader<span class="k2">(</span>NULL<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 17</span>
<span class="number"> 18</span>  <a href="http://www.allegro.cc/manual/al_set_target_backbuffer"><span class="a">al_set_target_backbuffer</span></a><span class="k2">(</span>display<span class="k2">)</span><span class="k2">;</span>
<span class="number"> 19</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">215</span>, <span class="n">255</span>, <span class="n">255</span><span class="k2">)</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 20</span>  <a href="http://www.allegro.cc/manual/al_draw_bitmap"><span class="a">al_draw_bitmap</span></a><span class="k2">(</span>achtergrond, <span class="n">64</span>, <span class="n">64</span>, <span class="n">0</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 21</span>  <a href="http://www.allegro.cc/manual/al_draw_bitmap"><span class="a">al_draw_bitmap</span></a><span class="k2">(</span>tmp, <span class="n">120</span>, <span class="n">120</span>, <span class="n">0</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 22</span>  <a href="http://www.allegro.cc/manual/al_flip_display"><span class="a">al_flip_display</span></a><span class="k2">(</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 23</span>
<span class="number"> 24</span>  <a href="http://www.allegro.cc/manual/al_rest"><span class="a">al_rest</span></a><span class="k2">(</span><span class="n">0</span>.<span class="n">01</span><span class="k2">)</span><span class="k2">;</span>
<span class="number"> 25</span><span class="k2">}</span>
</div></div><p>

I didn&#39;t occur to me to post this code. So wtr goes to the shader and it&#39;s result will be written to a four times larger bitmap tmp (yes, simulating a scope).</p><p>I&#39;ll try Dizzy Eggs function for sure but I&#39;d like to know what I&#39;m doing wrong.</p><p>- And it does the resize OK, but draws the full square.
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (A. van Patmos)</author>
		<pubDate>Thu, 23 Feb 2023 03:17:21 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>&gt;The backbuffer alpha should be known and filled already I think. I have this: </p><p>No, it&#39;s not defined. The backbuffer may or may not have alpha, depending on the driver and how you set it up, so you can&#39;t draw alpha directly to the backbuffer and expect it to work.
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Edgar Reynaldo)</author>
		<pubDate>Thu, 23 Feb 2023 19:50:32 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>You need to respect that the coordinates are 1.0/1.0 for the image in openGl, so you should probably use something like this (this assumes that wtr is 23x23 and tmp is 46x46):</p><div class="source-code snippet"><div class="inner"><pre><span class="k1">float</span> Cirkel<span class="k2">(</span> vec2 p, <span class="k1">float</span> mx, <span class="k1">float</span> my <span class="k2">)</span>
<span class="k2">{</span>
  <span class="c">// mx and my will be 23,23 the centre of tmp</span>
  p.x <span class="k3">*</span><span class="k3">=</span> <span class="n">46</span><span class="k2">;</span> <span class="c">//multiply by the size of tmp</span>
  p.y <span class="k3">*</span><span class="k3">=</span> <span class="n">46</span><span class="k2">;</span> <span class="c">//multiply by the size of tmp</span>
  p.y <span class="k3">=</span> <span class="n">46</span><span class="k3">-</span>p.y<span class="k2">;</span> <span class="c">//offset for openGl coords</span>

  <span class="k1">if</span><span class="k2">(</span><a href="http://www.delorie.com/djgpp/doc/libc/libc_618.html" target="_blank">pow</a><span class="k2">(</span>p.x, <span class="n">2</span><span class="k2">)</span> <span class="k3">-</span> <span class="n">2</span><span class="k3">*</span>mx<span class="k3">*</span>p.x <span class="k3">+</span> <a href="http://www.delorie.com/djgpp/doc/libc/libc_618.html" target="_blank">pow</a><span class="k2">(</span>mx, <span class="n">2</span><span class="k2">)</span> <span class="k3">+</span> <a href="http://www.delorie.com/djgpp/doc/libc/libc_618.html" target="_blank">pow</a><span class="k2">(</span>p.y, <span class="n">2</span><span class="k2">)</span> <span class="k3">-</span> <span class="n">2</span><span class="k3">*</span>my<span class="k3">*</span>p.y <span class="k3">+</span> <a href="http://www.delorie.com/djgpp/doc/libc/libc_618.html" target="_blank">pow</a><span class="k2">(</span>my, <span class="n">2</span><span class="k2">)</span> <span class="k3">&lt;</span> <span class="n">529</span><span class="k2">)</span>
    <span class="k1">return</span> <span class="n">1</span>.<span class="n">0</span><span class="k2">;</span>
  <span class="k1">else</span>
    <span class="k1">return</span> <span class="n">0</span>.<span class="n">0</span><span class="k2">;</span>
<span class="k2">}</span>
</pre></div></div><p>

You always want to multiply p.x and p.y by the size of tmp, and set mx and my to the centre of tmp...</p><p>EDIT:</p><p>Also, make sure you set:</p><p><span class="source-code"><a href="http://www.allegro.cc/manual/al_set_blender"><span class="a">al_set_blender</span></a><span class="k2">(</span>ALLEGRO_ADD, ALLEGRO_ALPHA, ALLEGRO_INVERSE_ALPHA<span class="k2">)</span><span class="k2">;</span></span></p><p>Before drawing, to make sure alpha will work properly with the shader.
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (Dizzy Egg)</author>
		<pubDate>Fri, 24 Feb 2023 22:52:50 +0000</pubDate>
	</item>
	<item>
		<description><![CDATA[<div class="mockup v2"><p>I already had al_set_blender(ALLEGRO_ADD, ALLEGRO_ALPHA, ALLEGRO_INVERSE_ALPHA); before Edgar&#39;s second reply but forgot to post that.</p><p>And I had done al_get_bitmap_format(al_get_target_bitmap() which reports 9, it is ALLEGRO_PIXEL_FORMAT_ARGB_8888 if read it right. It creates a bigger cirkle now always on a 93x93 bitmap.</p><div class="source-code snippet"><div class="inner"><pre><span class="k1">float</span> Cirkel<span class="k2">(</span> vec2 p<span class="k2">)</span><span class="c">//, float mx, float my )</span>
<span class="k2">{</span>
  <span class="c">// mx and my will be 46.5,46.5 the centre of tmp, radius too is 46.5</span>
  p.x <span class="k3">*</span><span class="k3">=</span> <span class="n">93</span><span class="k2">;</span> <span class="c">//multiply by the size of tmp</span>
  p.y <span class="k3">*</span><span class="k3">=</span> <span class="n">93</span><span class="k2">;</span> <span class="c">//multiply by the size of tmp</span>
  p.y <span class="k3">=</span> <span class="n">93</span><span class="k3">-</span>p.y<span class="k2">;</span> <span class="c">//offset for openGl coords</span>

<span class="c">//if(pow(p.x, 2) - 2*mx*p.x + pow(mx, 2) + pow(p.y, 2) - 2*my*p.y + pow(my, 2) &lt; 529)</span>
  <span class="k1">if</span><span class="k2">(</span><a href="http://www.delorie.com/djgpp/doc/libc/libc_618.html" target="_blank">pow</a><span class="k2">(</span>p.x, <span class="n">2</span><span class="k2">)</span> <span class="k3">-</span>   <span class="n">93</span><span class="k3">*</span>p.x              <span class="k3">+</span> <a href="http://www.delorie.com/djgpp/doc/libc/libc_618.html" target="_blank">pow</a><span class="k2">(</span>p.y, <span class="n">2</span><span class="k2">)</span> <span class="k3">-</span>   <span class="n">93</span><span class="k3">*</span>p.y              <span class="k3">&lt;</span> <span class="k3">-</span><span class="n">2162</span>.<span class="n">25</span><span class="k2">)</span>
    <span class="k1">return</span> <span class="n">1</span>.<span class="n">0</span><span class="k2">;</span>
  <span class="k1">else</span>
    <span class="k1">return</span> <span class="n">0</span>.<span class="n">01</span><span class="k2">;</span>
<span class="k2">}</span>
</pre></div></div><p>

But this is a great function, thanks. I can feed it a smaller image for more magnification.</p><p>-edit: I redid the whole thing in a simpler program, now paying attention to do an al_clear_to_color(al_map_rgba_f(0.0, 0.0, 0.0, 0.0)); after setting tmp as target. That did it.
</p></div>]]>
		</description>
		<author>no-reply@allegro.cc (A. van Patmos)</author>
		<pubDate>Sat, 25 Feb 2023 20:39:22 +0000</pubDate>
	</item>
</rss>
