Discuss Scratch

StarRayX
Scratcher
6 posts

Adding floor and roof textures when Ray Casting

Is there a way to add textures to the floor and roof of a ray-casted environment? I know it's possible to add textures to walls but how do I do it for the floor?
mr2meows
Scratcher
76 posts

Adding floor and roof textures when Ray Casting

you could use the backdrop
StarRayX
Scratcher
6 posts

Adding floor and roof textures when Ray Casting

mr2meows wrote:

you could use the backdrop
I know that but it acts more like a skybox rather than an actual roof, I'd like to put lights on the ceiling and tiles on the floor relative to the environment, so backdrops would really work.
mmhmBeans
Scratcher
500+ posts

Adding floor and roof textures when Ray Casting

For the ceiling lights, you should do a grid, such as on the floor of this project. I don't think there is any efficient way to texture the floor/ceiling. In my raycaster, I just put the lights on walls.
StarRayX
Scratcher
6 posts

Adding floor and roof textures when Ray Casting

mmhmBeans wrote:

For the ceiling lights, you should do a grid, such as on the floor of this project. I don't think there is any efficient way to texture the floor/ceiling. In my raycaster, I just put the lights on walls.
Do you know how I can add the grid effect to my raycasting project? I just followed griffpatch's tutorial
pkhead
Scratcher
1000+ posts

Adding floor and roof textures when Ray Casting

that'd probably require some complicated math.

i think essentially for each pixel, you make a ray based on the position of that pixel and calculate the distance it would take for the ray to reach the floor. i think the formula would be something like “Y distance from floor to camera divided by ray delta y” since the distance should become larger than smaller ray delta Y is. (0 = parallel to the floor)

and then you get the floor pixel the player is on (probably doesn't require fancy math, just use the player x and player y variables divided or multiplied by some constant) and then, based on the ray distance and player rotation, offset the position of that pixel on the texture. then draw this pixel on the texture on the screen.

if you want a less confusing explanation i can probably try drawing some visuals when i get home
StarRayX
Scratcher
6 posts

Adding floor and roof textures when Ray Casting

pkhead wrote:

that'd probably require some complicated math.

i think essentially for each pixel, you make a ray based on the position of that pixel and calculate the distance it would take for the ray to reach the floor. i think the formula would be something like “Y distance from floor to camera divided by ray delta y” since the distance should become larger than smaller ray delta Y is. (0 = parallel to the floor)

and then you get the floor pixel the player is on (probably doesn't require fancy math, just use the player x and player y variables divided or multiplied by some constant) and then, based on the ray distance and player rotation, offset the position of that pixel on the texture. then draw this pixel on the texture on the screen.

if you want a less confusing explanation i can probably try drawing some visuals when i get home
Please give me some visuals, I'm pretty new to all this lol, and if you could make a sample that'd be even better

Last edited by StarRayX (Feb. 17, 2023 21:56:54)

pkhead
Scratcher
1000+ posts

Adding floor and roof textures when Ray Casting

i made a proof of concept in p5.js here
(i made in p5.js and not scratch because p5.js runs faster. hopefully you can read javascript code)

this is a snippet of code which is involved in calculating which pixel to draw on screen, given a ray direction (ray dx, ray dy, ray dz), and the camera position (cam x, cam y, cam z)

X is left-right, Y is front-back, and Z is up-down.
ray dx is equal to the cosine of the camera angle. and ray dy is equal to the sine of the camera angle.
other than that, i will leave the calculation of the ray direction for each pixel up to you.

if <(ray dz) < [0]> then // if ray is pointing downward
set [ray dist v] to ((cam z) / (ray dz)) // calculate ray distance to floor plane (z=0)
set [ray floor x v] to (((ray dx) * (ray dist)) + (cam x)) // calculate intersection point between ray and floor plane
set [ray floor y v] to (((ray dy) * (ray dist)) + (cam y))
set [ray floor z v] to [0] // = ray dz * ray dist (since floor plane is at z=0)
set [tex u v] to ((ray floor x) mod (tex width)) // tex u and tex v are the texture coordinates
set [tex v v] to ((ray floor y) mod (tex height)) // using mod makes it repeat
draw pixel at (tex u) (tex v :: variables) from texture to current screen pixel :: custom
end
StarRayX
Scratcher
6 posts

Adding floor and roof textures when Ray Casting

pkhead wrote:

i made a proof of concept in p5.js here
(i made in p5.js and not scratch because p5.js runs faster. hopefully you can read javascript code)

this is a snippet of code which is involved in calculating which pixel to draw on screen, given a ray direction (ray dx, ray dy, ray dz), and the camera position (cam x, cam y, cam z)

X is left-right, Y is front-back, and Z is up-down.
ray dx is equal to the cosine of the camera angle. and ray dy is equal to the sine of the camera angle.
other than that, i will leave the calculation of the ray direction for each pixel up to you.

if <(ray dz) < [0]> then // if ray is pointing downward
set [ray dist v] to ((cam z) / (ray dz)) // calculate ray distance to floor plane (z=0)
set [ray floor x v] to (((ray dx) * (ray dist)) + (cam x)) // calculate intersection point between ray and floor plane
set [ray floor y v] to (((ray dy) * (ray dist)) + (cam y))
set [ray floor z v] to [0] // = ray dz * ray dist (since floor plane is at z=0)
set [tex u v] to ((ray floor x) mod (tex width)) // tex u and tex v are the texture coordinates
set [tex v v] to ((ray floor y) mod (tex height)) // using mod makes it repeat
draw pixel at (tex u) (tex v :: variables) from texture to current screen pixel :: custom
end

Oh I see it now, the only problem I have with my raycaster is that my rays are only cast from left to right, so I only have values for ray dx and dy. I'm not sure how to implement a third direction.
PutneyCat
Scratcher
500+ posts

Adding floor and roof textures when Ray Casting

If you start casting rays up/down as well as left/right you will get severe lag.

So better to stick to left-right.

If you have a list-based raycaster, you can can still create the grid effect shown in the cool project linked above in the post by @mmhmBeans, for floor or ceiling or both.

That's because a list-based raycaster uses a grid system. The ray travels in a straight line through the grid, checking whether each square is occupied or not. So the rays cast from left to right allow you to draw walls and also a floor/ceiling grid. If a square is filled: draw a wall and stop. If it is empty, put a small dot down as part of the gridlines, and continue.

But this won't work with a sprite-based raycaster, because that doesn't use a grid system. The sprite/ray just keeps going till it hits something.
StarRayX
Scratcher
6 posts

Adding floor and roof textures when Ray Casting

PutneyCat wrote:

If you start casting rays up/down as well as left/right you will get severe lag.

So better to stick to left-right.

If you have a list-based raycaster, you can can still create the grid effect shown in the cool project linked above in the post by @mmhmBeans, for floor or ceiling or both.

That's because a list-based raycaster uses a grid system. The ray travels in a straight line through the grid, checking whether each square is occupied or not. So the rays cast from left to right allow you to draw walls and also a floor/ceiling grid. If a square is filled: draw a wall and stop. If it is empty, put a small dot down as part of the gridlines, and continue.

But this won't work with a sprite-based raycaster, because that doesn't use a grid system. The sprite/ray just keeps going till it hits something.
Ah I see, I guess my project's better off not having anything in the floor and ceiling to prevent lag
Idaill_2
Scratcher
2 posts

Adding floor and roof textures when Ray Casting

For light, i know how to do it
Comm-
Scratcher
1 post

Adding floor and roof textures when Ray Casting

hi
Idaill_2
Scratcher
2 posts

Adding floor and roof textures when Ray Casting

hello
Pashes1
New Scratcher
14 posts

Adding floor and roof textures when Ray Casting

Weird one[.
quote=Idaill_2]hello
when I receive [talk v]
speak (talk)

forever
Jesus Loves you::#ddddff

Last edited by Pashes1 (May 2, 2024 16:07:05)

Pashes1
New Scratcher
14 posts

Adding floor and roof textures when Ray Casting

Is this a free chat?
play sound [gasp v] until done

Telling you. Yes or no, Show your opinions
answer [Type in the reply.]::#0000ff

Scratch Maker{
Entertainment
Fun
Info
}Pashes1

(ver.::#0000ff)

Last edited by Pashes1 (May 2, 2024 17:02:09)

Pashes1
New Scratcher
14 posts

Adding floor and roof textures when Ray Casting

Did you know that the Scratch blocks in forum are [Scratch 2.0 v] blocks.//Tip for you.
immememe
Scratcher
2 posts

Adding floor and roof textures when Ray Casting

i suppose you could just make it whatevet texture you want across the whole screen then just draw everything else on top (and make the texture move and stuff
N8_D_GR8_1
Scratcher
1000+ posts

Adding floor and roof textures when Ray Casting

immememe wrote:

i suppose you could just make it whatevet texture you want across the whole screen then just draw everything else on top (and make the texture move and stuff
This is an old topic. Please only answer newer questions. Thanks!

Powered by DjangoBB