Doodle 0.8.0 Supports 3D

3D Transforms

Views can now have full 3D transformations via their transform property. This works because AffineTransform has been updated to support scale, rotation, and translations that involve x, y and z axes. The result is that Views can now be placed in a full 3D space by simply giving them a transform that has been modified accordingly.

import io.nacular.doodle.drawing.AffineTransform.Companion.Identity
import io.nacular.measured.units.Angle.Companion.degrees

// Rotate this View around they y-axis (through its center) by 45°
view.transform *= Identity.rotateY(around = view.center, by = 45 * degrees)

Views can also now render in 3D, since Canvas also supports the new 3D transforms.

view {
    render = {
        transform(Identity.rotateY(by = 45 * degrees)) {
            // ...
        }
    }
}

3D Perspective

A realistic 3D space requires more than just affine transforms (which keep parallel lines parallel). Simulating this requires perspective transforms. Views now have a camera property, which gives them a perspective when combined with a 3D transform. The following allows the y-axis rotation to look more realistic.

import io.nacular.doodle.drawing.AffineTransform.Companion.Identity
import io.nacular.measured.units.Angle.Companion.degrees

// Rotate this View around they y-axis (through its center) by 45°
view.transform *= Identity.rotateY(around = view.center, by = 45 * degrees)

// Position the View's camera to apply some realistic perspective warping
view.camera = Camera(position = view.center, distance = 1000.0)

Canvas also takes a Camera in its transform method to enable perspective.

view {
    render = {
        transform(Identity.rotateY(by = 45 * degrees), camera = Camera(Origin, distance = 1000.0)) {
            // ...
        }
    }
}

Doodle is a pure Kotlin UI framework for the Web (and Desktop), that lets you create rich applications without relying on Javascript, HTML or CSS. Check out the documentation and tutorials to learn more.