Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

website: Add hello gltf example #2192

Open
wants to merge 9 commits into
base: 9.0-release
Choose a base branch
from
Open

website: Add hello gltf example #2192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2e730fa
Add hello gltf example
felixpalmer Aug 20, 2024
70b5113
Missing mdx file
felixpalmer Aug 20, 2024
e3d17e2
Merge branch '9.0-release' into felix/hello-gltf-example
felixpalmer Aug 20, 2024
7916560
Create model picker in JS
felixpalmer Aug 20, 2024
43b48c1
Clean
felixpalmer Aug 20, 2024
ed2b9c3
Merge branch '9.0-release' into felix/hello-gltf-example
felixpalmer Aug 20, 2024
5a392cf
Fix sidebar
felixpalmer Aug 20, 2024
2bdd0e7
Tidy
felixpalmer Aug 20, 2024
f03f940
yarn update
felixpalmer Aug 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 33 additions & 6 deletions examples/tutorials/hello-gltf/app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,8 @@ export default class AppAnimationLoopTemplate extends AnimationLoopTemplate {
constructor({device}: AnimationProps) {
super();
this.device = device;
this.addModels();
this.loadGLTF('Avocado');
const modelSelector = document.getElementById('model-select');

modelSelector.addEventListener('change', e => {
this.loadGLTF((e.target as HTMLSelectElement).value);
});
}

onFinalize() {
Expand Down Expand Up @@ -74,6 +70,38 @@ export default class AppAnimationLoopTemplate extends AnimationLoopTemplate {
renderPass.end();
}

addModels() {
const container = document.getElementsByClassName('container')[0] || document.body;
const modelSelector = document.createElement('select');
modelSelector.style.position = 'relative';
modelSelector.style.top = '-40px';
modelSelector.style.left = '8px';

container.appendChild(modelSelector);

// Some test models from https://github.khronos.org/glTF-Sample-Viewer-Release
const models = [
'Avocado',
'BoomBox',
'Corset',
'DamagedHelmet',
'FlightHelmet',
'GlassBrokenWindow',
'StainedGlassLamp',
'WaterBottle'
];
for (const model of models) {
const el2 = document.createElement('option');
el2.value = model;
el2.innerHTML = model;
modelSelector.appendChild(el2);
}

modelSelector.addEventListener('change', e => {
this.loadGLTF((e.target as HTMLSelectElement).value);
});
}

async loadGLTF(modelName: string) {
const canvas = this.device.canvasContext.canvas as HTMLCanvasElement;
canvas.style.opacity = '0.1';
Expand Down Expand Up @@ -111,7 +139,6 @@ const lightSources: LightingProps = {
type: 'ambient'
},
directionalLights: [
// @ts-expect-error Remove once npm package updated with new types
{
color: [222, 244, 255],
direction: [1, -0.5, 0.5],
Expand Down
11 changes: 0 additions & 11 deletions examples/tutorials/hello-gltf/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,4 @@
makeAnimationLoop(AnimationLoopTemplate, {device}).start();
</script>
<body>
<!-- Some test models from https://github.khronos.org/glTF-Sample-Viewer-Release -->
<select id="model-select">
<option value="Avocado">Avocado</option>
<option value="BoomBox">BoomBox</option>
<option value="Corset">Corset</option>
<option value="DamagedHelmet">DamagedHelmet</option>
<option value="FlightHelmet">FlightHelmet</option>
<option value="GlassBrokenWindow">GlassBrokenWindow</option>
<option value="StainedGlassLamp">StainedGlassLamp</option>
<option value="WaterBottle">WaterBottle</option>
</select>
</body>
7 changes: 7 additions & 0 deletions website/content/examples/tutorials/hello-gltf.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import {DeviceTabs} from '@site/src/react-luma';
import {HelloGltfExample} from '@site';

# Hello Gltf

<DeviceTabs />
<HelloGltfExample />
1 change: 1 addition & 0 deletions website/content/sidebar-examples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const sidebars = {
'tutorials/hello-cube',
'tutorials/lighting',
'tutorials/hello-instancing',
'tutorials/hello-gltf',
'tutorials/shader-modules',
'tutorials/shader-hooks'
]
Expand Down
3 changes: 1 addition & 2 deletions website/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
export {
HelloTriangleExample,
HelloCubeExample,
HelloGltfExample,
LightingExample,
HelloInstancingExample,
InstancedTransformExample,
Expand All @@ -13,11 +14,9 @@ export {
// GeospatialExample
InstancingExample,
PersistenceExample,

AnimationExample,
CubemapExample,
Texture3DExample,

HelloTriangleWebGPUExample,
InstancedCubesWebGPUExample,
RotatingCubeWebGPUExample,
Expand Down
12 changes: 6 additions & 6 deletions website/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@
"@algolia/autocomplete-js": "^1.8.3",
"@docusaurus/core": "^3.1.1",
"@docusaurus/preset-classic": "^3.1.1",
"@luma.gl/constants": "^9.0.0",
"@luma.gl/core": "^9.0.0",
"@luma.gl/engine": "^9.0.0",
"@luma.gl/shadertools": "^9.0.0",
"@luma.gl/webgl": "^9.0.0",
"@luma.gl/webgpu": "^9.0.0",
"@luma.gl/constants": "^9.0.24",
"@luma.gl/core": "^9.0.24",
"@luma.gl/engine": "^9.0.24",
"@luma.gl/shadertools": "^9.0.24",
"@luma.gl/webgl": "^9.0.24",
"@luma.gl/webgpu": "^9.0.24",
"@mdx-js/react": "^3.0.0",
"clsx": "^1.1.1",
"react": "^18.2.0",
Expand Down
10 changes: 10 additions & 0 deletions website/src/examples/templates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import PersistenceApp from '../../../examples/showcase/persistence/app';
// import WanderingApp from '../../../examples/showcase/wandering/app';

import HelloCubeApp from '../../../examples/tutorials/hello-cube/app';
import HelloGltfApp from '../../../examples/tutorials/hello-gltf/app';
import HelloInstancingApp from '../../../examples/tutorials/hello-instancing/app';
import HelloTriangleApp from '../../../examples/tutorials/hello-triangle/app';
import LightingApp from '../../../examples/tutorials/lighting/app';
Expand Down Expand Up @@ -128,6 +129,15 @@ export const HelloCubeExample: React.FC = () => (
/>
);

export const HelloGltfExample: React.FC = () => (
<LumaExample
id="hello-gltf"
directory="tutorials"
template={HelloGltfApp}
config={exampleConfig}
/>
);

export const HelloInstancingExample: React.FC = () => (
<LumaExample
id="hello-instancing"
Expand Down
64 changes: 32 additions & 32 deletions website/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2505,74 +2505,74 @@ __metadata:
languageName: node
linkType: hard

"@luma.gl/constants@npm:9.0.17, @luma.gl/constants@npm:^9.0.0":
version: 9.0.17
resolution: "@luma.gl/constants@npm:9.0.17"
checksum: 10c0/f6378da632c244eab2b05c238a66fd06e39b4544492f372c69dc8dc33894723d6876009e2f24211bc0412ea130f5ba0aeb8f2236973f4116f9d92dad21af16cc
"@luma.gl/constants@npm:9.0.24, @luma.gl/constants@npm:^9.0.24":
version: 9.0.24
resolution: "@luma.gl/constants@npm:9.0.24"
checksum: 10c0/2c8e2f5a70319a37e76c8099adeb9ae13227e9fc5139118d18d6a57fe29ba88f69994f5d7e71743c3b5b717df520e7d699b054eb1b0f8e07b5f51707e674baad
languageName: node
linkType: hard

"@luma.gl/core@npm:^9.0.0":
version: 9.0.17
resolution: "@luma.gl/core@npm:9.0.17"
"@luma.gl/core@npm:^9.0.24":
version: 9.0.24
resolution: "@luma.gl/core@npm:9.0.24"
dependencies:
"@math.gl/types": "npm:^4.0.0"
"@probe.gl/env": "npm:^4.0.2"
"@probe.gl/log": "npm:^4.0.2"
"@probe.gl/stats": "npm:^4.0.2"
"@types/offscreencanvas": "npm:^2019.6.4"
checksum: 10c0/7cd862cddcf9c365705539c9295dc5f713fafe4c7205be739ce75641d551da5420ddf010654ea1e469ad213d219dda733464bdbbba431d00e011ff3ac484da26
checksum: 10c0/c51502d8cc5ea4e5cba12887ee898c7492b9b6bff9cd1224c30b6ebadd3c3e2b270f3754b106dc644aaa149cf1f1b61ceaddabe45db7ee753985326e955b57b2
languageName: node
linkType: hard

"@luma.gl/engine@npm:^9.0.0":
version: 9.0.17
resolution: "@luma.gl/engine@npm:9.0.17"
"@luma.gl/engine@npm:^9.0.24":
version: 9.0.24
resolution: "@luma.gl/engine@npm:9.0.24"
dependencies:
"@luma.gl/shadertools": "npm:9.0.17"
"@luma.gl/shadertools": "npm:9.0.24"
"@math.gl/core": "npm:^4.0.0"
"@probe.gl/log": "npm:^4.0.2"
"@probe.gl/stats": "npm:^4.0.2"
peerDependencies:
"@luma.gl/core": ^9.0.0
checksum: 10c0/eaacb410562b9ec46944486d9a1ce9d1bff37f295fcdee120524830772255b86ebc1473555d452703111c7d1feddfcc506927595f27bf612c62ed601f7fc12ba
checksum: 10c0/89b263139384637dabf94d9b6a2e7c2e14bb55a980b8ebfe23c1e68d46ef5214c2d2cc78de7ead0b5bc70d73306c36b67a4064104b897cc642ce292715d95d20
languageName: node
linkType: hard

"@luma.gl/shadertools@npm:9.0.17, @luma.gl/shadertools@npm:^9.0.0":
version: 9.0.17
resolution: "@luma.gl/shadertools@npm:9.0.17"
"@luma.gl/shadertools@npm:9.0.24, @luma.gl/shadertools@npm:^9.0.24":
version: 9.0.24
resolution: "@luma.gl/shadertools@npm:9.0.24"
dependencies:
"@math.gl/core": "npm:^4.0.0"
"@math.gl/types": "npm:^4.0.0"
wgsl_reflect: "npm:^1.0.1"
peerDependencies:
"@luma.gl/core": ^9.0.0
checksum: 10c0/35f10a1871490ef24e3f83199b8c74e129c6e43f8c5d370ab42ab12393097e7336eda1cb8260ff2ac6ed194e69da51d66d10364cfdca1323c630a38142987cb1
checksum: 10c0/cf25387ac72d6680c8e84d7760dde2ea2aebede03bf66860e7788182c65816a9a15899215e9baea79cfb08994fc9e1427114af4945326b71dc2949c77e2b3485
languageName: node
linkType: hard

"@luma.gl/webgl@npm:^9.0.0":
version: 9.0.17
resolution: "@luma.gl/webgl@npm:9.0.17"
"@luma.gl/webgl@npm:^9.0.24":
version: 9.0.24
resolution: "@luma.gl/webgl@npm:9.0.24"
dependencies:
"@luma.gl/constants": "npm:9.0.17"
"@luma.gl/constants": "npm:9.0.24"
"@probe.gl/env": "npm:^4.0.2"
peerDependencies:
"@luma.gl/core": ^9.0.0
checksum: 10c0/6db95f63de31e53e04afbeb90875852d66490ad2f6a822c4ba245f72573ac4281e6c62b880a0e3fa5aac98657b5bb3ad6f263de2f429c06cb4fd9c96c397e47d
checksum: 10c0/b882b867f24b89cf18860da35d3368d9c2c74df37661f6f94ff752b7a35f0319d8a941ebfa71956ce8b6c3e00f08c2f86391c3b209fb8f7c699237e65e70b205
languageName: node
linkType: hard

"@luma.gl/webgpu@npm:^9.0.0":
version: 9.0.17
resolution: "@luma.gl/webgpu@npm:9.0.17"
"@luma.gl/webgpu@npm:^9.0.24":
version: 9.0.24
resolution: "@luma.gl/webgpu@npm:9.0.24"
dependencies:
"@probe.gl/env": "npm:^4.0.2"
"@webgpu/types": "npm:^0.1.34"
peerDependencies:
"@luma.gl/core": ^9.0.0
checksum: 10c0/637c143ce8c5d569ccd897d40d130814a3610a08f0ca730d88714affa99232b8b7cc70c71a25980d5f4e95ad3fa6e5fc07eea4437071256b07a24c5cf932a724
checksum: 10c0/cbe1510d3df2b7026ff8681eec7d9562efd50c9a666a411985c84b38e42c5337c71dccf6913ad35e7cc1a85078f415eebbd31cd84c7a47f0e7b43fdf61cbeeea
languageName: node
linkType: hard

Expand Down Expand Up @@ -12855,12 +12855,12 @@ __metadata:
"@docusaurus/plugin-content-docs": "npm:^3.1.1"
"@docusaurus/preset-classic": "npm:^3.1.1"
"@docusaurus/tsconfig": "npm:^3.1.1"
"@luma.gl/constants": "npm:^9.0.0"
"@luma.gl/core": "npm:^9.0.0"
"@luma.gl/engine": "npm:^9.0.0"
"@luma.gl/shadertools": "npm:^9.0.0"
"@luma.gl/webgl": "npm:^9.0.0"
"@luma.gl/webgpu": "npm:^9.0.0"
"@luma.gl/constants": "npm:^9.0.24"
"@luma.gl/core": "npm:^9.0.24"
"@luma.gl/engine": "npm:^9.0.24"
"@luma.gl/shadertools": "npm:^9.0.24"
"@luma.gl/webgl": "npm:^9.0.24"
"@luma.gl/webgpu": "npm:^9.0.24"
"@mdx-js/react": "npm:^3.0.0"
babel-plugin-styled-components: "npm:^2.0.0"
clsx: "npm:^1.1.1"
Expand Down
Loading
Loading