Skip to content

Commit

Permalink
api adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
Raanan Weber committed Oct 8, 2021
1 parent b52fd49 commit cfe623c
Show file tree
Hide file tree
Showing 9 changed files with 109 additions and 79 deletions.
4 changes: 2 additions & 2 deletions Viewer/src/managers/sceneManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { Scalar } from 'babylonjs/Maths/math.scalar';
import { SpotLight } from 'babylonjs/Lights/spotLight';
import { PointLight } from 'babylonjs/Lights/pointLight';
import { AbstractMesh } from 'babylonjs/Meshes/abstractMesh';
import { Mesh } from 'babylonjs/Meshes/mesh';
import { CreatePlane } from "babylonjs/Meshes/Builders/planeBuilder";
import { Tags } from 'babylonjs/Misc/tags';
import { Behavior } from 'babylonjs/Behaviors/behavior';
import { FramingBehavior } from 'babylonjs/Behaviors/Cameras/framingBehavior';
Expand Down Expand Up @@ -1372,7 +1372,7 @@ export class SceneManager {

if (!this._shadowGroundPlane) {
if (shadowGenerator.useBlurCloseExponentialShadowMap) {
let shadowGroundPlane = Mesh.CreatePlane("shadowGroundPlane", 100, this.scene, false);
let shadowGroundPlane = CreatePlane("shadowGroundPlane", { size: 100 }, this.scene);
shadowGroundPlane.useVertexColors = false;
//material isn't ever used in rendering, just used to set back face culling
shadowGroundPlane.material = new PBRMaterial('shadowGroundPlaneMaterial', this.scene);
Expand Down
43 changes: 22 additions & 21 deletions Viewer/tests/validation/validation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Math.random = function () {
seed %= maximum;

return seed / maximum;
}
};

function compare(renderData, referenceCanvas) {
var width = referenceCanvas.width;
Expand All @@ -34,9 +34,11 @@ function compare(renderData, referenceCanvas) {

var differencesCount = 0;
for (var index = 0; index < size; index += 4) {
if (Math.abs(renderData[index] - referenceData.data[index]) < threshold &&
if (
Math.abs(renderData[index] - referenceData.data[index]) < threshold &&
Math.abs(renderData[index + 1] - referenceData.data[index + 1]) < threshold &&
Math.abs(renderData[index + 2] - referenceData.data[index + 2]) < threshold) {
Math.abs(renderData[index + 2] - referenceData.data[index + 2]) < threshold
) {
continue;
}

Expand Down Expand Up @@ -88,10 +90,10 @@ async function getRenderData(canvas, engine) {
function saveRenderImage(data, canvas) {
var width = canvas.width;
var height = canvas.height;
var screenshotCanvas = document.createElement('canvas');
var screenshotCanvas = document.createElement("canvas");
screenshotCanvas.width = width;
screenshotCanvas.height = height;
var context = screenshotCanvas.getContext('2d');
var context = screenshotCanvas.getContext("2d");

var imageData = context.createImageData(width, height);
var castData = imageData.data;
Expand All @@ -102,7 +104,6 @@ function saveRenderImage(data, canvas) {
}

function downloadDataUrlFromJavascript(filename, dataUrl) {

// Construct the 'a' element
var link = document.createElement("a");
link.download = filename;
Expand All @@ -129,20 +130,19 @@ async function evaluate(test, resultCanvas, result, renderImage, index, waitRing
result.classList.add("failed");
result.innerHTML = "×";
testRes = false;
console.log('%c failed (gl error: ' + err + ')', 'color: red');
console.log("%c failed (gl error: " + err + ")", "color: red");
} else {

// Visual check
if (!test.onlyVisual) {
if (compare(renderData, resultCanvas)) {
result.classList.add("failed");
result.innerHTML = "×";
testRes = false;
console.log('%c failed', 'color: red');
console.log("%c failed", "color: red");
} else {
result.innerHTML = "✔";
testRes = true;
console.log('%c validated', 'color: green');
console.log("%c validated", "color: green");
}
}
}
Expand All @@ -162,7 +162,6 @@ function runTest(index, done) {
done(false);
}


var test = Object.assign({}, config.tests[index]);

var container = document.createElement("div");
Expand Down Expand Up @@ -201,7 +200,7 @@ function runTest(index, done) {
resultCanvas.width = img.width;
resultCanvas.height = img.height;
resultContext.drawImage(img, 0, 0);
}
};

img.src = "/tests/validation/ReferenceImages/" + test.referenceImage;

Expand Down Expand Up @@ -231,7 +230,7 @@ function runTest(index, done) {
if (!test.enableEnvironment) {
configuration.environmentMap = false;
} else {
console.log(configuration.environmentMap)
console.log(configuration.environmentMap);
}

//model config
Expand All @@ -246,18 +245,21 @@ function runTest(index, done) {
setTimeout(() => {
currentViewer = null;
currentScene = null;
viewerElement.innerHTML = '';
viewerElement.innerHTML = "";
currentViewer = new BabylonViewer.DefaultViewer(viewerElement, configuration);

currentViewer.onInitDoneObservable.add(() => {

var currentFrame = 0;
var waitForFrame = test.waitForFrame || 0;

currentViewer.onModelLoadedObservable.add((model) => {
console.log("model loaded");
currentViewer.onFrameRenderedObservable.add(() => {
console.log("frame rendered", currentFrame, model.meshes.every(m => m.isReady()));
console.log(
"frame rendered",
currentFrame,
model.meshes.every((m) => m.isReady())
);
if (test.animationTest && !currentFrame) {
model.playAnimation(model.getAnimationNames()[0]);
}
Expand All @@ -283,7 +285,7 @@ function runTest(index, done) {
function prepareMeshForViewer(viewer, configuration, test) {
let meshModel = new BabylonViewer.ViewerModel(viewer, configuration.model || {});

let sphereMesh = BABYLON.Mesh.CreateSphere('sphere-' + test.title, 20, 1.0, viewer.sceneManager.scene);
let sphereMesh = BABYLON.MeshBuilder.CreateSphere("sphere-" + test.title, { segments: 20, diameter: 1.0 }, viewer.sceneManager.scene);
if (test.createMaterial) {
let material = new BABYLON.PBRMaterial("sphereMat", viewer.sceneManager.scene);
sphereMesh.material = material;
Expand All @@ -306,13 +308,13 @@ function init() {
BABYLON.DracoCompression.Configuration.decoder = {
wasmUrl: GetAbsoluteUrl("../../dist/preview%20release/draco_wasm_wrapper_gltf.js"),
wasmBinaryUrl: GetAbsoluteUrl("../../dist/preview%20release/draco_decoder_gltf.wasm"),
fallbackUrl: GetAbsoluteUrl("../../dist/preview%20release/draco_decoder_gltf.js")
fallbackUrl: GetAbsoluteUrl("../../dist/preview%20release/draco_decoder_gltf.js"),
};
BABYLON.MeshoptCompression.Configuration.decoder = {
url: GetAbsoluteUrl("../../dist/preview%20release/meshopt_decoder.js")
url: GetAbsoluteUrl("../../dist/preview%20release/meshopt_decoder.js"),
};
BABYLON.GLTFValidation.Configuration = {
url: GetAbsoluteUrl("../../dist/preview%20release/gltf_validator.js")
url: GetAbsoluteUrl("../../dist/preview%20release/gltf_validator.js"),
};
BABYLON.KhronosTextureContainer2.URLConfig = {
jsDecoderModule: GetAbsoluteUrl("../../dist/preview%20release/babylon.ktx2Decoder.js"),
Expand Down Expand Up @@ -344,4 +346,3 @@ function init() {
}

init();

20 changes: 15 additions & 5 deletions materialsLibrary/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,10 +132,14 @@
ground.scaling = new BABYLON.Vector3(0.1, 0.1, 0.1);
ground.setEnabled(false);

var knot = BABYLON.Mesh.CreateTorusKnot("knot", 10, 3, 128, 64, 2, 3, scene);
var knot = BABYLON.MeshBuilder.CreateTorusKnot("knot", {
radius: 10, tube: 3, radialSegments: 128, tubularSegments: 64, p: 2, q: 3
}, scene);
knot.setEnabled(false);

var heightMap = BABYLON.Mesh.CreateGroundFromHeightMap("heightMap", "/Playground/textures/heightMap.png", 100, 100, 100, 0, 10, scene, false);
var heightMap = BABYLON.MeshBuilder.CreateGroundFromHeightMap("heightMap", "/Playground/textures/heightMap.png", {
width: 100, height: 100, subdivisions: 100, minHeight: 0, maxHeight: 10
}, scene, false);
heightMap.setEnabled(false);

// Skybox
Expand All @@ -161,15 +165,21 @@
scene.beginAnimation(skeletons[0], 0, 100, true, 0.8);

// Shadow caster
var shadowCaster = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);
var shadowCaster = BABYLON.MeshBuilder.CreateTorus("torus", {
diameter: 4, thickness: 2, tessellation: 30
}, scene, false);
shadowCaster.setEnabled(false);
shadowCaster.position = new BABYLON.Vector3(0, 30, 0);

var shadowCaster2 = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);
var shadowCaster2 = BABYLON.MeshBuilder.CreateTorus("torus", {
diameter: 4, thickness: 2, tessellation: 30
}, scene, false);
shadowCaster2.setEnabled(false);
shadowCaster2.position = new BABYLON.Vector3(0, -30, 0);

var shadowCaster3 = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);
var shadowCaster3 = BABYLON.MeshBuilder.CreateTorus("torus", {
diameter: 4, thickness: 2, tessellation: 30
}, scene, false);
shadowCaster3.setEnabled(false);
shadowCaster3.position = new BABYLON.Vector3(20, 20, 10);

Expand Down
4 changes: 3 additions & 1 deletion materialsLibrary/test/addbackground.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ window.prepareBackgroundMaterial = function() {
backgroundSkybox.material = backSky;
backgroundSkybox.setEnabled(false);

var mirrorMesh = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);
var mirrorMesh = BABYLON.MeshBuilder.CreateTorus("torus", {
diameter: 4, thickness: 2, tessellation: 30
}, scene, false);
mirrorMesh.setEnabled(false);
mirrorMesh.position = new BABYLON.Vector3(0, 3, 0);
mirrorMesh.material = new BABYLON.StandardMaterial("", scene);
Expand Down
6 changes: 4 additions & 2 deletions nodeEditor/src/components/preview/previewManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { Nullable } from "babylonjs/types";
import { Observer } from "babylonjs/Misc/observable";
import { Engine } from "babylonjs/Engines/engine";
import { Scene } from "babylonjs/scene";
import { Mesh } from "babylonjs/Meshes/mesh";
import { Vector3 } from "babylonjs/Maths/math.vector";
import { HemisphericLight } from "babylonjs/Lights/hemisphericLight";
import { ArcRotateCamera } from "babylonjs/Cameras/arcRotateCamera";
Expand Down Expand Up @@ -35,6 +34,7 @@ import { DataStorage } from "babylonjs/Misc/dataStorage";
import { NodeMaterialBlock } from "babylonjs/Materials/Node/nodeMaterialBlock";
import { CreateGround } from "babylonjs/Meshes/Builders/groundBuilder";
import { CreateSphere } from "babylonjs/Meshes/Builders/sphereBuilder";
import { CreateTorus } from "babylonjs/Meshes/Builders/torusBuilder";

export class PreviewManager {
private _nodeMaterial: NodeMaterial;
Expand Down Expand Up @@ -295,7 +295,9 @@ export class PreviewManager {
this._meshes.push(CreateSphere("dummy-sphere", { segments: 32, diameter: 2 }, this._scene));
break;
case PreviewType.Torus:
this._meshes.push(Mesh.CreateTorus("dummy-torus", 2, 0.5, 32, this._scene));
this._meshes.push(CreateTorus("dummy-torus", {
diamter: 2, thickness: 0.5, tessellation: 32
}, this._scene));
break;
case PreviewType.Cylinder:
SceneLoader.AppendAsync("https://models.babylonjs.com/", "roundedCylinder.glb", this._scene).then(() => {
Expand Down
16 changes: 12 additions & 4 deletions proceduralTexturesLibrary/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,9 @@
ground.scaling = new BABYLON.Vector3(0.1, 0.1, 0.1);
ground.setEnabled(false);

var knot = BABYLON.Mesh.CreateTorusKnot("knot", 10, 3, 128, 64, 2, 3, scene);
var knot = BABYLON.MeshBuilder.CreateTorusKnot("knot", {
radius: 10, tube: 3, radialSegments: 128, tubularSegments: 64, p: 2, q: 3
}, scene);
knot.setEnabled(false);

// Skybox
Expand All @@ -109,15 +111,21 @@
scene.beginAnimation(skeletons[0], 0, 100, true, 0.8);

// Shadow caster
var shadowCaster = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);
var shadowCaster = BABYLON.MeshBuilder.CreateTorus("torus", {
diameter: 4, thickness: 2, tessellation: 30
}, scene, false);
shadowCaster.setEnabled(false);
shadowCaster.position = new BABYLON.Vector3(0, 30, 0);

var shadowCaster2 = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);
var shadowCaster2 = BABYLON.MeshBuilder.CreateTorus("torus", {
diameter: 4, thickness: 2, tessellation: 30
}, scene, false);
shadowCaster2.setEnabled(false);
shadowCaster2.position = new BABYLON.Vector3(0, -30, 0);

var shadowCaster3 = BABYLON.Mesh.CreateTorus("torus", 4, 2, 30, scene, false);
var shadowCaster3 = BABYLON.MeshBuilder.CreateTorus("torus", {
diameter: 4, thickness: 2, tessellation: 30
}, scene, false);
shadowCaster3.setEnabled(false);
shadowCaster3.position = new BABYLON.Vector3(20, 20, 10);

Expand Down
59 changes: 33 additions & 26 deletions sandbox/src/components/renderingZone.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { Tools } from "babylonjs/Misc/tools";
import { FilesInput } from "babylonjs/Misc/filesInput";
import { Animation } from "babylonjs/Animations/animation";
import { PBRBaseMaterial, PBRMaterial, StringTools, Texture } from "babylonjs";
import { Mesh } from "babylonjs/Meshes/mesh";
import { CreatePlane } from "babylonjs/Meshes/Builders/planeBuilder";

require("../scss/renderingZone.scss");

Expand Down Expand Up @@ -64,9 +64,10 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {
"pipeline-statistics-query",
"depth-clamping",
"depth24unorm-stencil8",
"depth32float-stencil8"
]
}});
"depth32float-stencil8",
],
},
});
await (this._engine as WebGPUEngine).initAsync();
} else {
this._engine = new Engine(this._canvas, true, { premultipliedAlpha: false, preserveDrawingBuffer: true });
Expand Down Expand Up @@ -276,26 +277,34 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {

loadTextureAsset(url: string): Scene {
const scene = new Scene(this._engine);
const plane = Mesh.CreatePlane("plane", 1, scene);

const texture = new Texture(url, scene, undefined, undefined, Texture.NEAREST_LINEAR, () => {
const size = texture.getBaseSize();
if (size.width > size.height) {
plane.scaling.y = size.height / size.width;
} else {
plane.scaling.x = size.width / size.height;
}
const plane = CreatePlane("plane", { size: 1 }, scene);

const texture = new Texture(
url,
scene,
undefined,
undefined,
Texture.NEAREST_LINEAR,
() => {
const size = texture.getBaseSize();
if (size.width > size.height) {
plane.scaling.y = size.height / size.width;
} else {
plane.scaling.x = size.width / size.height;
}

texture.gammaSpace = true;
texture.hasAlpha = true;
texture.wrapU = Texture.CLAMP_ADDRESSMODE;
texture.wrapV = Texture.CLAMP_ADDRESSMODE;
texture.gammaSpace = true;
texture.hasAlpha = true;
texture.wrapU = Texture.CLAMP_ADDRESSMODE;
texture.wrapV = Texture.CLAMP_ADDRESSMODE;

scene.debugLayer.show();
scene.debugLayer.select(texture, "PREVIEW");
}, (message, exception) => {
this.props.globalState.onError.notifyObservers({ scene: scene, message: message || exception.message || "Failed to load texture" });
});
scene.debugLayer.show();
scene.debugLayer.select(texture, "PREVIEW");
},
(message, exception) => {
this.props.globalState.onError.notifyObservers({ scene: scene, message: message || exception.message || "Failed to load texture" });
}
);

const material = new PBRMaterial("unlit", scene);
material.unlit = true;
Expand All @@ -313,9 +322,7 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {

this._engine.clearInternalTexturesCache();

const promise = isTextureAsset(assetUrl)
? Promise.resolve(this.loadTextureAsset(assetUrl))
: SceneLoader.LoadAsync(rootUrl, fileName, this._engine);
const promise = isTextureAsset(assetUrl) ? Promise.resolve(this.loadTextureAsset(assetUrl)) : SceneLoader.LoadAsync(rootUrl, fileName, this._engine);

promise
.then((scene) => {
Expand Down Expand Up @@ -365,7 +372,7 @@ export class RenderingZone extends React.Component<IRenderingZoneProps> {

loader.validate = true;

loader.onExtensionLoadedObservable.add((extension: import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension) => {
loader.onExtensionLoadedObservable.add((extension: import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension) => {
this.props.globalState.glTFLoaderExtensions[extension.name] = extension;
});

Expand Down
Loading

0 comments on commit cfe623c

Please sign in to comment.