canysway dev blog

 Gaussian blur is result of blurring an image by Gaussian function. We need to use large kernel to make strong blur and this cause the high complexity. And that's why we should use multi-pass which is seperated into horizontal, vertical pass . It can reduce the complexity and make faster. In Spark AR there are many ways to make it. And I wanna introduce one of them using shader files (.sca). You can download it for free from the gumload link below. It is modulated to adjust horizontal, vertical strength easily . Hope this can help you. Loading...

Mosaic effect is similar to lowering the resolution of an image. Let's see example image. And full source code likes below. void mainImage( out vec4 fragColor, in vec2 fragCoord ){     // Normalized pixel coordinates (from 0 to 1)     vec2 uv = fragCoord/iResolution.xy;     if (uv.x > 0.7 && uv.y < 0.4 ){          //left bottoom small image         uv.x -= 0.6 ;         uv *= 2.0 ;         fragColor = texture (iChannel0, uv);         fragColor += vec4 ( 0.2 );         return ;     }     //mosaic effect     uv = uv * 30.0 ;     vec2 uv = floor (uv);     uv = uv/ 30.0 ;     fragColor = texture (iChannel0, uv); } The key function of mosaic effect is "floor" If you want to make it sharper, multiply uv by ...

How can we devide camera view like above image? If you think adjusting the position and size by dividing each section, it will be a very difficult task. And If you made it that way, how can you make the following 10x10 image? The answer is "T o make pattern,  Use fract function." The full code is like below.  If you want to make 4x4 image, change this line : " uv *= 4.0; " void mainImage( out vec4 fragColor, in vec2 fragCoord ){     // Normalized pixel coordinates (from 0 to 1)     vec2 uv = fragCoord/iResolution.xy;     uv *= 10.0 ;     uv = fract (uv);     fragColor = texture (iChannel0, uv); } Declaration genType fract ( genType x ) Description returns the fractional part of  x . This is calculated as  x  -  floor ( x ). reference (  https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/fract.xhtml ) - Before fract fun...

Translate, rotate and scale are most basic element of image effect. If you didn't understand how make effect at each pixel, please read again before post "Show Video and Image" . 1. Translate Translation means each pixel move parallel on the x, y-axis. In other words, if you want to translate 0.25 on the x-axis, a pixel should point to a distance of -0.25 from the original. Translate ex) void mainImage( out vec4 fragColor, in vec2 fragCoord ){     vec2 uv = fragCoord/iResolution.xy;     if (uv.x < 0.5 ){         // translate to x ( -0.25 )         uv.x += 0.25 ;     } else {         // translate to x ( +0.25 )         uv.x -= 0.25 ;     }     fragColor = texture (iChannel0, uv); } result) 2. Scale Scale also has a  similar concept to parallel translation. If you want to zoom in twice, each pixel s...

The simple image is made like this. void  mainImage(  out   vec4  fragColor,  in   vec2  fragCoord ){      // Normalized pixel coordinates (from 0 to 1)      vec2  uv = fragCoord/iResolution.xy;           //uv.x = uv.x - 0.3;      fragColor =  texture (iChannel0, uv); } I think GPU processing has two major steps. Normalizing and Pointing. 1. Normalizing Each pixel has screen coordinate and we need to normalizing from 0.0 to 1.0, because there are many displays with various resolutions around us. We can not manage it at each resolution. It is very troublesome. So we should normalize it :   vec2   uv = fragCoord/iResolution.xy; 2. Pointing I told you each pixel has a screen coordinate. At each coordinate we need to link with sampler's coordinate. Sampler has also coordinate 0.0 to 1.0. As a result, we see the samplers p...

GLSL (OpenGL Shading Language)   is a language that enables developers to directly control the graphics pipeline.  We will do GPU programming using GLSL.  And I recommend the Shadertoy to easily program it. By using Shadertoy, y ou can see the results of GLSL programming on the screen without OpenGL. It looks like below. I made simple mosaic effect. The great thing of this is you can program and take result on the screen in real time. We do not need to write GL code directly :) But this tool also has some rules. Because we don't program GL, there are some promised uniform variables. And I'll introduce some important input uniforms. uniform vec3 iResolution    (x,y,z of your screen resolution) uniform float iTime             (current time second info) uniform float iFrame              (current frame number info) uniform vec4 iMouse   ...

We are used to connecting firebases database using Java. But how can we take database with Kotlin? Event it is not listed in the Firebase document. I've been able to do this after many attempts. As Android adopts Kotllyn as a formal language, I expect it to be documented as soon as possible. This app is English Radio Application made with Kotllyn. I will show you how this app receive Firebase database. https://play.google.com/store/apps/details?id=com.english_radio   Everytime this app is synchronized with Firebase database for radio channel. Let's see Firebase database structure. Let's take a closer look at this "c_data" node. It has boolean, String, Array object. And then we can take this like that. object FBReceiveHelper { val cDB : DatabaseReference by lazy { FirebaseDatabase.getInstance().getReference(KO_Attributes. C_DATA ) } fun getChannelsData(onReceiveComplete: OnReceiveComplete){ cDB .addListenerForSingleValu...