Perspective Wireframe Floor

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
User avatar
elbrunzy
Prole
Posts: 12
Joined: Sun May 03, 2015 5:29 am

Perspective Wireframe Floor

Post by elbrunzy »

Hello,

I'm trying to code something similar to that "space harrier" effect. Instead of the forward effect, I made a left-right palette animation using a shader. But for the drawing of the perspective matrix I would prefer not to use a shader for some control and preference, even if I know there is already some example ready. What I'm trying to achieve would look more like that. It seem to me there must be an code implementation of how to draw such graphic into a raster memory matrix. Image

I am open to any idea and interested in code snippet that would do a similar effect.

So far my code prototype use an Repeat until loop to increment Y (height) in a way that would give impression of perspective, being always one pixel greater every row repetition. For the X (width) I only draw block of pixel, I cycle initial palette color to give a small nice effect. A quick fix could be to draw larger X as much as they approach center and forget about diagonal. But there is still time to search before to start taking shortcut.

Code: Select all

    local imageData     = love.image.newImageData(320,110)
    local width, height = imageData:getDimensions()
    local xx  = 1
    local xxx  = 1
    local colorNext = 1
    local heightInc = 1
    local incPerspective = 0
    local heightInc = 0
    y = 1
    x = 1
    
    repeat
      heightInc = heightInc + 1 -- we change palette color each time row size change
      colorNext = heightInc 

      xx = 1 -- palette counter is always reset to 0 at each row
      for x = 1, width do -- width of the screen size object
        
        if xx >= 10 then -- we want to change pixel color only at 10th pixels so we can control column grid width
          xx = 1
          colorNext = colorNext + 1 
        end
        xx = xx + 1
        
        if colorNext >= PALwidth then colorNext = 1 end -- PALWidth = number of colors in the palette 
        
        for yy = y, y + incPerspective do -- we fill row of screen to give height perspective effect, this method will prolly become problematic when we draw vertical diagonal perspective
          if yy <= height then -- protection so we dont overflow beyond image height
            r,g,b,a = base_pal[colorNext] -- get color RGBA for palette animation
            imageData:setPixel(x-1, yy-1, r, g ,b, a) -- draw dat pixel
          end 
        end
      end
    incPerspective = incPerspective +1 -- increment perspective here so we draw more horizontal line 
    y = y + incPerspective -- skip to next row, this will also prolly have to change to work with vertical diagonal perspective

    until ( y >= height + incPerspective ) --obey
Image
[yes I'm aware is background from Stunt driving, only temporary placeholder while picture being draw]

Best regards :awesome:,
- elz
User avatar
UnixRoot
Citizen
Posts: 90
Joined: Mon Nov 08, 2021 8:10 am

Re: Perspective Wireframe Floor

Post by UnixRoot »

For perspective correct scaling, you need to calculate 1/z for every scan line.

It's almost for free, if you use the GPU and a small shader. You can still animate the texture by shifting the UV coordinates every frame and don't move the polygon at all.

viewtopic.php?t=92376
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Bing [Bot], Google [Bot] and 3 guests