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.
fix: texture Count Exceeded the maximum limit of 7
- Loading branch information
Showing
13 changed files
with
262 additions
and
157 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,53 @@ | ||
| import { Engine3D, Scene3D, Object3D, Camera3D, View3D, UIImage, HoverCameraController, AtmosphericComponent, BitmapTexture2D, makeAloneSprite, WorldPanel, GPUCullMode, UIPanel, Color } from '@orillusion/core' | ||
|
|
||
| class Sample_UIMultipleTextures { | ||
| 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(15, 10, 80) | ||
| // 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() | ||
| let panel: UIPanel = panelRoot.addComponent(WorldPanel) | ||
| panel.cullMode = GPUCullMode.none; | ||
| panelRoot.localScale.set(0.1, 0.1, 0.1) | ||
| let canvas = view.enableUICanvas() | ||
| canvas.addChild(panelRoot) | ||
|
|
||
| for (let i = 0; i < 10; i++) { | ||
| let bitmapTexture2D = new BitmapTexture2D() | ||
| bitmapTexture2D.flipY = true | ||
| await bitmapTexture2D.load('textures/digit/digit_' + i + '.png') | ||
|
|
||
| // create image node | ||
| let imageQuad = new Object3D() | ||
| panelRoot.addChild(imageQuad) | ||
| // create image component | ||
| let image: UIImage = imageQuad.addComponent(UIImage) | ||
| // set image size | ||
| image.uiTransform.resize(10, 10) | ||
| image.uiTransform.setXY((i - 5) * 8, 0); | ||
| image.color = Color.random(); | ||
| // set image source | ||
| image.sprite = makeAloneSprite('webgpu' + i, bitmapTexture2D) | ||
| } | ||
|
|
||
| } | ||
| } | ||
|
|
||
| new Sample_UIMultipleTextures().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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,78 @@ | ||
| import { Sample_GraphicPath } from "./graphic/Sample_GraphicPath" | ||
| // import { Sample_GraphicPath } from "./graphic/Sample_GraphicPath" | ||
|
|
||
| // /******** Load all samples in /src/sample/ ********/ | ||
| // { | ||
| // // find all demos in /sample | ||
| // const modules = import.meta.glob(['./*/*.ts', '!./*/_*.ts']) | ||
| // // create menu | ||
| // let title = '', list = `<svg onclick="document.body.classList.remove('show')" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="close"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg>` | ||
| // for (const path in modules) { | ||
| // if (!path.includes('Sample_')) continue | ||
| // const arr = path.split('/') | ||
| // const _title = arr[1] | ||
| // const _demo = arr[2].replace(/Sample_|\.ts/g, '') | ||
| // if (_title != title) { | ||
| // list += `<p>${_title}</p>` | ||
| // title = _title | ||
| // } | ||
| // list += `<a id="${path}">${_demo}</a>` | ||
| // } | ||
| // const menu = document.createElement('div') | ||
| // menu.className = 'menu' | ||
| // menu.innerHTML = list | ||
| // document.body.appendChild(menu) | ||
| /******** Load all samples in /src/sample/ ********/ | ||
| { | ||
| // find all demos in /sample | ||
| const modules = import.meta.glob(['./*/*.ts', '!./*/_*.ts']) | ||
| // create menu | ||
| let title = '', list = `<svg onclick="document.body.classList.remove('show')" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="close"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg>` | ||
| for (const path in modules) { | ||
| if (!path.includes('Sample_')) continue | ||
| const arr = path.split('/') | ||
| const _title = arr[1] | ||
| const _demo = arr[2].replace(/Sample_|\.ts/g, '') | ||
| if (_title != title) { | ||
| list += `<p>${_title}</p>` | ||
| title = _title | ||
| } | ||
| list += `<a id="${path}">${_demo}</a>` | ||
| } | ||
| const menu = document.createElement('div') | ||
| menu.className = 'menu' | ||
| menu.innerHTML = list | ||
| document.body.appendChild(menu) | ||
|
|
||
|
|
||
| // // change sessionStorage.target on click, and reload iframe | ||
| // menu.addEventListener('click', (e: Event) => { | ||
| // const button = e.target as HTMLElement | ||
| // if (!button.id) | ||
| // return | ||
| // // remove prev iframe to clear memory | ||
| // document.querySelector('iframe')?.remove() | ||
| // const target = button.id | ||
| // if (target && modules[target]) { | ||
| // addIframe() | ||
| // document.querySelector('.active')?.classList.remove('active') | ||
| // button.classList.add('active') | ||
| // sessionStorage.top = menu.scrollTop | ||
| // sessionStorage.target = target | ||
| // } | ||
| // }) | ||
| // change sessionStorage.target on click, and reload iframe | ||
| menu.addEventListener('click', (e: Event) => { | ||
| const button = e.target as HTMLElement | ||
| if (!button.id) | ||
| return | ||
| // remove prev iframe to clear memory | ||
| document.querySelector('iframe')?.remove() | ||
| const target = button.id | ||
| if (target && modules[target]) { | ||
| addIframe() | ||
| document.querySelector('.active')?.classList.remove('active') | ||
| button.classList.add('active') | ||
| sessionStorage.top = menu.scrollTop | ||
| sessionStorage.target = target | ||
| } | ||
| }) | ||
|
|
||
| // // load target on refresh | ||
| // if (sessionStorage.target) { | ||
| // const target = sessionStorage.target | ||
| // const a = document.querySelector(`[id="${target}"]`) | ||
| // if (a) { | ||
| // addIframe() | ||
| // a.classList.add('active') | ||
| // menu.scrollTop = sessionStorage.top | ||
| // } | ||
| // } else { | ||
| // document.querySelector('a')?.click() | ||
| // } | ||
| // load target on refresh | ||
| if (sessionStorage.target) { | ||
| const target = sessionStorage.target | ||
| const a = document.querySelector(`[id="${target}"]`) | ||
| if (a) { | ||
| addIframe() | ||
| a.classList.add('active') | ||
| menu.scrollTop = sessionStorage.top | ||
| } | ||
| } else { | ||
| document.querySelector('a')?.click() | ||
| } | ||
|
|
||
| // // create an iframe inside page to load sample | ||
| // function addIframe() { | ||
| // const iframe = document.createElement('iframe') as HTMLIFrameElement | ||
| // iframe.srcdoc = ` | ||
| // <style>html,body{margin:0;padding:0;overflow:hidden}canvas{touch-action:none}</style> | ||
| // <script> | ||
| // let target = sessionStorage.target | ||
| // if(target) | ||
| // import('./samples/'+target).then(m=>{ | ||
| // for(let i in m){ | ||
| // new m[i]().run() | ||
| // break | ||
| // } | ||
| // }) | ||
| // </script>` | ||
| // document.body.appendChild(iframe) | ||
| // } | ||
| // } | ||
| // create an iframe inside page to load sample | ||
| function addIframe() { | ||
| const iframe = document.createElement('iframe') as HTMLIFrameElement | ||
| iframe.srcdoc = ` | ||
| <style>html,body{margin:0;padding:0;overflow:hidden}canvas{touch-action:none}</style> | ||
| <script> | ||
| let target = sessionStorage.target | ||
| if(target) | ||
| import('./samples/'+target).then(m=>{ | ||
| for(let i in m){ | ||
| new m[i]().run() | ||
| break | ||
| } | ||
| }) | ||
| </script>` | ||
| document.body.appendChild(iframe) | ||
| } | ||
| } | ||
|
|
||
| // import { Sample_GraphicMesh_Trailing } from "./graphic/Sample_GraphicMesh_Trailing"; | ||
| // new Sample_GraphicMesh_Trailing().run(); | ||
|
|
||
| new Sample_GraphicPath().run(); | ||
| // new Sample_GraphicPath().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
Oops, something went wrong.