123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- import { Engine } from "../engine.js";
- import { Observable } from "../../Misc/observable.js";
- /**
- * Class used to define an additional view for the engine
- * @see https://doc.babylonjs.com/features/featuresDeepDive/scene/multiCanvas
- */
- export class EngineView {
- }
- const _onBeforeViewRenderObservable = new Observable();
- const _onAfterViewRenderObservable = new Observable();
- Object.defineProperty(Engine.prototype, "onBeforeViewRenderObservable", {
- get: function () {
- return _onBeforeViewRenderObservable;
- },
- });
- Object.defineProperty(Engine.prototype, "onAfterViewRenderObservable", {
- get: function () {
- return _onAfterViewRenderObservable;
- },
- });
- Object.defineProperty(Engine.prototype, "inputElement", {
- get: function () {
- return this._inputElement;
- },
- set: function (value) {
- if (this._inputElement !== value) {
- this._inputElement = value;
- this._onEngineViewChanged?.();
- }
- },
- });
- Engine.prototype.getInputElement = function () {
- return this.inputElement || this.getRenderingCanvas();
- };
- Engine.prototype.registerView = function (canvas, camera, clearBeforeCopy) {
- if (!this.views) {
- this.views = [];
- }
- for (const view of this.views) {
- if (view.target === canvas) {
- return view;
- }
- }
- const masterCanvas = this.getRenderingCanvas();
- if (masterCanvas) {
- canvas.width = masterCanvas.width;
- canvas.height = masterCanvas.height;
- }
- const newView = { target: canvas, camera, clearBeforeCopy, enabled: true, id: (Math.random() * 100000).toFixed() };
- this.views.push(newView);
- if (camera && !Array.isArray(camera)) {
- camera.onDisposeObservable.add(() => {
- this.unRegisterView(canvas);
- });
- }
- return newView;
- };
- Engine.prototype.unRegisterView = function (canvas) {
- if (!this.views || this.views.length === 0) {
- return this;
- }
- for (const view of this.views) {
- if (view.target === canvas) {
- const index = this.views.indexOf(view);
- if (index !== -1) {
- this.views.splice(index, 1);
- }
- break;
- }
- }
- return this;
- };
- Engine.prototype._renderViewStep = function (view) {
- const canvas = view.target;
- const context = canvas.getContext("2d");
- if (!context) {
- return true;
- }
- const parent = this.getRenderingCanvas();
- _onBeforeViewRenderObservable.notifyObservers(view);
- const camera = view.camera;
- let previewCamera = null;
- let previewCameras = null;
- let scene = null;
- if (camera) {
- scene = Array.isArray(camera) ? camera[0].getScene() : camera.getScene();
- previewCamera = scene.activeCamera;
- previewCameras = scene.activeCameras;
- this.activeView = view;
- if (Array.isArray(camera)) {
- scene.activeCameras = camera;
- }
- else {
- scene.activeCamera = camera;
- scene.activeCameras = null;
- }
- }
- if (view.customResize) {
- view.customResize(canvas);
- }
- else {
- // Set sizes
- const width = Math.floor(canvas.clientWidth / this._hardwareScalingLevel);
- const height = Math.floor(canvas.clientHeight / this._hardwareScalingLevel);
- const dimsChanged = width !== canvas.width || parent.width !== canvas.width || height !== canvas.height || parent.height !== canvas.height;
- if (canvas.clientWidth && canvas.clientHeight && dimsChanged) {
- canvas.width = width;
- canvas.height = height;
- this.setSize(width, height);
- }
- }
- if (!parent.width || !parent.height) {
- return false;
- }
- // Render the frame
- this._renderFrame();
- this.flushFramebuffer();
- // Copy to target
- if (view.clearBeforeCopy) {
- context.clearRect(0, 0, parent.width, parent.height);
- }
- context.drawImage(parent, 0, 0);
- // Restore
- if (scene) {
- scene.activeCameras = previewCameras;
- scene.activeCamera = previewCamera;
- }
- _onAfterViewRenderObservable.notifyObservers(view);
- return true;
- };
- Engine.prototype._renderViews = function () {
- if (!this.views || this.views.length === 0) {
- return false;
- }
- const parent = this.getRenderingCanvas();
- if (!parent) {
- return false;
- }
- let inputElementView;
- for (const view of this.views) {
- if (!view.enabled) {
- continue;
- }
- const canvas = view.target;
- // Always render the view correspondent to the inputElement for last
- if (canvas === this.inputElement) {
- inputElementView = view;
- continue;
- }
- if (!this._renderViewStep(view)) {
- return false;
- }
- }
- if (inputElementView) {
- if (!this._renderViewStep(inputElementView)) {
- return false;
- }
- }
- this.activeView = null;
- return true;
- };
- //# sourceMappingURL=engine.views.js.map
|