Camera2D on a renderTarget (mixing items affected and not affected by a camera on the same program)

OPENRNDR Tutorials
1

The camera examples found at orx/orx-camera at master · openrndr/orx · GitHub use extend(camera) which applies the camera to the whole window.

But what if you want to apply the camera transformation to a renderTarget? Maybe you want to have part of the window affected by the camera but draw other items unaffected by it.

The simple trick is not to call extend(camera) (which would transform everything) but to apply the camera transformation to the render target instead, before drawing anything into it.

RenderTargetCamera-2023-10-19-11.48.27

import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.draw.isolatedWithTarget
import org.openrndr.draw.renderTarget
import org.openrndr.extra.camera.Camera2D
import org.openrndr.shape.Rectangle

fun main() = application {
    program {
        // Create a renderTarget where to draw things. It will be controlled by the camera.
        val rt = renderTarget(290, 440) {
            colorBuffer()
            depthBuffer()
        }
        // Create camera
        val cam = Camera2D()

        // Add mouse listeners to the camera
        cam.setup(this)

        extend {
            // Draw onto the renderTarget
            drawer.isolatedWithTarget(rt) {
                // Calling ortho required if size differs from window size
                ortho(rt)
                // Apply camera transformation
                view = cam.view
                // PINK background
                clear(ColorRGBa.PINK)
                // Draw something
                rectangle(Rectangle.fromCenter(bounds.center, 200.0, 100.0))
            }

            // GRAY background for the window
            drawer.clear(ColorRGBa.GRAY)

            // Draw the renderTarget (with the camera previously applied to it) twice
            drawer.image(rt.colorBuffer(0), 20.0, 20.0)
            drawer.image(rt.colorBuffer(0), rt.width + 40.0, 20.0)

            // Draw things not affected by the camera
            drawer.circle(drawer.bounds.position(0.5, -0.5), 300.0)
        }
    }
}

I’ll add this or similar examples to orx-camera.

1 Like
2

I added a new demo with a few tweaks: