Help Glsl matrix replicating p5.js applyMatrix for pixel fragment shader raymarching glsl top

Beginners
1

Im still learning glsl / vector math very new but how would i replicate the applyMatrix function applyMatrix in glsl considering its a mat4 and also the different drawing /rendering pipeline of p5js along w its position above my push pop translate for the loop versus glsl tops pixel / fragment pipeline and its different matrix function in general if glsl computes it differently
but same mat4 values i used so far tried within a table dat w 4 rows/cols for the matrix parameter in my glsl top matricies define
.Also will this only work for raymarching in my pixel shader if so my first glsl code here will be my raymarching code id like to apply it to (and without if possible) and then after ill put my two different attempts at adding the mat4 to match p5.js pipeline / matrix effect and first of course heres my p5js loop with applyMatrix
function setup() {
createCanvas(600, 600, WEBGL);

}

function draw() {
background(0);
strokeWeight(1.5);
stroke(255);

   applyMatrix(
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0, 0.0,
0.0, 0.0, 1.0, 0.005,
0.0, 0.0, 0.0, 1.0

);

lfo1 = 154cos(frameCount0.05);
for (let x = -300; x <= 300; x += 10) {
for (let y = -300; y <= 300; y += 10) {
push();
translate(x, y);

  fill(0);

  box(10, 10, 10+lfo1);

  pop(); 
}

}

}

//help apply matrix to this

uniform vec2 iResolution;
uniform float uTime;
uniform float lfo1;
uniform float lfo2;
uniform mat4 mMatrix;

mat2 rot2D(float angle) {
float s = sin(angle);
float c = cos(angle);
return mat2(c, -s, s, c);
}

float sdBox(vec3 p, vec3 b) {
vec3 boxp = vec3 (3.0, 0.0, 10.0);
vec3 d = abs((p)-boxp) - b;
return length(max(d, 0.0)) + min(max(d.x, max(d.y, d.z)), 0.0);
}

float map(vec3 p) {
float m = 10.0;

for (float x = -15.0; x <= 15.0; x += 1.5) {
for (float y = -15.0; y <= 15.0; y +=1.5) {
vec3 boxPos = vec3(float(x), float(y), 1.0);
float d = sdBox(p - boxPos, vec3(0.5));

        m = min(m, d);  
    }
}

return m;

}

out vec4 fragColor;

void main() {
vec2 uv = (gl_FragCoord.xy * 2.0 - iResolution) / iResolution.y;

vec3 ro = vec3(0.0, 0.0, -3.0); 
vec3 rd = normalize(vec3(uv, 1.0)); 
vec3 col = vec3(0);

float t = 0.0; 


for (int i = 0; i < 80; i++) {
    vec3 p = ro + rd * t;
    float d = map(p);  

    t += d;  

    if (d < 0.001 || t > 100.0) break; 
}

col = vec3(t * 0.025); 

fragColor = vec4(col, 1.0);

}

// my attempts
//mat4 * box sdf
uniform vec2 iResolution;
uniform float uTime;
uniform float lfo1;
uniform float lfo2;
uniform mat4 mMatrix;

float sdBox(vec3 p, vec3 b) {
vec3 boxp = vec3(0.0, 0.0, 10.0);
vec3 d = abs(p - boxp) - b;
return length(max(d, 0.0)) + min(max(d.x, max(d.y, d.z)), 0.0);
}

float map(vec3 p) {
float m = 10.0;

for (float x = -15.0; x <= 15.0; x += 0.5) {
    for (float y = -15.0; y <= 15.0; y += 0.5) {
        
        vec3 boxPos = vec3(float(x), float(y), 1.0); 

        
        boxPos = (mMatrix * vec4(boxPos, 1.0)).xyz;
        
        float d = sdBox(p - boxPos, vec3(0.5));  
        m = min(m, d);  
    }
}

return m;

}

out vec4 fragColor;

void main() {
vec2 uv = (gl_FragCoord.xy * 2.0 - iResolution) / iResolution.y;

vec3 ro = vec3(0.0, 0.0, -3.0);
vec3 rd = normalize(vec3(uv, 1.0)); 

vec3 col = vec3(0);

float t = 0.0; 

for (int i = 0; i < 80; i++) {
    vec3 p = ro + rd * t;
    float d = map(p);  

    t += d;  

    if (d < 0.001 || t > 100.0) break; 
}

col = vec3(t * 0.025); 

fragColor = vec4(col, 1.0);

}

//mat4 * box pos

uniform vec2 iResolution;
uniform float uTime;
uniform float lfo1;
uniform float lfo2;
uniform mat4 mMatrix;

mat2 rot2D(float angle) {
float s = sin(angle);
float c = cos(angle);
return mat2(c, -s, s, c);
}

float sdBox(vec3 p, vec3 b) {
vec3 boxp = vec3(0.0, 0.0, 0.0);

vec4 transformedBoxPos = mMatrix * vec4(boxp, 1.0);
boxp = transformedBoxPos.xyz;

vec3 d = abs(p - boxp) - b;
return length(max(d, 0.0)) + min(max(d.x, max(d.y, d.z)), 0.0);

}

float map(vec3 p) {
float m = 10.0;

for (float x = -15.0; x <= 15.0; x += 0.5) {
    for (float y = -15.0; y <= 15.0; y += 0.5) {

        vec3 boxPos = vec3(float(x), float(y), 1.0);
     
        float d = sdBox(p - boxPos, vec3(0.5));
        m = min(m, d);
    }
}

return m;

}

out vec4 fragColor;

void main() {
vec2 uv = (gl_FragCoord.xy * 2.0 - iResolution) / iResolution.y;

vec3 ro = vec3(0.0, 0.0, -3.0); 
vec3 rd = normalize(vec3(uv, 1.0)); 
vec3 col = vec3(0);

float t = 0.0;

for (int i = 0; i < 80; i++) {
    vec3 p = ro + rd * t;
    float d = map(p);

    t += d;

    if (d < 0.001 || t > 100.0) break;
}

col = vec3(t * 0.025);

fragColor = vec4(col, 1.0);

}

2

Hi there,

You’re almost there :). You’re multiplying the 4x4 matrix with boxPos right before you evaluate the distance to a box (sdBox). This will result in transforming the space in which the box is located. For example, if boxPos is (0,0,1) and you use a matrix to rotate it by 90 degrees over the y-axis, the box’s position would suddenly be located at (1,0,0).
I think what you’re trying to achieve is to rotate the box at its position (so the box stays at (0,0,1), but rotate the box itself). This is done by first subtracting the boxPos from ‘p’ before transforming the vector: (mMatrix*vec4(p-boxPos,1)).xyz

I’ve made a little example (see tox) that does this for 1 box. To create multiple boxes, there are some tricks to avoid having ‘for’ loops to loop through all the boxes (which becomes quite heavy since it’s done for every raymarch step). To do this more efficiently you can ‘loop space’. See the amazing article from Inigo Quilez distfunctions, and check the function opLimitedRepetition(). It might give some raymarching side effects though since it’s not a perfect distance field. See sdf repetition for a more detailed explanation of this technique.

Hope this helps.
Cheers,
Tim

RaymarchMatrixTransform.tox (1.5 KB)

3

Hey thanks so much for the help this was super helpful information i will check out the loop spacing and distfunctions / limited repitition i checked out your example and what im actually trying to do using my current glsl raymarching loop which ill have to adjust ofc w this new info is add the 4x4 matrix with only the 0.05 / small value in the z axis translation if glsls matrix is the same ill check out that object chop too im super beginner so i was orignally using a table dat w 4 rols/cols since all my values are fixed too

applyMatrix(
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.005,
0.0, 0.0, 0.0, 1.0
);
and im not sure whether im applying to my whole coordinate system or not considering p5js + webgl drawing / render pipeline and as its before the push translate and pop / for loop but it seems to have the effect of a cummulative almost translation in the z axis through the boxes being drawn on the grid i adjusted this p5js editor code to help you see what im talking about just replace the html with this other html for the 3d cam i added for you to be able to scroll zoom /pan.

this and its html below

function setup() {
createCanvas(600, 600, WEBGL);
// Initialize Dw.EasyCam
cam = new Dw.EasyCam(this._renderer, { distance: 1200, center: [0, 0, 0] });
}

function draw() {
background(0);
strokeWeight(1.5);
stroke(255);

//comment out full apply matrix function to see original grid w regular zoffset addition without matrix effects

   applyMatrix(
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0, 0.0,
0.0, 0.0, 1.0, 0.005,
0.0, 0.0, 0.0, 1.0

);

// increase/ decrease lfo1 value to see results
lfo1 =54;//cos(frameCount0.05);
for (let x = -300; x <= 300; x += 10) {
for (let y = -300; y <= 300; y += 10) {
push();
translate(x, y);

  fill(0);

// replace 10+ lfo1 with 10+ a number value to see regular z increase
  
  box(10, 10, 10+lfo1);

  pop(); 
}

}

}

// html -

but as you see this mat4 seems to be a translation in the z i guess which accumulates causing the z axis increase in the grid of boxes dimensions that ends up looking like a flat top and bottom square shaped pyramid or more simply a box with angled sides due to the z axis accumulation of the matrix and maybe also the webgl perspective

4

sorry html here -

7

heres the html sorry had to add it to a file for some reason for here Untitled document (2).zip (22.3 KB)