| */ | */ | ||||
| @onChange(ThreeViewer.prototype._renderEnabledChanged) | @onChange(ThreeViewer.prototype._renderEnabledChanged) | ||||
| renderEnabled = true | renderEnabled = true | ||||
| renderStats: GLStatsJS | |||||
| renderStats?: GLStatsJS | |||||
| readonly assetManager: AssetManager | readonly assetManager: AssetManager | ||||
| /** | /** | ||||
| * The Scene attached to the viewer, this cannot be changed. | * The Scene attached to the viewer, this cannot be changed. | ||||
| this.setDirty = this.setDirty.bind(this) | this.setDirty = this.setDirty.bind(this) | ||||
| this._animationLoop = this._animationLoop.bind(this) | this._animationLoop = this._animationLoop.bind(this) | ||||
| this.renderStats = new GLStatsJS(this._container) | |||||
| if (debug) this.renderStats.show() | |||||
| if (debug && (options as any).statsJS !== false) { | |||||
| this.renderStats = new GLStatsJS(this._container) | |||||
| this.renderStats.show() | |||||
| } | |||||
| if (!(window as any).threeViewers) (window as any).threeViewers = []; | if (!(window as any).threeViewers) (window as any).threeViewers = []; | ||||
| (window as any).threeViewers.push(this) | (window as any).threeViewers.push(this) | ||||
| if (options.isAntialiased !== undefined || options.useRgbm !== undefined || options.useGBufferDepth !== undefined) { | if (options.isAntialiased !== undefined || options.useRgbm !== undefined || options.useGBufferDepth !== undefined) { | ||||
| this.console.warn('isAntialiased, useRgbm and useGBufferDepth are deprecated, use msaa, rgbm and zPrepass instead.') | this.console.warn('isAntialiased, useRgbm and useGBufferDepth are deprecated, use msaa, rgbm and zPrepass instead.') | ||||
| } | } | ||||
| this.renderManager = new ViewerRenderManager({ | |||||
| const rmClass: Class<ViewerRenderManager> = (options as any).rmClass ?? ViewerRenderManager | |||||
| this.renderManager = new rmClass({ | |||||
| canvas: this._canvas, | canvas: this._canvas, | ||||
| msaa: options.msaa ?? options.isAntialiased ?? false, | msaa: options.msaa ?? options.isAntialiased ?? false, | ||||
| rgbm: options.rgbm ?? options.useRgbm ?? true, | rgbm: options.rgbm ?? options.useRgbm ?? true, | ||||
| } | } | ||||
| this._isRenderingFrame = true | this._isRenderingFrame = true | ||||
| this.renderStats.begin() | |||||
| this.renderStats?.begin() | |||||
| for (let i = 0; i < this.maxFramePerLoop; i++) { | for (let i = 0; i < this.maxFramePerLoop; i++) { | ||||
| for (let j = 0; j < this.rendersPerFrame; j++) { | for (let j = 0; j < this.rendersPerFrame; j++) { | ||||
| this.dispatchEvent({type: 'preRender', target: this}) | this.dispatchEvent({type: 'preRender', target: this}) | ||||
| try { | |||||
| const render = ()=>{ | |||||
| const cam = this._scene.mainCamera | const cam = this._scene.mainCamera | ||||
| this._scene.renderCamera = cam | this._scene.renderCamera = cam | ||||
| if (cam.visible) this.renderManager.render(this._scene, this.renderManager.defaultRenderToScreen) | if (cam.visible) this.renderManager.render(this._scene, this.renderManager.defaultRenderToScreen) | ||||
| } catch (e) { | |||||
| this.console.error('ThreeViewer: Error while rendering frame. Enable debug mode to check the errors.') | |||||
| if (this.debug) { | |||||
| } | |||||
| if (this.debug) { | |||||
| render() | |||||
| } else { | |||||
| try { | |||||
| render() | |||||
| } catch (e) { | |||||
| this.console.error('ThreeViewer: Error while rendering frame. Enable debug mode for more information.') | |||||
| this.console.error(e) | this.console.error(e) | ||||
| throw e | |||||
| if (this.debug) throw e | |||||
| // this.enabled = false | |||||
| } | } | ||||
| // this.enabled = false | |||||
| } | } | ||||
| this.dispatchEvent({type: 'postRender', target: this}) | this.dispatchEvent({type: 'postRender', target: this}) | ||||
| } | } | ||||
| this.renderStats.end() | |||||
| this.renderStats?.end() | |||||
| this._isRenderingFrame = false | this._isRenderingFrame = false | ||||
| this.console.error(`ThreeViewer: Plugin of type ${type} already exists, removing and disposing old plugin. This might break functionality, ensure only one plugin of a type is added`, this.plugins[type], p) | this.console.error(`ThreeViewer: Plugin of type ${type} already exists, removing and disposing old plugin. This might break functionality, ensure only one plugin of a type is added`, this.plugins[type], p) | ||||
| this.removePluginSync(this.plugins[type]) | this.removePluginSync(this.plugins[type]) | ||||
| } | } | ||||
| try { | |||||
| const add = ()=>{ | |||||
| this.plugins[type] = p | this.plugins[type] = p | ||||
| const oldType = p.constructor.OldPluginType | const oldType = p.constructor.OldPluginType | ||||
| if (oldType && this.plugins[oldType]) this.console.error(`ThreeViewer: Plugin type mismatch ${oldType}`) | if (oldType && this.plugins[oldType]) this.console.error(`ThreeViewer: Plugin type mismatch ${oldType}`) | ||||
| if (oldType) this.plugins[oldType] = p | if (oldType) this.plugins[oldType] = p | ||||
| p.onAdded(this) | p.onAdded(this) | ||||
| } catch (e) { | |||||
| this.console.error('ThreeViewer: Error adding plugin, check console for details', e) | |||||
| delete this.plugins[type] | |||||
| } | |||||
| if (this.debug) { | |||||
| add() | |||||
| } else { | |||||
| try { | |||||
| add() | |||||
| } catch (e) { | |||||
| this.console.error('ThreeViewer: Error adding plugin, check console for details', e) | |||||
| delete this.plugins[type] | |||||
| } | |||||
| } | } | ||||
| this._onPluginAdd(p) | this._onPluginAdd(p) | ||||
| return p | return p | ||||
| const containerRect = containerSize || this.container.getBoundingClientRect() | const containerRect = containerSize || this.container.getBoundingClientRect() | ||||
| const containerHeight = containerRect.height | const containerHeight = containerRect.height | ||||
| const containerWidth = containerRect.width | const containerWidth = containerRect.width | ||||
| const width = size.width | |||||
| const height = size.height | |||||
| const width = Math.floor(size.width) | |||||
| const height = Math.floor(size.height) | |||||
| const aspect = width / height | const aspect = width / height | ||||
| const containerAspect = containerWidth / containerHeight | const containerAspect = containerWidth / containerHeight | ||||
| const dpr = devicePixelRatio | const dpr = devicePixelRatio |