forked from Orillusion/orillusion
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(GUI): add sample to show how to use UIPanel/Billboard/UIMaterial…
…, or change their properties. (Orillusion#206) Add samples about GPU GUI. render GUI box by GUIUtil, and modify docs. Improve the cloning function of components. Change UIPanel to extends UIImage.
- Loading branch information
Showing
55 changed files
with
601 additions
and
215 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| import { GUIHelp } from "@orillusion/debug/GUIHelp"; | ||
| import { createExampleScene, createSceneParam } from "@samples/utils/ExampleScene"; | ||
| import { Scene3D, PropertyAnimation, Engine3D, Object3D, Object3DUtil, PropertyAnimClip, WrapMode, WorldPanel, BillboardType, TextAnchor, UIImage, UIShadow, UITextField, Vector3, Color, Time } from "@orillusion/core"; | ||
| import { GUIUtil } from "@samples/utils/GUIUtil"; | ||
|
|
||
| class Sample_POI { | ||
| scene: Scene3D; | ||
| panel: WorldPanel; | ||
| position: Vector3; | ||
|
|
||
| async run() { | ||
| Engine3D.setting.shadow.autoUpdate = true; | ||
| Engine3D.setting.shadow.updateFrameRate = 1; | ||
| Engine3D.setting.shadow.shadowBound = 20; | ||
| Engine3D.setting.shadow.shadowBias = 0.0001; | ||
|
|
||
| await Engine3D.init({ renderLoop: () => { this.loop(); } }); | ||
| let param = createSceneParam(); | ||
| param.camera.distance = 16; | ||
| let exampleScene = createExampleScene(param); | ||
|
|
||
| GUIHelp.init(); | ||
|
|
||
| this.scene = exampleScene.scene; | ||
|
|
||
| Engine3D.startRenderView(exampleScene.view); | ||
|
|
||
| await this.initScene(); | ||
| this.initDuckPOI(); | ||
| this.initScenePOI(); | ||
| } | ||
|
|
||
| private modelContainer: Object3D; | ||
|
|
||
| async initScene() { | ||
| // floor | ||
| let floor: Object3D = Object3DUtil.GetSingleCube(16, 0.1, 16, 1, 1, 1); | ||
| this.scene.addChild(floor); | ||
| await Engine3D.res.loadFont('fnt/0.fnt'); | ||
|
|
||
| // load external model | ||
| let model = await Engine3D.res.loadGltf('PBR/Duck/Duck.gltf') as Object3D; | ||
| model.rotationY = 180; | ||
| this.modelContainer = new Object3D(); | ||
| this.modelContainer.addChild(model); | ||
| this.scene.addChild(this.modelContainer); | ||
| model.scaleX = model.scaleY = model.scaleZ = 0.01; | ||
| await this.initPropertyAnim(this.modelContainer); | ||
|
|
||
| let chair = await Engine3D.res.loadGltf('PBR/SheenChair/SheenChair.gltf') as Object3D; | ||
| chair.scaleX = chair.scaleY = chair.scaleZ = 8; | ||
| this.scene.addChild(chair); | ||
| } | ||
|
|
||
| private async initPropertyAnim(owner: Object3D) { | ||
| // add PropertyAnimation | ||
| let animation = owner.addComponent(PropertyAnimation); | ||
|
|
||
| //load a animation clip | ||
| let json: any = await Engine3D.res.loadJSON('json/anim_0.json'); | ||
| let animClip = new PropertyAnimClip(); | ||
| animClip.parse(json); | ||
| animClip.wrapMode = WrapMode.Loop; | ||
| animation.defaultClip = animClip.name; | ||
| animation.autoPlay = true; | ||
|
|
||
| // register clip to animation | ||
| animation.appendClip(animClip); | ||
| animation.play(animation.defaultClip); | ||
| return animation; | ||
| } | ||
|
|
||
| private initDuckPOI() { | ||
| let canvas = this.scene.view.enableUICanvas(); | ||
| //panel | ||
| this.panel = new Object3D().addComponent(WorldPanel); | ||
| this.panel.billboard = BillboardType.BillboardXYZ; | ||
| //add to canvas | ||
| canvas.addChild(this.panel.object3D); | ||
| this.panel.object3D.localScale = new Vector3(0.1, 0.1, 0.1); | ||
|
|
||
| //poi | ||
| let panelRoot = new Object3D(); | ||
|
|
||
| this.panel.object3D.addChild(panelRoot); | ||
|
|
||
| let image = panelRoot.addComponent(UIImage); | ||
| image.uiTransform.resize(32, 6); | ||
| image.uiTransform.setXY(20, 20); | ||
|
|
||
| image.color = new Color(1, 1, 1, 0.5); | ||
| image.isShadowless = true; | ||
| let text = panelRoot.addComponent(UITextField); | ||
|
|
||
| text.text = 'Happy Duck'; | ||
| text.fontSize = 4; | ||
| text.color = new Color(0, 0, 0, 1); | ||
| text.alignment = TextAnchor.MiddleCenter; | ||
| GUIUtil.renderUIPanel(this.panel, true); | ||
| } | ||
|
|
||
| private sceneText: UITextField; | ||
| private initScenePOI() { | ||
| let canvas = this.scene.view.enableUICanvas(); | ||
| //panel | ||
| let panel = new Object3D().addComponent(WorldPanel); | ||
| panel.cullMode = "none"; | ||
| //add to canvas | ||
| canvas.addChild(panel.object3D); | ||
| panel.object3D.localScale = new Vector3(0.1, 0.1, 0.1); | ||
|
|
||
| //poi | ||
| let panelRoot = new Object3D(); | ||
| panel.transform.rotationX = -30; | ||
| panel.transform.y = 3.1; | ||
| panel.transform.x = 1; | ||
|
|
||
| panel.object3D.addChild(panelRoot); | ||
| let text = panelRoot.addComponent(UITextField); | ||
| text.uiTransform.resize(80, 16); | ||
| text.text = this.title; | ||
| text.fontSize = 10; | ||
| text.color = new Color(0.5, 1.0, 0.5, 1.0); | ||
| text.alignment = TextAnchor.MiddleLeft; | ||
|
|
||
| panelRoot.addComponent(UIShadow).shadowOffset.multiplyScaler(0.2); | ||
| this.sceneText = text; | ||
| } | ||
|
|
||
| private charCount = 0; | ||
| private title: string = 'Hello, Orillusion'; | ||
| private lastTitle = this.title; | ||
| private loop(): void { | ||
| if (this.panel) { | ||
| this.position ||= new Vector3(); | ||
| this.position.copyFrom(this.modelContainer.transform.worldPosition); | ||
| this.panel.object3D.localPosition = this.position; | ||
| } | ||
| if (this.sceneText) { | ||
| let count = 1 + Math.floor(Time.frame * 0.1) % 30; | ||
| if (this.charCount != count) { | ||
| this.charCount = count; | ||
| let newTitle = this.title.slice(0, this.charCount); | ||
| if (newTitle != this.lastTitle) { | ||
| this.sceneText.text = newTitle; | ||
| this.lastTitle = newTitle; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| new Sample_POI().run(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import { createExampleScene } from "@samples/utils/ExampleScene"; | ||
| import { Engine3D, Object3DUtil, Object3D, UIImage, ImageType, Color, UIPanel, ViewPanel, Scene3D, Vector2, UITextField, UIShadow } from "@orillusion/core"; | ||
|
|
||
| class Sample_UIMultiCanvas { | ||
| async run() { | ||
| Engine3D.setting.shadow.autoUpdate = true; | ||
| Engine3D.setting.shadow.shadowBias = 0.002; | ||
|
|
||
| await Engine3D.init(); | ||
| await Engine3D.res.loadFont('fnt/0.fnt'); | ||
|
|
||
| let exampleScene = createExampleScene(); | ||
| Engine3D.startRenderView(exampleScene.view); | ||
|
|
||
| // create floor | ||
| let floor = Object3DUtil.GetSingleCube(100, 2, 50, 0.5, 0.5, 0.5); | ||
| exampleScene.scene.addChild(floor); | ||
| floor.y = -40; | ||
|
|
||
| let total: number = 4; | ||
| for (let i = 0; i < total; i++) { | ||
| let size: Vector2 = new Vector2(); | ||
| size.x = 500 - i * 100; | ||
| size.y = 400 - i * 100; | ||
| this.createPanel(exampleScene.scene, i, size); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| private createPanel(scene: Scene3D, index: number, size: Vector2): UIPanel { | ||
| let panelRoot: Object3D = new Object3D(); | ||
| // enable ui canvas at index | ||
| let canvas = scene.view.enableUICanvas(index); | ||
| let panel = panelRoot.addComponent(ViewPanel); | ||
| canvas.addChild(panel.object3D); | ||
| // create image | ||
| let obj3D = new Object3D(); | ||
| panelRoot.addChild(obj3D); | ||
| let image = obj3D.addComponent(UIImage); | ||
| image.isShadowless = true; | ||
| image.imageType = ImageType.Sliced; | ||
| image.uiTransform.resize(size.x, size.y); | ||
| image.color = Color.random(); | ||
|
|
||
| //text | ||
| let text = obj3D.addComponent(UITextField); | ||
| text.text = 'Canvas index: ' + index; | ||
| text.fontSize = 24; | ||
|
|
||
| //shadow | ||
| let shadow = obj3D.addComponent(UIShadow); | ||
| shadow.shadowOffset.multiplyScaler(0.4); | ||
| return panel; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| new Sample_UIMultiCanvas().run(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.