-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(test): Add test(debug) environment
fix #5
- Loading branch information
1 parent
5689276
commit ab102f5
Showing
16 changed files
with
1,363 additions
and
68 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
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
Large diffs are not rendered by default.
Oops, something went wrong.
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,4 @@ | ||
| import '@babylonjs/core/Helpers/sceneHelpers'; | ||
| import '@babylonjs/core/Meshes/Builders/sphereBuilder'; | ||
| import '@babylonjs/core/Meshes/Builders/torusKnotBuilder'; | ||
| import '@babylonjs/inspector'; |
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,7 @@ | ||
| import { MToonMaterial } from '../index'; | ||
| /** | ||
| * MToonMaterial に Inspector 上で調整可能なパラメータを設定する | ||
| * @param material | ||
| * @link https://doc.babylonjs.com/how_to/debug_layer#extensibility | ||
| */ | ||
| export declare function addInspectableCustomProperties(material: MToonMaterial): void; |
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,140 @@ | ||
| import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera'; | ||
| import { Engine } from '@babylonjs/core/Engines/engine'; | ||
| import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight'; | ||
| import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight'; | ||
| import { PointLight } from '@babylonjs/core/Lights/pointLight'; | ||
| import { ShadowGenerator } from '@babylonjs/core/Lights/Shadows/shadowGenerator'; | ||
| import { Texture } from '@babylonjs/core/Materials/Textures/texture'; | ||
| import { Color3, Vector3 } from '@babylonjs/core/Maths/math'; | ||
| import { Mesh } from '@babylonjs/core/Meshes/mesh'; | ||
| import { Scene } from '@babylonjs/core/scene'; | ||
| import { MToonMaterial } from '../mtoon-material'; | ||
| import { addInspectableCustomProperties } from './inspectable-custom-properties'; | ||
|
|
||
| import '@babylonjs/core/Helpers/sceneHelpers'; | ||
| import '@babylonjs/core/Meshes/Builders/sphereBuilder'; | ||
| import '@babylonjs/core/Meshes/Builders/torusKnotBuilder'; | ||
| import '@babylonjs/inspector'; | ||
|
|
||
| async function main() { | ||
| const debugProperties = getDebugProperties(); | ||
| const canvas = document.getElementById('main-canvas') as HTMLCanvasElement; | ||
| const engine = new Engine( | ||
| canvas, | ||
| true, | ||
| { | ||
| alpha: false, | ||
| disableWebGL2Support: debugProperties.webgl1, | ||
| }, | ||
| ); | ||
|
|
||
| const scene = new Scene(engine); | ||
| const camera = new ArcRotateCamera('MainCamera1', 0, 0, 3, new Vector3(0, 1.2, 0), scene, true); | ||
| camera.lowerRadiusLimit = 0.1; | ||
| camera.upperRadiusLimit = 20; | ||
| camera.wheelDeltaPercentage = 0.01; | ||
| camera.attachControl(canvas); | ||
|
|
||
| scene.createDefaultEnvironment({ | ||
| createGround: true, | ||
| createSkybox: false, | ||
| enableGroundMirror: false, | ||
| enableGroundShadow: false, | ||
| }); | ||
|
|
||
| // Lights | ||
| const directionalLight = new DirectionalLight('DirectionalLight1', new Vector3(1, -0.5, 0.0), scene); | ||
| directionalLight.position = new Vector3(-50, 25, 0); | ||
| directionalLight.setEnabled(true); | ||
| const hemisphericLight = new HemisphericLight('HemisphericLight1', new Vector3(-0.2, -0.8, -1), scene); | ||
| hemisphericLight.setEnabled(false); | ||
| const pointLight = new PointLight('PointLight1', new Vector3(0, 0, 1), scene); | ||
| pointLight.setEnabled(false); | ||
|
|
||
| // Meshes | ||
| const standardMaterialSphere = Mesh.CreateSphere('StandardMaterialSphere1', 16, 1, scene); | ||
| standardMaterialSphere.position = new Vector3(1.2, 1.2, 0); | ||
| standardMaterialSphere.receiveShadows = true; | ||
|
|
||
| const shadowCaster = Mesh.CreateTorusKnot('ShadowCaster', 1, 0.2, 32, 32, 2, 3, scene); | ||
| shadowCaster.position = new Vector3(-10.0, 5.0, 0.0); | ||
| shadowCaster.setEnabled(debugProperties.shadow); | ||
| if (debugProperties.shadow) { | ||
| const shadowGenerator = new ShadowGenerator(1024, directionalLight); | ||
| shadowGenerator.addShadowCaster(shadowCaster); | ||
| } | ||
|
|
||
| const mtoonMaterials: MToonMaterial[] = []; | ||
| { | ||
| const mat = new MToonMaterial('MtoonMaterialDefault', scene); | ||
| mat.outlineWidthMode = 1; | ||
| mtoonMaterials.push(mat); | ||
| } | ||
| { | ||
| const mat = new MToonMaterial('MtoonMaterialNormal', scene); | ||
| mat.outlineWidthMode = 1; | ||
| // Textures from https://www.babylonjs-playground.com/#20OAV9#33 | ||
| const diffuse = new Texture('http://i.imgur.com/Wk1cGEq.png', scene); | ||
| diffuse.uScale = 4; | ||
| diffuse.vScale = 4; | ||
| mat.diffuseTexture = diffuse; | ||
| mat.shadeTexture = mat.diffuseTexture.clone(); | ||
| mat.shadeColor = new Color3(0.871, 0.196, 0.416); | ||
| const bump = new Texture('http://i.imgur.com/wGyk6os.png', scene); | ||
| bump.uScale = 4; | ||
| bump.vScale = 4; | ||
| mat.bumpTexture = bump; | ||
| mtoonMaterials.push(mat); | ||
| } | ||
| { | ||
| const mat = new MToonMaterial('MtoonMaterialTransparent', scene); | ||
| mat.outlineWidthMode = 1; | ||
| // Textures from https://www.babylonjs-playground.com/#YDO1F#18 | ||
| mat.diffuseTexture = new Texture('https://upload.wikimedia.org/wikipedia/commons/8/87/Alaskan_Malamute%2BBlank.png', scene); | ||
| mat.shadeTexture = mat.diffuseTexture.clone(); | ||
| mat.alphaBlend = true; | ||
| mtoonMaterials.push(mat); | ||
| } | ||
|
|
||
| mtoonMaterials.forEach((mat, index) => { | ||
| // MToonMaterial は glTF(右手座標) を考慮しているため、 CullMode をデフォルトから反転させる | ||
| mat.cullMode = 1; | ||
| mat.outlineCullMode = 2; | ||
| addInspectableCustomProperties(mat); | ||
| const sphere = Mesh.CreateSphere(`${mat.name}_Sphere`, 16, 1, scene); | ||
| sphere.position = new Vector3(-1.2 * index, 1.2, 0); | ||
| sphere.receiveShadows = true; | ||
| sphere.material = mat; | ||
| }); | ||
|
|
||
| await scene.debugLayer.show({ | ||
| globalRoot: document.getElementById('wrapper') as HTMLMainElement, | ||
| handleResize: true, | ||
| }); | ||
|
|
||
| engine.runRenderLoop(() => { | ||
| scene.render(); | ||
| shadowCaster.rotate(Vector3.Up(), 0.01); | ||
| }); | ||
| window.addEventListener('resize', () => { | ||
| engine.resize(); | ||
| }); | ||
| } | ||
|
|
||
| interface DebugProperties { | ||
| webgl1: boolean; | ||
| shadow: boolean; | ||
| } | ||
|
|
||
| function getDebugProperties(): DebugProperties { | ||
| const href = window.location.href; | ||
|
|
||
| return { | ||
| webgl1: href.includes('webgl1'), | ||
| shadow: href.includes('shadow'), | ||
| }; | ||
| } | ||
|
|
||
| main().catch((reason) => { | ||
| console.error(reason); | ||
| }); |
Oops, something went wrong.