Mathematical Way/Tools I Used

hi
i wanna share some math part here i use in Shader - or code they help me for create some short and useful code

they are tested and always work so you can use them without you wanna understand the inner code algorithm

5 Likes

negative or positive

if(x>0) return 1 else return -1;
(x > 0. ? 1. : -1)
or
( x / (abs(x) + 0.00001) )

4 Likes

circle path

position.x = sin(time)*circle_radius;
position.z = cos(time)*circle_radius;

https://www.babylonjs-playground.com/#ZNQP8G

3 Likes

rounded sguare

var a = Math.sin(i3.14159265/180.);
var b = Math.cos(i
3.14159265/180.);

sphere.position.x = ( a / ( Math.abs(a) + 0.0001) ) * ( Math.pow(Math.abs(a),0.5))*3.;
sphere.position.z = ( b / ( Math.abs(b) + 0.0001) ) * ( Math.pow(Math.abs(b),0.5))*3.;

https://www.babylonjs-playground.com/#ZNQP8G#2
https://www.babylonjs-playground.com/#ZNQP8G#3

4 Likes

exact square edge path

       var sq_seg = 100;  // any edge segments

        var p = {x:0.,y:0.,z:0.};

        var i1  =time+sq_seg-1 ;
        var i2 = Math.floor(i1/sq_seg);
        var i3 = sq_seg- i1%sq_seg; 
        var i31 = 1.-(i3-1)*(1./sq_seg); 
        var i4 = 1.- 1./sq_seg*(i1%sq_seg)-1./sq_seg;
        
        if(i2==0 ) p = {x:0.,y:0,z:0};
        if(i2==1 ) p = {x:i31,y:0,z:0};
        if(i2==2 ) p = {x:1 ,y:0,z:i31};
        if(i2==3 ) p = {x:i4,y:0,z:1};
        if(i2==4 ) p = {x:0,y:0.,z:1.*i4}; 

        p.x -= 0.5;
        p.z -= 0.5; 
        
        p.x *= edge_length;
        p.z *= edge_length;  

https://www.babylonjs-playground.com/#ZNQP8G#4
https://www.babylonjs-playground.com/#ZNQP8G#5
https://www.babylonjs-playground.com/#ZNQP8G#7

5 Likes

Why not rely on sign : sign - OpenGL 4 Reference Pages ?

I usually try the (x-xc) ^ 2 + (y-yc) ^ 2 - radius ^ 2 == 0 to prevent the expensive sin and cos when I can

For some others amazing ones: Inigo Quilez :: fractals, computer graphics, mathematics, shaders, demoscene and more

2 Likes

and by the way @nasimiasl, I love this thread :slight_smile:

are you scared about this 2 beauty ( sin, cos ) ?

not scared but if it can be replaced by 2 add and mul, I dunno I am trying to keep it there :slight_smile:

But agree it is a heavily premature optim :slight_smile:

1 Like

i know you wanna help to me to continue some more math helpers :slight_smile:
same as dance challenge on stage :slight_smile:

3 Likes

the important math key

keep your base numbers between 0 - 1

you can do anything on the result

for example if you have the x between 0-1 you can use pow function and the result always stay in that range too

https://www.babylonjs-playground.com/#ZNQP8G#11
https://www.babylonjs-playground.com/#ZNQP8G#12

2 Likes

https://www.babylonjs-playground.com/#ZNQP8G#15
image

5 Likes

the important stuff is you make it understandable

The geometryBuilder code use them i stat make them object oriented math function
i next few days i show how can detect wall without raycast only by matematical

4 Likes

2 way for scale a big number between 0 - 1

  1. use y = 1.- ( a / ( x-a ));
    it is start from 0 and never meet 1
    a is the fixed number for control result scaling speed

image

https://www.babylonjs-playground.com/#ZNQP8G#18

2 . use y = log(x+1) / log(max+1.);

it is start from 0 and meet 1
max is the maximum x number you have

https://www.babylonjs-playground.com/#ZNQP8G#19

how can correct math frequency for “cos” function

problem : when we use math in shader we call any function for each pixel so GPU dont understand any before and after so for example when we use “Cos( x * y )”
that work fine in the small area
but that not work well in “Cos(xy100)”
nomaly that make a lot noise
you can use smoothStep function and mixing some other cos value for fix that

https://www.babylonjs-playground.com/#I5NJSE#8

hey again :slight_smile:

[Prime numbers] ( you can use binary too but this is faster )

if you wanna use multiple condition(boolean) in one integer number that is best and fast way

you can use 16 flag in one long integer (recommended for add flags uniform to shader)

// index: 0 ,1, 2 ,3, 4 ,5 ,6 ,7 ,8 ,9 , 10 , 11,12 ,13 ,14 ,15
// prim = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47 , 53];

var a = 1; // all flag is down

a =2*3; // 2 flag is up

if(a%2 == 0) // check flag 0
if(a%3 == 0) // check flag 1
if(a%(2 * 3 * 7 * 11) == 0) // check flag 0,1,3,4 in same time

if(a == 1) // check all flag off

// shader mode
if( mod(a,2) == 0 ) // check flag 0

a/= 3; // remove flag from list ::))))

1 Like

Could you share the code for this? :slight_smile:

hey @samevision sorry for late
https://www.babylonjs-playground.com/#Z2TXI0#3
here is code for detect close point an the wall ( inside is allowed )
https://www.babylonjs-playground.com/#Z2TXI0#2 ( inside and outside is allowed )

performance test : 400 check wall in same time
https://www.babylonjs-playground.com/#Z2TXI0#4

you can detect a wall direction too
https://www.babylonjs-playground.com/#Z2TXI0#5 ( inside and outside is allowed )

under constriction

3 Likes

one of the most important ones
linear interpolation

lerp(a, b, n) => (1 - n) * a + n * b;

for example - move an object or camera alpha/beta/radius smoothly
val = lerp(val, targetVal, speed);

3 Likes

@nasimiasl

Thank you for providing these playgrounds. It’s really helpful!

1 Like