Add example with Orthographic rendering

examples/example_orthographic/cache/packagejson.hash

@@ -0,0 +1 @@
+@types/react-reconciler:0.28.0@wonderlandengine/api:^1.1.0@wonderlandengine/components:^1.1.5@wonderlandengine/prettier-config:^1.0.0@wonderlandengine/react-ui:file:../../packages/react-uigl-matrix:^3.4.3@wonderlandengine/cli:^0.1.4

examples/example_orthographic/js/index.js

@@ -0,0 +1,96 @@
+/**
+ * /!\ This file is auto-generated.
+ *
+ * This is the entry point of your standalone application.
+ *
+ * There are multiple tags used by the editor to inject code automatically:
+ *     - `wle:auto-imports:start` and `wle:auto-imports:end`: The list of import statements
+ *     - `wle:auto-register:start` and `wle:auto-register:end`: The list of component to register
+ *     - `wle:auto-constants:start` and `wle:auto-constants:end`: The project's constants,
+ *        such as the project's name, whether it should use the physx runtime, etc...
+ *     - `wle:auto-benchmark:start` and `wle:auto-benchmark:end`: Append the benchmarking code
+ */
+
+/* wle:auto-imports:start */
+import {Cursor} from '@wonderlandengine/components';
+import {MouseLookComponent} from '@wonderlandengine/components';
+import {OrbitalCamera} from '@wonderlandengine/components';
+import {WasdControlsComponent} from '@wonderlandengine/components';
+import {ReactUi} from './react-ui.tsx';
+/* wle:auto-imports:end */
+
+import { loadRuntime } from '@wonderlandengine/api';
+import * as API from '@wonderlandengine/api'; // Deprecated: Backward compatibility.
+
+/* wle:auto-constants:start */
+const Constants = {
+    ProjectName: 'ReactUi_example_orthographic',
+    RuntimeBaseName: 'WonderlandRuntime',
+    WebXRRequiredFeatures: ['local',],
+    WebXROptionalFeatures: ['local','hand-tracking','hit-test',],
+};
+const RuntimeOptions = {
+    physx: false,
+    loader: false,
+    xrFramebufferScaleFactor: 1,
+    xrOfferSession: {
+        mode: 'auto',
+        features: Constants.WebXRRequiredFeatures,
+        optionalFeatures: Constants.WebXROptionalFeatures,
+    },
+    canvas: 'canvas',
+};
+/* wle:auto-constants:end */
+
+const engine = await loadRuntime(Constants.RuntimeBaseName, RuntimeOptions);
+Object.assign(engine, API); // Deprecated: Backward compatibility.
+window.WL = engine; // Deprecated: Backward compatibility.
+
+engine.onSceneLoaded.once(() => {
+    const el = document.getElementById('version');
+    if (el) setTimeout(() => el.remove(), 2000);
+});
+
+/* WebXR setup. */
+
+function requestSession(mode) {
+    engine
+        .requestXRSession(mode, Constants.WebXRRequiredFeatures, Constants.WebXROptionalFeatures)
+        .catch((e) => console.error(e));
+}
+
+function setupButtonsXR() {
+    /* Setup AR / VR buttons */
+    const arButton = document.getElementById('ar-button');
+    if (arButton) {
+        arButton.dataset.supported = engine.arSupported;
+        arButton.addEventListener('click', () => requestSession('immersive-ar'));
+    }
+    const vrButton = document.getElementById('vr-button');
+    if (vrButton) {
+        vrButton.dataset.supported = engine.vrSupported;
+        vrButton.addEventListener('click', () => requestSession('immersive-vr'));
+    }
+}
+
+if (document.readyState === 'loading') {
+    window.addEventListener('load', setupButtonsXR);
+} else {
+    setupButtonsXR();
+}
+
+/* wle:auto-register:start */
+engine.registerComponent(Cursor);
+engine.registerComponent(MouseLookComponent);
+engine.registerComponent(OrbitalCamera);
+engine.registerComponent(WasdControlsComponent);
+engine.registerComponent(ReactUi);
+/* wle:auto-register:end */
+
+engine.scene.load(`${Constants.ProjectName}.bin`).catch((e) => {
+    console.error(e);
+    window.alert(`Failed to load ${Constants.ProjectName}.bin:`, e);
+});
+
+/* wle:auto-benchmark:start */
+/* wle:auto-benchmark:end */

examples/example_orthographic/js/react-ui.tsx

@@ -0,0 +1,176 @@
+import {Texture} from '@wonderlandengine/api';
+import {property} from '@wonderlandengine/api/decorators.js';
+
+import {Align, FlexDirection, Justify, ReactUiBase} from '@wonderlandengine/react-ui';
+import {
+    Column,
+    Panel,
+    Text,
+    Button,
+    Row,
+    ProgressBar,
+    MaterialContext,
+    ThemeContext,
+    Image,
+    Panel9Slice,
+} from '@wonderlandengine/react-ui/components';
+import React, {useEffect, useState} from 'react';
+
+const App = (props: {comp: ReactUi}) => {
+    const comp = props.comp;
+
+    const [list, setList] = useState(['Element 0', 'Element 1']);
+
+    const addListElement = () => {
+        const newList = list.slice();
+        newList.push('Element ' + list.length.toString());
+        setList(newList);
+    };
+
+    const removeListElement = (i: number) => {
+        const newList = list.slice();
+        newList.splice(i, 1);
+        setList(newList);
+    };
+
+    const [text, setText] = useState(
+        'This is a 9-slice. It is a texture that can be stretched and scaled without losing quality. It is used for UI elements like panels and buttons.'
+    );
+
+    const theme = {
+        colors: {
+            background: comp.panelSecondary,
+
+            primary: comp.panelSecondary,
+            primaryActive: comp.panelSecondaryActive,
+            primaryHovered: comp.panelSecondaryHovered,
+
+            borderPrimary: 0,
+            borderPrimaryActive: 0,
+            borderPrimaryHovered: 0xffffffff,
+            text: comp.textColor,
+        },
+    };
+
+    return (
+        <MaterialContext.Provider value={props.comp}>
+            <ThemeContext.Provider value={theme}>
+                <Panel
+                    margin={100}
+                    material={props.comp.panelMaterial}
+                    rounding={100}
+                    resolution={10}
+                    borderSize={2}
+                    width={450}
+                    height={900}
+                >
+                    <Column padding="8%" width="100%" rowGap={20} height="100%">
+                        <ProgressBar
+                            bgColor={props.comp.panelSecondaryHovered}
+                            fgColor={props.comp.panelSecondary}
+                            value={list.length / 10}
+                            height={50}
+                            rounding={10}
+                            width="100%"
+                        />
+                        <Button
+                            onClick={addListElement}
+                            backgroundColor={props.comp.panelSecondary}
+                            hovered={{
+                                backgroundColor: props.comp.panelSecondaryHovered,
+                                borderSize: 1,
+                            }}
+                            active={{
+                                backgroundColor: props.comp.panelSecondaryActive,
+                            }}
+                            padding={20}
+                        >
+                            <Text fontSize={24}>Add Item</Text>
+                        </Button>
+                        {list.map((label, i) => (
+                            <Row
+                                key={i}
+                                width="100%"
+                                height={40}
+                                columnGap={20}
+                                justifyContent={Justify.SpaceBetween}
+                            >
+                                <Text fontSize={20}>{label}</Text>
+                                <Button
+                                    width={100}
+                                    height="100%"
+                                    rounding={10}
+                                    onClick={(e) => removeListElement(i)}
+                                    backgroundColor={props.comp.panelSecondary}
+                                    hovered={{
+                                        backgroundColor: props.comp.panelSecondaryHovered,
+                                    }}
+                                    active={{
+                                        backgroundColor: props.comp.panelSecondaryActive,
+                                    }}
+                                    justifyContent={Justify.Center}
+                                >
+                                    <Text textAlign="center" fontSize={16}>
+                                        Remove
+                                    </Text>
+                                </Button>
+                            </Row>
+                        ))}
+                        <Image
+                            src="Orange-grumpy-cat-.jpg"
+                            width="100%"
+                            height={300}
+                            borderSize={2}
+                        />
+                        <Panel9Slice
+                            flexGrow={1}
+                            texture={props.comp.nineSliceTexture}
+                            borderSize={30}
+                            padding={30}
+                            borderTextureSize={0.4}
+                            justifyContent={Justify.FlexStart}
+                            flex={FlexDirection.Column}
+                            gap={20}
+                        >
+                            <Text
+                                color="#000"
+                                textAlign="center"
+                                fontSize={18}
+                                textWrap="soft"
+                            >
+                                {text}
+                            </Text>
+                        </Panel9Slice>
+                    </Column>
+                </Panel>
+            </ThemeContext.Provider>
+        </MaterialContext.Provider>
+    );
+};
+
+/**
+ * react-ui
+ */
+export class ReactUi extends ReactUiBase {
+    static TypeName = 'react-ui';
+    static InheritProperties = true;
+
+    @property.color(1, 1, 1, 1)
+    textColor!: Float32Array;
+
+    @property.color(1, 1, 1, 1)
+    panelSecondary!: Float32Array;
+
+    @property.color(1, 1, 1, 1)
+    panelSecondaryHovered!: Float32Array;
+
+    @property.color(1, 1, 1, 1)
+    panelSecondaryActive!: Float32Array;
+
+    @property.texture()
+    nineSliceTexture!: Texture;
+
+    render() {
+        return <App comp={this} />;
+    }
+}