added gradients and background image

Author: matas-bitbybit-dev

packages/dev/babylonjs/lib/api/bitbybit/babylon/scene.ts

@@ -1,4 +1,3 @@
-
 import { Context } from "../../context";
 import * as BABYLON from "@babylonjs/core";
 import * as GUI from "@babylonjs/gui";
@@ -32,16 +31,6 @@ export class BabylonScene {
         return this.context.scene = inputs.scene;
     }
 
-    /**
-     * Changes the scene background colour for 3D space
-     * @param inputs Describes the colour of the scene background
-     * @group environment
-     * @shortname colour
-     */
-    backgroundColour(inputs: Inputs.BabylonScene.SceneBackgroundColourDto): void {
-        this.context.scene.clearColor = BABYLON.Color4.FromColor3(BABYLON.Color3.FromHexString(inputs.colour));
-    }
-
     /**
      * Activate camera by overwriting currently active camera
      * @param inputs Activates the camera
@@ -447,6 +436,161 @@ export class BabylonScene {
         this.context.scene.enablePhysics(new BABYLON.Vector3(inputs.vector[0], inputs.vector[1], inputs.vector[2]), this.context.havokPlugin);
     }
 
+    /**
+     * Changes the scene background to a css background image for 3D space
+     * @param inputs Describes the css of the scene background or image
+     * @group background
+     * @shortname css background image
+     */
+    canvasCSSBackgroundImage(inputs: Inputs.BabylonScene.SceneCanvasCSSBackgroundImageDto): { backgroundImage: string } {
+        this.context.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
+        const canvas = this.context.scene.getEngine().getRenderingCanvas();
+        const styleObject = { backgroundImage: inputs.cssBackgroundImage };
+        if (canvas) {
+            canvas.style.backgroundImage = inputs.cssBackgroundImage;
+        }
+        return styleObject;
+    }
+
+    /**
+     * Creates a two-color linear gradient background for 3D space
+     * @param inputs Describes the two-color linear gradient parameters
+     * @group background
+     * @shortname two color linear gradient
+     */
+    twoColorLinearGradient(inputs: Inputs.BabylonScene.SceneTwoColorLinearGradientDto): { backgroundImage: string } {
+        this.context.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
+        const canvas = this.context.scene.getEngine().getRenderingCanvas();
+        const gradient = `linear-gradient(${inputs.direction}, ${inputs.colorFrom} ${inputs.stopFrom}%, ${inputs.colorTo} ${inputs.stopTo}%)`;
+        const styleObject = { backgroundImage: gradient };
+        if (canvas) {
+            canvas.style.backgroundImage = gradient;
+        }
+        return styleObject;
+    }
+
+    /**
+     * Creates a two-color radial gradient background for 3D space
+     * @param inputs Describes the two-color radial gradient parameters
+     * @group background
+     * @shortname two color radial gradient
+     */
+    twoColorRadialGradient(inputs: Inputs.BabylonScene.SceneTwoColorRadialGradientDto): { backgroundImage: string } {
+        this.context.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
+        const canvas = this.context.scene.getEngine().getRenderingCanvas();
+        const gradient = `radial-gradient(${inputs.shape} at ${inputs.position}, ${inputs.colorFrom} ${inputs.stopFrom}%, ${inputs.colorTo} ${inputs.stopTo}%)`;
+        const styleObject = { backgroundImage: gradient };
+        if (canvas) {
+            canvas.style.backgroundImage = gradient;
+        }
+        return styleObject;
+    }
+
+    /**
+     * Creates a multi-color linear gradient background for 3D space
+     * @param inputs Describes the multi-color linear gradient parameters
+     * @group background
+     * @shortname multi color linear gradient
+     */
+    multiColorLinearGradient(inputs: Inputs.BabylonScene.SceneMultiColorLinearGradientDto): { backgroundImage: string } | { error: string } {
+        this.context.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
+        const canvas = this.context.scene.getEngine().getRenderingCanvas();
+        if (inputs.colors.length !== inputs.stops.length) {
+            const errorObj = { error: "Colors and stops arrays must have the same length" };
+            console.warn(errorObj.error);
+            return errorObj;
+        }
+        const colorStops = inputs.colors.map((color, index) => `${color} ${inputs.stops[index]}%`).join(", ");
+        const gradient = `linear-gradient(${inputs.direction}, ${colorStops})`;
+        const styleObject = { backgroundImage: gradient };
+        if (canvas) {
+            canvas.style.backgroundImage = gradient;
+        }
+        return styleObject;
+    }
+
+    /**
+     * Creates a multi-color radial gradient background for 3D space
+     * @param inputs Describes the multi-color radial gradient parameters
+     * @group background
+     * @shortname multi color radial gradient
+     */
+    multiColorRadialGradient(inputs: Inputs.BabylonScene.SceneMultiColorRadialGradientDto): { backgroundImage: string } | { error: string } {
+        this.context.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
+        const canvas = this.context.scene.getEngine().getRenderingCanvas();
+        if (inputs.colors.length !== inputs.stops.length) {
+            const errorObj = { error: "Colors and stops arrays must have the same length" };
+            console.warn(errorObj.error);
+            return errorObj;
+        }
+        const colorStops = inputs.colors.map((color, index) => `${color} ${inputs.stops[index]}%`).join(", ");
+        const gradient = `radial-gradient(${inputs.shape} at ${inputs.position}, ${colorStops})`;
+        const styleObject = { backgroundImage: gradient };
+        if (canvas) {
+            canvas.style.backgroundImage = gradient;
+        }
+        return styleObject;
+    }
+
+    /**
+     * Sets a background image with various customization options for 3D space
+     * @param inputs Describes the background image parameters
+     * @group background
+     * @shortname background image
+     */
+    canvasBackgroundImage(inputs: Inputs.BabylonScene.SceneCanvasBackgroundImageDto): {
+        backgroundImage: string;
+        backgroundRepeat: string;
+        backgroundSize: string;
+        backgroundPosition: string;
+        backgroundAttachment: string;
+        backgroundOrigin: string;
+        backgroundClip: string;
+    } {
+        this.context.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
+        const canvas = this.context.scene.getEngine().getRenderingCanvas();
+        const styleObject = {
+            backgroundImage: `url(${inputs.imageUrl})`,
+            backgroundRepeat: inputs.repeat,
+            backgroundSize: inputs.size,
+            backgroundPosition: inputs.position,
+            backgroundAttachment: inputs.attachment,
+            backgroundOrigin: inputs.origin,
+            backgroundClip: inputs.clip
+        };
+        if (canvas) {
+            canvas.style.backgroundImage = styleObject.backgroundImage;
+            canvas.style.backgroundRepeat = styleObject.backgroundRepeat;
+            canvas.style.backgroundSize = styleObject.backgroundSize;
+            canvas.style.backgroundPosition = styleObject.backgroundPosition;
+            canvas.style.backgroundAttachment = styleObject.backgroundAttachment;
+            canvas.style.backgroundOrigin = styleObject.backgroundOrigin;
+            canvas.style.backgroundClip = styleObject.backgroundClip;
+        }
+        return styleObject;
+    }
+
+    /**
+     * Changes the scene background colour for 3D space
+     * @param inputs Describes the colour of the scene background
+     * @group background
+     * @shortname colour
+     */
+    backgroundColour(inputs: Inputs.BabylonScene.SceneBackgroundColourDto): void {
+        this.context.scene.clearColor = BABYLON.Color4.FromColor3(BABYLON.Color3.FromHexString(inputs.colour));
+        const canvas = this.context.scene.getEngine().getRenderingCanvas();
+        if (canvas) {
+            // Reset all background properties to ensure no conflicts with gradients/images
+            canvas.style.backgroundImage = "none";
+            canvas.style.backgroundRepeat = "repeat";
+            canvas.style.backgroundSize = "auto";
+            canvas.style.backgroundPosition = "0% 0%";
+            canvas.style.backgroundAttachment = "scroll";
+            canvas.style.backgroundOrigin = "padding-box";
+            canvas.style.backgroundClip = "border-box";
+        }
+    }
+
     private getRadians(degrees: number): number {
         let angle = BABYLON.Angle.FromDegrees(degrees).radians();
         if (degrees < 0) {

packages/dev/babylonjs/lib/api/inputs/base-inputs.ts

@@ -12,6 +12,66 @@ export namespace Base {
         exponentialSquared = "exponentialSquared",
         linear = "linear",
     }
+    export enum gradientDirectionEnum {
+        toTop = "to top",
+        toTopRight = "to top right",
+        toRight = "to right",
+        toBottomRight = "to bottom right",
+        toBottom = "to bottom",
+        toBottomLeft = "to bottom left",
+        toLeft = "to left",
+        toTopLeft = "to top left",
+        deg0 = "0deg",
+        deg45 = "45deg",
+        deg90 = "90deg",
+        deg135 = "135deg",
+        deg180 = "180deg",
+        deg225 = "225deg",
+        deg270 = "270deg",
+        deg315 = "315deg",
+    }
+    export enum gradientPositionEnum {
+        center = "center",
+        top = "top",
+        topLeft = "top left",
+        topRight = "top right",
+        bottom = "bottom",
+        bottomLeft = "bottom left",
+        bottomRight = "bottom right",
+        left = "left",
+        right = "right",
+        centerTop = "50% 0%",
+        centerBottom = "50% 100%",
+        leftCenter = "0% 50%",
+        rightCenter = "100% 50%",
+    }
+    export enum gradientShapeEnum {
+        circle = "circle",
+        ellipse = "ellipse",
+    }
+    export enum backgroundRepeatEnum {
+        repeat = "repeat",
+        repeatX = "repeat-x",
+        repeatY = "repeat-y",
+        noRepeat = "no-repeat",
+        space = "space",
+        round = "round",
+    }
+    export enum backgroundSizeEnum {
+        auto = "auto",
+        cover = "cover",
+        contain = "contain",
+    }
+    export enum backgroundAttachmentEnum {
+        scroll = "scroll",
+        fixed = "fixed",
+        local = "local",
+    }
+    export enum backgroundOriginClipEnum {
+        paddingBox = "padding-box",
+        borderBox = "border-box",
+        contentBox = "content-box",
+    }
     // Can't use BabylonJS types here as that crashes worker, which tries to include them
     export type Color = string;
     export type ColorRGB = { r: number, g: number, b: number };