UIShadow

UIShadow component can give the GUIRenderer component a shadow effect. If the same Object3D is registered with multiple rendering components GUIRenderer, such as UITextField and UIImage at the same time, each GUIRenderer needs to be added separately UIShadow component

import { Engine3D } from '@orillusion/core';

// Create a panel object for displaying UI
let panelRoot: Object3D = new Object3D();
panelRoot.addComponent(ViewPanel);
// Activate UICanvas
let canvas = this.scene.view.enableUICanvas();
// Add panel to system canvas
canvas.addChild(panelRoot);
// Create image node
let imageQuad = new Object3D();
panelRoot.addChild(imageQuad);
this.image = imageQuad.addComponent(UIImage);
this.image.uiTransform.resize(400, 60);
this.image.uiTransform.y = 100;
// Register shadow component
let shadow = panelRoot.addComponent(UIShadow);
shadow.quality = 1;// [0-4] 0: Cancel shadow, 1, single shadow, 2/3/4 multi shadow

shadowQuality

By setting shadowQuality, the projection quality can be adjusted. The higher the quality, the more system performance is consumed

0	1	2	3	4
no shadow	single shadow	double shadow	triple shadow	quadruple shadow

let shadow: UIShadow;
shadow.shadowQuality = 1;

shadowOffset

By setting shadowOffset, the offset of the shadow relative to the original rendering unit can be adjusted

let shadow: UIShadow;
shadow.shadowOffset = new Vector2(4.0, -4.0); // +x: right, +y: up

shadowRadius

By setting shadowRadius, the diffusion distance of each projection can be adjusted

let shadow: UIShadow;
shadow.shadowRadius = 2;

shadowColor

By setting shadowRadius, the color and transparency of the projection can be adjusted

let shadow: UIShadow;
shadow.shadowColor = new Color(0.1, 0.5, 0.0, 0.8);

isShadowless

When multiple GUIRenderer components are mounted on the same Object3D, you can manually shield the projection ability of the specified component by setting the isShadowless property of the component, and only keep the component you want to project:

// Create ui node
let root = new Object3D();
// Mount UIImage
let image = root.addComponent(UIImage);
// image will not produce shadows
image.isShadowless = true;
// Mount TextField
let textField = root.addComponent(UITextField);

// Mount projection component UIShadow
let shadow = root.addComponent(UIShadow);
// Set projection properties
shadow.shadowQuality = 1;
shadow.shadowColor = new Color(0.1, 0.5, 0.0, 0.8);
shadow.shadowOffset = new Vector2(4.0, -4.0);
shadow.shadowRadius = 4.0;

Because image shields the projection ability, UIShadow will only work on textField.

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, Scene3D, Object3D, Camera3D, View3D, ViewPanel, UIImage, HoverCameraController, Color, AtmosphericComponent, UIShadow, UITextField, TextAnchor, Vector2, Time } from '@orillusion/core';
import * as dat from 'dat.gui';

class Sample_button {
    async run() {
        // initializa engine
        await Engine3D.init();
        // create new scene as root node
        let scene3D: Scene3D = new Scene3D();
        scene3D.addComponent(AtmosphericComponent);
        // create camera
        let cameraObj: Object3D = new Object3D();
        let camera = cameraObj.addComponent(Camera3D);
        // adjust camera view
        camera.perspective(60, Engine3D.aspect, 1, 5000.0);
        // set camera controller
        let controller = cameraObj.addComponent(HoverCameraController);
        controller.setCamera(0, 0, 15);
        // add camera node
        scene3D.addChild(cameraObj);

        let view = new View3D();
        view.scene = scene3D;
        view.camera = camera;
        Engine3D.startRenderView(view);

        // create panel root
        let panelRoot: Object3D = new Object3D();
        panelRoot.addComponent(ViewPanel);

        let canvas = view.enableUICanvas();
        canvas.addChild(panelRoot);
        await Engine3D.res.loadFont('https://cdn.orillusion.com/fnt/0.fnt');

        // create image node
        let imageQuad = new Object3D();
        panelRoot.addChild(imageQuad);
        // create image component
        let image: UIImage = imageQuad.addComponent(UIImage);
        image.color = new Color(0.2, 0.2, 0.2, 0.5);
        image.isShadowless = true;
        // set image size
        image.uiTransform.resize(480, 120);

        let text = imageQuad.addComponent(UITextField);
        text.fontSize = 42;
        text.alignment = TextAnchor.MiddleCenter;
        text.color = new Color(0.8, 0.8, 0.8, 1.0);
        text.text = 'Orillusion';

        // add shadow
        let shadow = imageQuad.addComponent(UIShadow);
        let shadowColor = new Color(1.0, 0.5, 0.5, 0.8);
        shadow.shadowQuality = 4;
        shadow.shadowOffset = new Vector2(2, -2);
        shadow.shadowRadius = 2;

        let GUIHelp = new dat.GUI();
        let f = GUIHelp.addFolder('GUI Shadow');
        f.add(shadow, 'shadowQuality', 0, 4, 1);
        f.add(shadow, 'shadowRadius', 0, 10, 0.01);
        f.add(shadow.shadowOffset, 'x', -100, 100, 0.1).onChange(() => {
            shadow.shadowOffset = shadow.shadowOffset;
        });
        f.add(shadow.shadowOffset, 'y', -100, 100, 0.1).onChange(() => {
            shadow.shadowOffset = shadow.shadowOffset;
        });
        f.addColor({ color: Object.values(shadowColor).map((v) => v * 255) }, 'color').onChange((v) => {
            shadowColor.copyFromArray(v);
            shadow.shadowColor = shadowColor;
        });
        f.open();
    }
}

new Sample_button().run();