Skip to content

Commit

Permalink
refactor: some samples
Browse files Browse the repository at this point in the history
  • Loading branch information
Yuki Shimada committed Aug 6, 2023
1 parent a954068 commit 70b8396
Show file tree
Hide file tree
Showing 4 changed files with 302 additions and 322 deletions.
162 changes: 80 additions & 82 deletions samples/test_e2e/GltfImporter-forward-render-pipeline/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,93 +5,91 @@ document.body.appendChild(p);

declare const window: any;

(async () => {
Rn.Config.isUboEnabled = false;
const canvas = document.getElementById('world') as HTMLCanvasElement;
await Rn.System.init({
approach: Rn.ProcessApproach.DataTexture,
canvas,
});

Rn.MeshRendererComponent.isDepthMaskTrueForTransparencies = true;

// create ForwardRenderPipeline
const forwardRenderPipeline = new Rn.ForwardRenderPipeline();
forwardRenderPipeline.setup(canvas.width, canvas.height);

// camera
const { cameraComponent, cameraEntity } = createCamera();

// gltf
const mainExpression = (
await Rn.GltfImporter.importFromUri(
'../../../assets/gltf/glTF-Sample-Models/2.0/IridescentDishWithOlives/glTF-Binary/IridescentDishWithOlives.glb',
{
cameraComponent: cameraComponent,
defaultMaterialHelperArgumentArray: [
{
makeOutputSrgb: false,
},
],
}
)
).unwrapForce();

// env
const envExpression = createEnvCubeExpression('./../../../assets/ibl/papermill', cameraEntity);

const mainRenderPass = mainExpression.renderPasses[0];
// cameraController
const mainCameraControllerComponent = cameraEntity.getCameraController();
const controller = mainCameraControllerComponent.controller as Rn.OrbitCameraController;
controller.setTarget(mainRenderPass.sceneTopLevelGraphComponents[0].entity);
controller.dolly = 0.83;

forwardRenderPipeline.setExpressions([envExpression, mainExpression]);

// lighting
forwardRenderPipeline.setIBL({
diffuse: {
baseUri: './../../../assets/ibl/papermill/diffuse/diffuse',
hdriFormat: Rn.HdriFormat.RGBE_PNG,
isNamePosNeg: true,
mipmapLevelNumber: 1,
},
specular: {
baseUri: './../../../assets/ibl/papermill/specular/specular',
hdriFormat: Rn.HdriFormat.RGBE_PNG,
isNamePosNeg: true,
mipmapLevelNumber: 10,
},
});

let count = 0;
let startTime = Date.now();
const draw = function (frame) {
if (count > 100) {
p.id = 'rendered';
p.innerText = 'Rendered.';
} else if (count === 1) {
p.id = 'started';
p.innerText = 'Started.';
Rn.Config.isUboEnabled = false;
const canvas = document.getElementById('world') as HTMLCanvasElement;
await Rn.System.init({
approach: Rn.ProcessApproach.DataTexture,
canvas,
});

Rn.MeshRendererComponent.isDepthMaskTrueForTransparencies = true;

// create ForwardRenderPipeline
const forwardRenderPipeline = new Rn.ForwardRenderPipeline();
forwardRenderPipeline.setup(canvas.width, canvas.height);

// camera
const { cameraComponent, cameraEntity } = createCamera();

// gltf
const mainExpression = (
await Rn.GltfImporter.importFromUri(
'../../../assets/gltf/glTF-Sample-Models/2.0/IridescentDishWithOlives/glTF-Binary/IridescentDishWithOlives.glb',
{
cameraComponent: cameraComponent,
defaultMaterialHelperArgumentArray: [
{
makeOutputSrgb: false,
},
],
}

if (window.isAnimating) {
const date = new Date();
const time = (date.getTime() - startTime) / 1000;
Rn.AnimationComponent.globalTime = time;
if (time > Rn.AnimationComponent.endInputValue) {
startTime = date.getTime();
}
)
).unwrapForce();

// env
const envExpression = createEnvCubeExpression('./../../../assets/ibl/papermill', cameraEntity);

const mainRenderPass = mainExpression.renderPasses[0];
// cameraController
const mainCameraControllerComponent = cameraEntity.getCameraController();
const controller = mainCameraControllerComponent.controller as Rn.OrbitCameraController;
controller.setTarget(mainRenderPass.sceneTopLevelGraphComponents[0].entity);
controller.dolly = 0.83;

forwardRenderPipeline.setExpressions([envExpression, mainExpression]);

// lighting
forwardRenderPipeline.setIBL({
diffuse: {
baseUri: './../../../assets/ibl/papermill/diffuse/diffuse',
hdriFormat: Rn.HdriFormat.RGBE_PNG,
isNamePosNeg: true,
mipmapLevelNumber: 1,
},
specular: {
baseUri: './../../../assets/ibl/papermill/specular/specular',
hdriFormat: Rn.HdriFormat.RGBE_PNG,
isNamePosNeg: true,
mipmapLevelNumber: 10,
},
});

let count = 0;
let startTime = Date.now();
const draw = function (frame) {
if (count > 100) {
p.id = 'rendered';
p.innerText = 'Rendered.';
} else if (count === 1) {
p.id = 'started';
p.innerText = 'Started.';
}

if (window.isAnimating) {
const date = new Date();
const time = (date.getTime() - startTime) / 1000;
Rn.AnimationComponent.globalTime = time;
if (time > Rn.AnimationComponent.endInputValue) {
startTime = date.getTime();
}
}

Rn.System.process(frame);
Rn.System.process(frame);

count++;
};
count++;
};

forwardRenderPipeline.startRenderLoop(draw);
})();
forwardRenderPipeline.startRenderLoop(draw);

function createCamera() {
const cameraEntity = Rn.EntityHelper.createCameraControllerEntity();
Expand Down
110 changes: 52 additions & 58 deletions samples/test_e2e/GltfImporter-ibl-0/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,64 @@
import Rn from '../../../dist/esm/index.js';
import Rn from '../../../dist/esmdev/index.js';

const p = document.createElement('p');
document.body.appendChild(p);

(async () => {
await Rn.System.init({
approach: Rn.ProcessApproach.Uniform,
canvas: document.getElementById('world') as HTMLCanvasElement,
});

// expressions
const expressions = [];

// env
const envExpression = createEnvCubeExpression('./../../../assets/ibl/papermill');
expressions.push(envExpression);

// camera
const cameraEntity = Rn.EntityHelper.createCameraControllerEntity();
const cameraComponent = cameraEntity.getCamera();
cameraComponent.zNear = 0.1;
cameraComponent.zFar = 1000.0;
cameraComponent.setFovyAndChangeFocalLength(20.0);
cameraComponent.aspect = 1.0;

// gltf
const mainExpression = (
await Rn.GltfImporter.importFromUri(
'../../../assets/gltf/glTF-Sample-Models/2.0/AntiqueCamera/glTF/AntiqueCamera.gltf',
{
cameraComponent: cameraComponent,
},
(obj: Rn.RnPromiseCallbackObj) => {
// this callback won't be called
console.log(`loading items: ${obj.resolvedNum} / ${obj.promiseAllNum}`);
}
)
).unwrapForce();
expressions.push(mainExpression);

// cameraController
const mainRenderPass = mainExpression.renderPasses[0];
const mainCameraControllerComponent = cameraEntity.getCameraController();
const controller = mainCameraControllerComponent.controller as Rn.OrbitCameraController;
controller.setTarget(mainRenderPass.sceneTopLevelGraphComponents[0].entity);

// lighting
setIBL('./../../../assets/ibl/papermill');

let count = 0;

const draw = function () {
if (count > 100) {
p.id = 'rendered';
p.innerText = 'Rendered.';
await Rn.System.init({
approach: Rn.ProcessApproach.Uniform,
canvas: document.getElementById('world') as HTMLCanvasElement,
});

// expressions
const expressions = [];

// env
const envExpression = createEnvCubeExpression('./../../../assets/ibl/papermill');
expressions.push(envExpression);

// camera
const cameraEntity = Rn.EntityHelper.createCameraControllerEntity();
const cameraComponent = cameraEntity.getCamera();
cameraComponent.zNear = 0.1;
cameraComponent.zFar = 1000.0;
cameraComponent.setFovyAndChangeFocalLength(20.0);
cameraComponent.aspect = 1.0;

// gltf
const mainExpression = (
await Rn.GltfImporter.importFromUri(
'../../../assets/gltf/glTF-Sample-Models/2.0/AntiqueCamera/glTF/AntiqueCamera.gltf',
{
cameraComponent: cameraComponent,
},
(obj: Rn.RnPromiseCallbackObj) => {
// this callback won't be called
console.log(`loading items: ${obj.resolvedNum} / ${obj.promiseAllNum}`);
}
)
).unwrapForce();
expressions.push(mainExpression);

// cameraController
const mainRenderPass = mainExpression.renderPasses[0];
const mainCameraControllerComponent = cameraEntity.getCameraController();
const controller = mainCameraControllerComponent.controller as Rn.OrbitCameraController;
controller.setTarget(mainRenderPass.sceneTopLevelGraphComponents[0].entity);

Rn.System.process(expressions);
// lighting
setIBL('./../../../assets/ibl/papermill');

count++;
let count = 0;

Rn.System.startRenderLoop(() => {
if (count > 100) {
p.id = 'rendered';
p.innerText = 'Rendered.';
}

requestAnimationFrame(draw);
};
Rn.System.process(expressions);

draw();
})();
count++;
});

function createEnvCubeExpression(baseuri) {
const environmentCubeTexture = new Rn.CubeTexture();
Expand Down
Loading

0 comments on commit 70b8396

Please sign in to comment.