/* spellchecker: disable */ import { mat4, vec3, vec4 } from 'gl-matrix'; import { AccumulatePass, AntiAliasingKernel, BlitPass, Camera, Canvas, Context, CuboidGeometry, DefaultFramebuffer, EventProvider, Framebuffer, Invalidate, Navigation, Program, Renderbuffer, Renderer, Shader, Texture2D, Wizard, } from 'webgl-operate'; import { Example } from './example'; /* spellchecker: enable */ // tslint:disable:max-classes-per-file export class ProgressiveCubeRenderer extends Renderer { protected _camera: Camera; protected _navigation: Navigation; protected _depthRenderbuffer: Renderbuffer; protected _colorRenderTexture: Texture2D; protected _intermediateFBO: Framebuffer; protected _ndcOffsetKernel: AntiAliasingKernel; protected _uNdcOffset: WebGLUniformLocation; protected _cuboid: CuboidGeometry; protected _texture: Texture2D; protected _program: Program; protected _uViewProjection: WebGLUniformLocation; protected _defaultFBO: DefaultFramebuffer; protected _accumulate: AccumulatePass; protected _blit: BlitPass; protected _zoomSrcBounds: vec4; protected _zoomDstBounds: vec4; /** * Initializes and sets up buffer, cube geometry, camera and links shaders with program. * @param context - valid context to create the object for. * @param identifier - meaningful name for identification of this instance. * @param eventProvider - required for mouse interaction * @returns - whether initialization was successful */ protected onInitialize(context: Context, callback: Invalidate, eventProvider: EventProvider): boolean { const gl = context.gl; const gl2facade = this._context.gl2facade; this._defaultFBO = new DefaultFramebuffer(context, 'DefaultFBO'); this._defaultFBO.initialize(); const internalFormatAndType = Wizard.queryInternalTextureFormat(this._context, gl.RGBA, Wizard.Precision.half); this._colorRenderTexture = new Texture2D(this._context, 'ColorRenderTexture'); this._colorRenderTexture.initialize(1, 1, internalFormatAndType[0], gl.RGBA, internalFormatAndType[1]); this._colorRenderTexture.filter(gl.LINEAR, gl.LINEAR); this._depthRenderbuffer = new Renderbuffer(this._context, 'DepthRenderbuffer'); this._depthRenderbuffer.initialize(1, 1, gl.DEPTH_COMPONENT16); this._intermediateFBO = new Framebuffer(this._context, 'IntermediateFBO'); this._intermediateFBO.initialize([ [gl2facade.COLOR_ATTACHMENT0, this._colorRenderTexture], [gl.DEPTH_ATTACHMENT, this._depthRenderbuffer]]); this._cuboid = new CuboidGeometry(context, 'Cuboid', true, [2.0, 2.0, 2.0]); this._cuboid.initialize(); const vert = new Shader(context, gl.VERTEX_SHADER, 'mesh-progressive.vert'); vert.initialize(require('./data/mesh-progressive.vert')); const frag = new Shader(context, gl.FRAGMENT_SHADER, 'mesh.frag'); frag.initialize(require('./data/mesh.frag')); this._program = new Program(context, 'CubeProgram'); this._program.initialize([vert, frag], false); this._program.attribute('a_vertex', this._cuboid.vertexLocation); this._program.attribute('a_texCoord', this._cuboid.uvCoordLocation); this._program.link(); this._program.bind(); this._uViewProjection = this._program.uniform('u_viewProjection'); this._uNdcOffset = this._program.uniform('u_ndcOffset'); const identity = mat4.identity(mat4.create()); gl.uniformMatrix4fv(this._program.uniform('u_model'), false, identity); gl.uniform1i(this._program.uniform('u_texture'), 0); gl.uniform1i(this._program.uniform('u_textured'), false); this._texture = new Texture2D(context, 'Texture'); this._texture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE); this._texture.wrap(gl.REPEAT, gl.REPEAT); this._texture.filter(gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR); this._texture.maxAnisotropy(Texture2D.MAX_ANISOTROPY); this._texture.fetch('/examples/data/blue-painted-planks-diff-1k-modified.webp').then(() => { const gl = context.gl; this._program.bind(); gl.uniform1i(this._program.uniform('u_textured'), true); this.finishLoading(); this.invalidate(true); }); this._camera = new Camera(); this._camera.center = vec3.fromValues(0.0, 0.0, 0.0); this._camera.up = vec3.fromValues(0.0, 1.0, 0.0); this._camera.eye = vec3.fromValues(0.0, 0.0, 5.0); this._camera.near = 1.0; this._camera.far = 8.0; this._navigation = new Navigation(callback, eventProvider); this._navigation.camera = this._camera; this._accumulate = new AccumulatePass(context); this._accumulate.initialize(); this._accumulate.precision = this._framePrecision; this._accumulate.texture = this._colorRenderTexture; this._blit = new BlitPass(this._context); this._blit.initialize(); this._blit.readBuffer = gl2facade.COLOR_ATTACHMENT0; this._blit.target = this._defaultFBO; this._blit.drawBuffer = gl.BACK; return true; } /** * Uninitializes buffers, geometry and program. */ protected onUninitialize(): void { super.uninitialize(); this._cuboid.uninitialize(); this._program.uninitialize(); this._defaultFBO.uninitialize(); } protected onDiscarded(): void { this._altered.alter('canvasSize'); this._altered.alter('clearColor'); this._altered.alter('frameSize'); this._altered.alter('multiFrameNumber'); } /** * This is invoked in order to check if rendering of a frame is required by means of implementation specific * evaluation (e.g., lazy non continuous rendering). Regardless of the return value a new frame (preparation, * frame, swap) might be invoked anyway, e.g., when update is forced or canvas or context properties have * changed or the renderer was invalidated @see{@link invalidate}. * @returns whether to redraw */ protected onUpdate(): boolean { this._navigation.update(); return this._altered.any || this._camera.altered; } /** * This is invoked in order to prepare rendering of one or more frames, regarding multi-frame rendering and * camera-updates. */ protected onPrepare(): void { if (this._altered.frameSize) { this._intermediateFBO.resize(this._frameSize[0], this._frameSize[1]); this._camera.viewport = this._canvasSize; const aspect = this._frameSize[0] / this._frameSize[1]; this._zoomSrcBounds = vec4.fromValues( this._frameSize[0] * (0.3333 - 0.02), this._frameSize[1] * (0.6666 - 0.02 * aspect), this._frameSize[0] * (0.3333 + 0.02), this._frameSize[1] * (0.6666 + 0.02 * aspect)); } if (this._altered.canvasSize) { this._camera.aspect = this._canvasSize[0] / this._canvasSize[1]; this._zoomDstBounds = vec4.fromValues( this._canvasSize[0] * (1.0 - 0.374), this._canvasSize[1] * (1.0 - 0.374 * this._camera.aspect), this._canvasSize[0] * (1.0 - 0.008), this._canvasSize[1] * (1.0 - 0.008 * this._camera.aspect)); } if (this._altered.clearColor) { this._defaultFBO.clearColor(this._clearColor); this._intermediateFBO.clearColor(this._clearColor); } if (this._altered.multiFrameNumber) { this._ndcOffsetKernel = new AntiAliasingKernel(this._multiFrameNumber); } this._accumulate.update(); this._altered.reset(); this._camera.altered = false; } protected onFrame(frameNumber: number): void { const gl = this._context.gl; this._intermediateFBO.bind(); this._intermediateFBO.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT, false, false); gl.viewport(0, 0, this._frameSize[0], this._frameSize[1]); const ndcOffset = this._ndcOffsetKernel.get(frameNumber); ndcOffset[0] = 2.0 * ndcOffset[0] / this._frameSize[0]; ndcOffset[1] = 2.0 * ndcOffset[1] / this._frameSize[1]; gl.enable(gl.CULL_FACE); gl.cullFace(gl.BACK); gl.enable(gl.DEPTH_TEST); this._texture.bind(gl.TEXTURE0); this._program.bind(); gl.uniformMatrix4fv(this._uViewProjection, false, this._camera.viewProjection); gl.uniform2fv(this._uNdcOffset, ndcOffset); this._cuboid.bind(); this._cuboid.draw(); this._cuboid.unbind(); this._program.unbind(); this._texture.unbind(gl.TEXTURE0); gl.cullFace(gl.BACK); gl.disable(gl.CULL_FACE); this._accumulate.frame(frameNumber); } protected onSwap(): void { this._blit.framebuffer = this._accumulate.framebuffer ? this._accumulate.framebuffer : this._intermediateFBO; this._blit.frame(); this._blit.srcBounds = this._zoomSrcBounds; this._blit.dstBounds = this._zoomDstBounds; this._blit.frame(); this._blit.srcBounds = this._blit.dstBounds = undefined; } } export class ProgressiveCubeExample extends Example { private _canvas: Canvas; private _renderer: ProgressiveCubeRenderer; onInitialize(element: HTMLCanvasElement | string): boolean { this._canvas = new Canvas(element, { antialias: false }); this._canvas.controller.multiFrameNumber = 64; this._canvas.framePrecision = Wizard.Precision.half; this._canvas.frameScale = [0.5, 0.5]; this._renderer = new ProgressiveCubeRenderer(); this._canvas.renderer = this._renderer; return true; } onUninitialize(): void { this._canvas.dispose(); (this._renderer as Renderer).uninitialize(); } get canvas(): Canvas { return this._canvas; } get renderer(): ProgressiveCubeRenderer { return this._renderer; } }