////////////////////////////////////////////////////////////////////////////////////// // // Copyright (c) 2014-present, Egret Technology. // All rights reserved. // Redistribution and use in source and binary forms, with or without // modification, are permitted provided that the following conditions are met: // // * Redistributions of source code must retain the above copyright // notice, this list of conditions and the following disclaimer. // * Redistributions in binary form must reproduce the above copyright // notice, this list of conditions and the following disclaimer in the // documentation and/or other materials provided with the distribution. // * Neither the name of the Egret nor the // names of its contributors may be used to endorse or promote products // derived from this software without specific prior written permission. // // THIS SOFTWARE IS PROVIDED BY EGRET AND CONTRIBUTORS "AS IS" AND ANY EXPRESS // OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES // OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. // IN NO EVENT SHALL EGRET AND CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, // INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;LOSS OF USE, DATA, // OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF // LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING // NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, // EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. // ////////////////////////////////////////////////////////////////////////////////////// namespace egret.web { let blendModes = ["source-over", "lighter", "destination-out"]; let defaultCompositeOp = "source-over"; let BLACK_COLOR = "#000000"; let CAPS_STYLES = { none: 'butt', square: 'square', round: 'round' }; let renderBufferPool: WebGLRenderBuffer[] = [];//渲染缓冲区对象池 /** * @private * WebGL渲染器 */ export class WebGLRenderer implements sys.SystemRenderer { public constructor() { } private nestLevel: number = 0;//渲染的嵌套层次，0表示在调用堆栈的最外层。 /** * 渲染一个显示对象 * @param displayObject 要渲染的显示对象 * @param buffer 渲染缓冲 * @param matrix 要对显示对象整体叠加的变换矩阵 * @param dirtyList 脏矩形列表 * @param forRenderTexture 绘制目标是RenderTexture的标志 * @returns drawCall触发绘制的次数 */ public render(displayObject: DisplayObject, buffer: sys.RenderBuffer, matrix: Matrix, forRenderTexture?: boolean): number { this.nestLevel++; let webglBuffer: WebGLRenderBuffer = buffer; let webglBufferContext: WebGLRenderContext = webglBuffer.context; let root: DisplayObject = forRenderTexture ? displayObject : null; webglBufferContext.pushBuffer(webglBuffer); //绘制显示对象 webglBuffer.transform(matrix.a, matrix.b, matrix.c, matrix.d, 0, 0); this.drawDisplayObject(displayObject, webglBuffer, matrix.tx, matrix.ty, true); webglBufferContext.$drawWebGL(); let drawCall = webglBuffer.$drawCalls; webglBuffer.onRenderFinish(); webglBufferContext.popBuffer(); let invert = Matrix.create(); matrix.$invertInto(invert); webglBuffer.transform(invert.a, invert.b, invert.c, invert.d, 0, 0); Matrix.release(invert); this.nestLevel--; if (this.nestLevel === 0) { //最大缓存6个渲染缓冲 if (renderBufferPool.length > 6) { renderBufferPool.length = 6; } let length = renderBufferPool.length; for (let i = 0; i < length; i++) { renderBufferPool[i].resize(0, 0); } } return drawCall; } /** * @private * 绘制一个显示对象 */ private drawDisplayObject(displayObject: DisplayObject, buffer: WebGLRenderBuffer, offsetX: number, offsetY: number, isStage?: boolean): number { let drawCalls = 0; let node: sys.RenderNode; let displayList = displayObject.$displayList; if (displayList && !isStage) { if (displayObject.$cacheDirty || displayObject.$renderDirty || displayList.$canvasScaleX != sys.DisplayList.$canvasScaleX || displayList.$canvasScaleY != sys.DisplayList.$canvasScaleY) { drawCalls += displayList.drawToSurface(); } node = displayList.$renderNode; } else { if (displayObject.$renderDirty) { node = displayObject.$getRenderNode(); } else { node = displayObject.$renderNode; } } displayObject.$cacheDirty = false; if (node) { drawCalls++; buffer.$offsetX = offsetX; buffer.$offsetY = offsetY; switch (node.type) { case sys.RenderNodeType.BitmapNode: this.renderBitmap(node, buffer); break; case sys.RenderNodeType.TextNode: this.renderText(node, buffer); break; case sys.RenderNodeType.GraphicsNode: this.renderGraphics(node, buffer); break; case sys.RenderNodeType.GroupNode: this.renderGroup(node, buffer); break; case sys.RenderNodeType.MeshNode: this.renderMesh(node, buffer); break; case sys.RenderNodeType.NormalBitmapNode: this.renderNormalBitmap(node, buffer); break; } buffer.$offsetX = 0; buffer.$offsetY = 0; } if (displayList && !isStage) { return drawCalls; } let children = displayObject.$children; if (children) { let length = children.length; for (let i = 0; i < length; i++) { let child = children[i]; let offsetX2; let offsetY2; let tempAlpha; if (child.$alpha != 1) { tempAlpha = buffer.globalAlpha; buffer.globalAlpha *= child.$alpha; } let savedMatrix: Matrix; if (child.$useTranslate) { let m = child.$getMatrix(); offsetX2 = offsetX + child.$x; offsetY2 = offsetY + child.$y; let m2 = buffer.globalMatrix; savedMatrix = Matrix.create(); savedMatrix.a = m2.a; savedMatrix.b = m2.b; savedMatrix.c = m2.c; savedMatrix.d = m2.d; savedMatrix.tx = m2.tx; savedMatrix.ty = m2.ty; buffer.transform(m.a, m.b, m.c, m.d, offsetX2, offsetY2); offsetX2 = -child.$anchorOffsetX; offsetY2 = -child.$anchorOffsetY; } else { offsetX2 = offsetX + child.$x - child.$anchorOffsetX; offsetY2 = offsetY + child.$y - child.$anchorOffsetY; } switch (child.$renderMode) { case RenderMode.NONE: break; case RenderMode.FILTER: drawCalls += this.drawWithFilter(child, buffer, offsetX2, offsetY2); break; case RenderMode.CLIP: drawCalls += this.drawWithClip(child, buffer, offsetX2, offsetY2); break; case RenderMode.SCROLLRECT: drawCalls += this.drawWithScrollRect(child, buffer, offsetX2, offsetY2); break; default: drawCalls += this.drawDisplayObject(child, buffer, offsetX2, offsetY2); break; } if (tempAlpha) { buffer.globalAlpha = tempAlpha; } if (savedMatrix) { let m = buffer.globalMatrix; m.a = savedMatrix.a; m.b = savedMatrix.b; m.c = savedMatrix.c; m.d = savedMatrix.d; m.tx = savedMatrix.tx; m.ty = savedMatrix.ty; Matrix.release(savedMatrix); } } } return drawCalls; } /** * @private */ private drawWithFilter(displayObject: DisplayObject, buffer: WebGLRenderBuffer, offsetX: number, offsetY: number): number { let drawCalls = 0; if (displayObject.$children && displayObject.$children.length == 0 && (!displayObject.$renderNode || displayObject.$renderNode.$getRenderCount() == 0)) { return; } let filters = displayObject.$filters; let hasBlendMode = (displayObject.$blendMode !== 0); let compositeOp: string; if (hasBlendMode) { compositeOp = blendModes[displayObject.$blendMode]; if (!compositeOp) { compositeOp = defaultCompositeOp; } } let displayBounds = displayObject.$getOriginalBounds(); if (displayBounds.width <= 0 || displayBounds.height <= 0) { return drawCalls; } if (!displayObject.mask && filters.length == 1 && (filters[0].type == "colorTransform" || (filters[0].type === "custom" && (filters[0]).padding === 0))) { let childrenDrawCount = this.getRenderCount(displayObject); if (!displayObject.$children || childrenDrawCount == 1) { if (hasBlendMode) { buffer.context.setGlobalCompositeOperation(compositeOp); } buffer.context.$filter = filters[0]; if (displayObject.$mask) { drawCalls += this.drawWithClip(displayObject, buffer, offsetX, offsetY); } else if (displayObject.$scrollRect || displayObject.$maskRect) { drawCalls += this.drawWithScrollRect(displayObject, buffer, offsetX, offsetY); } else { drawCalls += this.drawDisplayObject(displayObject, buffer, offsetX, offsetY); } buffer.context.$filter = null; if (hasBlendMode) { buffer.context.setGlobalCompositeOperation(defaultCompositeOp); } return drawCalls; } } // 为显示对象创建一个新的buffer let displayBuffer = this.createRenderBuffer(displayBounds.width, displayBounds.height); displayBuffer.context.pushBuffer(displayBuffer); //todo 可以优化减少draw次数 if (displayObject.$mask) { drawCalls += this.drawWithClip(displayObject, displayBuffer, -displayBounds.x, -displayBounds.y); } else if (displayObject.$scrollRect || displayObject.$maskRect) { drawCalls += this.drawWithScrollRect(displayObject, displayBuffer, -displayBounds.x, -displayBounds.y); } else { drawCalls += this.drawDisplayObject(displayObject, displayBuffer, -displayBounds.x, -displayBounds.y); } displayBuffer.context.popBuffer(); //绘制结果到屏幕 if (drawCalls > 0) { if (hasBlendMode) { buffer.context.setGlobalCompositeOperation(compositeOp); } drawCalls++; // 绘制结果的时候，应用滤镜 buffer.$offsetX = offsetX + displayBounds.x; buffer.$offsetY = offsetY + displayBounds.y; buffer.context.drawTargetWidthFilters(filters, displayBuffer); if (hasBlendMode) { buffer.context.setGlobalCompositeOperation(defaultCompositeOp); } } renderBufferPool.push(displayBuffer); return drawCalls; } private getRenderCount(displayObject: DisplayObject): number { let childrenDrawCount = 0; if (displayObject.$children) { for (let child of displayObject.$children) { let node = child.$getRenderNode(); if (node) { childrenDrawCount += node.$getRenderCount(); } if (child.$children) { childrenDrawCount += this.getRenderCount(child); } } } return childrenDrawCount; } /** * @private */ private drawWithClip(displayObject: DisplayObject, buffer: WebGLRenderBuffer, offsetX: number, offsetY: number): number { let drawCalls = 0; let hasBlendMode = (displayObject.$blendMode !== 0); let compositeOp: string; if (hasBlendMode) { compositeOp = blendModes[displayObject.$blendMode]; if (!compositeOp) { compositeOp = defaultCompositeOp; } } let scrollRect = displayObject.$scrollRect ? displayObject.$scrollRect : displayObject.$maskRect; let mask = displayObject.$mask; if (mask) { let maskRenderMatrix = mask.$getMatrix(); //遮罩scaleX或scaleY为0，放弃绘制 if ((maskRenderMatrix.a == 0 && maskRenderMatrix.b == 0) || (maskRenderMatrix.c == 0 && maskRenderMatrix.d == 0)) { return drawCalls; } } //没有遮罩,同时显示对象没有子项 if (!mask && (!displayObject.$children || displayObject.$children.length == 0)) { if (scrollRect) { buffer.context.pushMask(scrollRect.x + offsetX, scrollRect.y + offsetY, scrollRect.width, scrollRect.height); } //绘制显示对象 if (hasBlendMode) { buffer.context.setGlobalCompositeOperation(compositeOp); } drawCalls += this.drawDisplayObject(displayObject, buffer, offsetX, offsetY); if (hasBlendMode) { buffer.context.setGlobalCompositeOperation(defaultCompositeOp); } if (scrollRect) { buffer.context.popMask(); } return drawCalls; } else { let displayBounds = displayObject.$getOriginalBounds(); //绘制显示对象自身，若有scrollRect，应用clip let displayBuffer = this.createRenderBuffer(displayBounds.width, displayBounds.height); displayBuffer.context.pushBuffer(displayBuffer); drawCalls += this.drawDisplayObject(displayObject, displayBuffer, -displayBounds.x, -displayBounds.y); //绘制遮罩 if (mask) { let maskBuffer = this.createRenderBuffer(displayBounds.width, displayBounds.height); maskBuffer.context.pushBuffer(maskBuffer); let maskMatrix = Matrix.create(); maskMatrix.copyFrom(mask.$getConcatenatedMatrix()); mask.$getConcatenatedMatrixAt(displayObject, maskMatrix); maskBuffer.setTransform(maskMatrix.a, maskMatrix.b, maskMatrix.c, maskMatrix.d, maskMatrix.tx, maskMatrix.ty); Matrix.release(maskMatrix); drawCalls += this.drawDisplayObject(mask, maskBuffer, -displayBounds.x, -displayBounds.y); maskBuffer.context.popBuffer(); displayBuffer.context.setGlobalCompositeOperation("destination-in"); displayBuffer.setTransform(1, 0, 0, -1, 0, maskBuffer.height); displayBuffer.globalAlpha = 1; let maskBufferWidth = maskBuffer.rootRenderTarget.width; let maskBufferHeight = maskBuffer.rootRenderTarget.height; displayBuffer.context.drawTexture(maskBuffer.rootRenderTarget.texture, 0, 0, maskBufferWidth, maskBufferHeight, 0, 0, maskBufferWidth, maskBufferHeight, maskBufferWidth, maskBufferHeight); displayBuffer.setTransform(1, 0, 0, 1, 0, 0); displayBuffer.context.setGlobalCompositeOperation("source-over"); renderBufferPool.push(maskBuffer); } displayBuffer.context.setGlobalCompositeOperation(defaultCompositeOp); displayBuffer.context.popBuffer(); //绘制结果到屏幕 if (drawCalls > 0) { drawCalls++; if (hasBlendMode) { buffer.context.setGlobalCompositeOperation(compositeOp); } if (scrollRect) { buffer.context.pushMask(scrollRect.x + offsetX, scrollRect.y + offsetY, scrollRect.width, scrollRect.height); } buffer.globalAlpha = 1; let savedMatrix = Matrix.create(); let curMatrix = buffer.globalMatrix; savedMatrix.a = curMatrix.a; savedMatrix.b = curMatrix.b; savedMatrix.c = curMatrix.c; savedMatrix.d = curMatrix.d; savedMatrix.tx = curMatrix.tx; savedMatrix.ty = curMatrix.ty; buffer.setTransform(egret.sys.DisplayList.$canvasScaleX, 0, 0, -egret.sys.DisplayList.$canvasScaleY, (offsetX + displayBounds.x) * egret.sys.DisplayList.$canvasScaleX, (offsetY + displayBounds.y + displayBuffer.height) * egret.sys.DisplayList.$canvasScaleY); let displayBufferWidth = displayBuffer.rootRenderTarget.width; let displayBufferHeight = displayBuffer.rootRenderTarget.height; buffer.context.drawTexture(displayBuffer.rootRenderTarget.texture, 0, 0, displayBufferWidth, displayBufferHeight, 0, 0, displayBufferWidth, displayBufferHeight, displayBufferWidth, displayBufferHeight); if (scrollRect) { displayBuffer.context.popMask(); } if (hasBlendMode) { buffer.context.setGlobalCompositeOperation(defaultCompositeOp); } let matrix = buffer.globalMatrix; matrix.a = savedMatrix.a; matrix.b = savedMatrix.b; matrix.c = savedMatrix.c; matrix.d = savedMatrix.d; matrix.tx = savedMatrix.tx; matrix.ty = savedMatrix.ty; Matrix.release(savedMatrix); } renderBufferPool.push(displayBuffer); return drawCalls; } } /** * @private */ private drawWithScrollRect(displayObject: DisplayObject, buffer: WebGLRenderBuffer, offsetX: number, offsetY: number): number { let drawCalls = 0; let scrollRect = displayObject.$scrollRect ? displayObject.$scrollRect : displayObject.$maskRect; if (scrollRect.isEmpty()) { return drawCalls; } if (displayObject.$scrollRect) { offsetX -= scrollRect.x; offsetY -= scrollRect.y; } let m = buffer.globalMatrix; let context = buffer.context; let scissor = false; if (buffer.$hasScissor || m.b != 0 || m.c != 0) {// 有旋转的情况下不能使用scissor buffer.context.pushMask(scrollRect.x + offsetX, scrollRect.y + offsetY, scrollRect.width, scrollRect.height); } else { let a = m.a; let d = m.d; let tx = m.tx; let ty = m.ty; let x = scrollRect.x + offsetX; let y = scrollRect.y + offsetY; let xMax = x + scrollRect.width; let yMax = y + scrollRect.height; let minX: number, minY: number, maxX: number, maxY: number; //优化，通常情况下不缩放的对象占多数，直接加上偏移量即可。 if (a == 1.0 && d == 1.0) { minX = x + tx; minY = y + ty; maxX = xMax + tx; maxY = yMax + ty; } else { let x0 = a * x + tx; let y0 = d * y + ty; let x1 = a * xMax + tx; let y1 = d * y + ty; let x2 = a * xMax + tx; let y2 = d * yMax + ty; let x3 = a * x + tx; let y3 = d * yMax + ty; let tmp = 0; if (x0 > x1) { tmp = x0; x0 = x1; x1 = tmp; } if (x2 > x3) { tmp = x2; x2 = x3; x3 = tmp; } minX = (x0 < x2 ? x0 : x2); maxX = (x1 > x3 ? x1 : x3); if (y0 > y1) { tmp = y0; y0 = y1; y1 = tmp; } if (y2 > y3) { tmp = y2; y2 = y3; y3 = tmp; } minY = (y0 < y2 ? y0 : y2); maxY = (y1 > y3 ? y1 : y3); } context.enableScissor(minX, -maxY + buffer.height, maxX - minX, maxY - minY); scissor = true; } drawCalls += this.drawDisplayObject(displayObject, buffer, offsetX, offsetY); if (scissor) { context.disableScissor(); } else { context.popMask(); } return drawCalls; } /** * 将一个RenderNode对象绘制到渲染缓冲 * @param node 要绘制的节点 * @param buffer 渲染缓冲 * @param matrix 要叠加的矩阵 * @param forHitTest 绘制结果是用于碰撞检测。若为true，当渲染GraphicsNode时，会忽略透明度样式设置，全都绘制为不透明的。 */ public drawNodeToBuffer(node: sys.RenderNode, buffer: WebGLRenderBuffer, matrix: Matrix, forHitTest?: boolean): void { let webglBuffer: WebGLRenderBuffer = buffer; //pushRenderTARGET webglBuffer.context.pushBuffer(webglBuffer); webglBuffer.setTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty); this.renderNode(node, buffer, 0, 0, forHitTest); webglBuffer.context.$drawWebGL(); webglBuffer.onRenderFinish(); //popRenderTARGET webglBuffer.context.popBuffer(); } /** * 将一个DisplayObject绘制到渲染缓冲，用于RenderTexture绘制 * @param displayObject 要绘制的显示对象 * @param buffer 渲染缓冲 * @param matrix 要叠加的矩阵 */ public drawDisplayToBuffer(displayObject: DisplayObject, buffer: WebGLRenderBuffer, matrix: Matrix): number { buffer.context.pushBuffer(buffer); if (matrix) { buffer.setTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty); } let node: sys.RenderNode; if (displayObject.$renderDirty) { node = displayObject.$getRenderNode(); } else { node = displayObject.$renderNode; } let drawCalls = 0; if (node) { drawCalls++; switch (node.type) { case sys.RenderNodeType.BitmapNode: this.renderBitmap(node, buffer); break; case sys.RenderNodeType.TextNode: this.renderText(node, buffer); break; case sys.RenderNodeType.GraphicsNode: this.renderGraphics(node, buffer); break; case sys.RenderNodeType.GroupNode: this.renderGroup(node, buffer); break; case sys.RenderNodeType.MeshNode: this.renderMesh(node, buffer); break; case sys.RenderNodeType.NormalBitmapNode: this.renderNormalBitmap(node, buffer); break; } } let children = displayObject.$children; if (children) { let length = children.length; for (let i = 0; i < length; i++) { let child = children[i]; switch (child.$renderMode) { case RenderMode.NONE: break; case RenderMode.FILTER: drawCalls += this.drawWithFilter(child, buffer, 0, 0); break; case RenderMode.CLIP: drawCalls += this.drawWithClip(child, buffer, 0, 0); break; case RenderMode.SCROLLRECT: drawCalls += this.drawWithScrollRect(child, buffer, 0, 0); break; default: drawCalls += this.drawDisplayObject(child, buffer, 0, 0); break; } } } buffer.context.$drawWebGL(); buffer.onRenderFinish(); buffer.context.popBuffer(); return drawCalls; } /** * @private */ private renderNode(node: sys.RenderNode, buffer: WebGLRenderBuffer, offsetX: number, offsetY: number, forHitTest?: boolean): void { buffer.$offsetX = offsetX; buffer.$offsetY = offsetY; switch (node.type) { case sys.RenderNodeType.BitmapNode: this.renderBitmap(node, buffer); break; case sys.RenderNodeType.TextNode: this.renderText(node, buffer); break; case sys.RenderNodeType.GraphicsNode: this.renderGraphics(node, buffer, forHitTest); break; case sys.RenderNodeType.GroupNode: this.renderGroup(node, buffer); break; case sys.RenderNodeType.MeshNode: this.renderMesh(node, buffer); break; case sys.RenderNodeType.NormalBitmapNode: this.renderNormalBitmap(node, buffer); break; } } /** * @private */ private renderNormalBitmap(node: sys.NormalBitmapNode, buffer: WebGLRenderBuffer): void { let image = node.image; if (!image) { return; } buffer.context.drawImage(image, node.sourceX, node.sourceY, node.sourceW, node.sourceH, node.drawX, node.drawY, node.drawW, node.drawH, node.imageWidth, node.imageHeight, node.rotated, node.smoothing); } /** * @private */ private renderBitmap(node: sys.BitmapNode, buffer: WebGLRenderBuffer): void { let image = node.image; if (!image) { return; } //buffer.imageSmoothingEnabled = node.smoothing; let data = node.drawData; let length = data.length; let pos = 0; let m = node.matrix; let blendMode = node.blendMode; let alpha = node.alpha; let savedMatrix; let offsetX; let offsetY; if (m) { savedMatrix = Matrix.create(); let curMatrix = buffer.globalMatrix; savedMatrix.a = curMatrix.a; savedMatrix.b = curMatrix.b; savedMatrix.c = curMatrix.c; savedMatrix.d = curMatrix.d; savedMatrix.tx = curMatrix.tx; savedMatrix.ty = curMatrix.ty; offsetX = buffer.$offsetX; offsetY = buffer.$offsetY; buffer.useOffset(); buffer.transform(m.a, m.b, m.c, m.d, m.tx, m.ty); } //这里不考虑嵌套 if (blendMode) { buffer.context.setGlobalCompositeOperation(blendModes[blendMode]); } let originAlpha: number; if (alpha == alpha) { originAlpha = buffer.globalAlpha; buffer.globalAlpha *= alpha; } if (node.filter) { buffer.context.$filter = node.filter; while (pos < length) { buffer.context.drawImage(image, data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], node.imageWidth, node.imageHeight, node.rotated, node.smoothing); } buffer.context.$filter = null; } else { while (pos < length) { buffer.context.drawImage(image, data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], node.imageWidth, node.imageHeight, node.rotated, node.smoothing); } } if (blendMode) { buffer.context.setGlobalCompositeOperation(defaultCompositeOp); } if (alpha == alpha) { buffer.globalAlpha = originAlpha; } if (m) { let matrix = buffer.globalMatrix; matrix.a = savedMatrix.a; matrix.b = savedMatrix.b; matrix.c = savedMatrix.c; matrix.d = savedMatrix.d; matrix.tx = savedMatrix.tx; matrix.ty = savedMatrix.ty; buffer.$offsetX = offsetX; buffer.$offsetY = offsetY; Matrix.release(savedMatrix); } } /** * @private */ private renderMesh(node: sys.MeshNode, buffer: WebGLRenderBuffer): void { let image = node.image; //buffer.imageSmoothingEnabled = node.smoothing; let data = node.drawData; let length = data.length; let pos = 0; let m = node.matrix; let blendMode = node.blendMode; let alpha = node.alpha; let savedMatrix; let offsetX; let offsetY; if (m) { savedMatrix = Matrix.create(); let curMatrix = buffer.globalMatrix; savedMatrix.a = curMatrix.a; savedMatrix.b = curMatrix.b; savedMatrix.c = curMatrix.c; savedMatrix.d = curMatrix.d; savedMatrix.tx = curMatrix.tx; savedMatrix.ty = curMatrix.ty; offsetX = buffer.$offsetX; offsetY = buffer.$offsetY; buffer.useOffset(); buffer.transform(m.a, m.b, m.c, m.d, m.tx, m.ty); } //这里不考虑嵌套 if (blendMode) { buffer.context.setGlobalCompositeOperation(blendModes[blendMode]); } let originAlpha: number; if (alpha == alpha) { originAlpha = buffer.globalAlpha; buffer.globalAlpha *= alpha; } if (node.filter) { buffer.context.$filter = node.filter; while (pos < length) { buffer.context.drawMesh(image, data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], node.imageWidth, node.imageHeight, node.uvs, node.vertices, node.indices, node.bounds, node.rotated, node.smoothing); } buffer.context.$filter = null; } else { while (pos < length) { buffer.context.drawMesh(image, data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], data[pos++], node.imageWidth, node.imageHeight, node.uvs, node.vertices, node.indices, node.bounds, node.rotated, node.smoothing); } } if (blendMode) { buffer.context.setGlobalCompositeOperation(defaultCompositeOp); } if (alpha == alpha) { buffer.globalAlpha = originAlpha; } if (m) { let matrix = buffer.globalMatrix; matrix.a = savedMatrix.a; matrix.b = savedMatrix.b; matrix.c = savedMatrix.c; matrix.d = savedMatrix.d; matrix.tx = savedMatrix.tx; matrix.ty = savedMatrix.ty; buffer.$offsetX = offsetX; buffer.$offsetY = offsetY; Matrix.release(savedMatrix); } } private canvasRenderer: CanvasRenderer; private canvasRenderBuffer: CanvasRenderBuffer; /** * @private */ private renderText(node: sys.TextNode, buffer: WebGLRenderBuffer): void { let width = node.width - node.x; let height = node.height - node.y; if (width <= 0 || height <= 0 || !width || !height || node.drawData.length == 0) { return; } let canvasScaleX = sys.DisplayList.$canvasScaleX; let canvasScaleY = sys.DisplayList.$canvasScaleY; let maxTextureSize = buffer.context.$maxTextureSize; if (width * canvasScaleX > maxTextureSize) { canvasScaleX *= maxTextureSize / (width * canvasScaleX); } if (height * canvasScaleY > maxTextureSize) { canvasScaleY *= maxTextureSize / (height * canvasScaleY); } width *= canvasScaleX; height *= canvasScaleY; let x = node.x * canvasScaleX; let y = node.y * canvasScaleY; if (node.$canvasScaleX != canvasScaleX || node.$canvasScaleY != canvasScaleY) { node.$canvasScaleX = canvasScaleX; node.$canvasScaleY = canvasScaleY; node.dirtyRender = true; } if (!this.canvasRenderBuffer || !this.canvasRenderBuffer.context) { this.canvasRenderer = new CanvasRenderer(); this.canvasRenderBuffer = new CanvasRenderBuffer(width, height); } else if (node.dirtyRender) { this.canvasRenderBuffer.resize(width, height); } if (!this.canvasRenderBuffer.context) { return; } if (canvasScaleX != 1 || canvasScaleY != 1) { this.canvasRenderBuffer.context.setTransform(canvasScaleX, 0, 0, canvasScaleY, 0, 0); } if (x || y) { if (node.dirtyRender) { this.canvasRenderBuffer.context.setTransform(canvasScaleX, 0, 0, canvasScaleY, -x, -y); } buffer.transform(1, 0, 0, 1, x / canvasScaleX, y / canvasScaleY); } else if (canvasScaleX != 1 || canvasScaleY != 1) { this.canvasRenderBuffer.context.setTransform(canvasScaleX, 0, 0, canvasScaleY, 0, 0); } if (node.dirtyRender) { let surface = this.canvasRenderBuffer.surface; this.canvasRenderer.renderText(node, this.canvasRenderBuffer.context); // 拷贝canvas到texture let texture = node.$texture; if (!texture) { texture = buffer.context.createTexture(surface); node.$texture = texture; } else { // 重新拷贝新的图像 buffer.context.updateTexture(texture, surface); } // 保存材质尺寸 node.$textureWidth = surface.width; node.$textureHeight = surface.height; } let textureWidth = node.$textureWidth; let textureHeight = node.$textureHeight; buffer.context.drawTexture(node.$texture, 0, 0, textureWidth, textureHeight, 0, 0, textureWidth / canvasScaleX, textureHeight / canvasScaleY, textureWidth, textureHeight); if (x || y) { if (node.dirtyRender) { this.canvasRenderBuffer.context.setTransform(canvasScaleX, 0, 0, canvasScaleY, 0, 0); } buffer.transform(1, 0, 0, 1, -x / canvasScaleX, -y / canvasScaleY); } node.dirtyRender = false; } /** * @private */ private renderGraphics(node: sys.GraphicsNode, buffer: WebGLRenderBuffer, forHitTest?: boolean): void { let width = node.width; let height = node.height; if (width <= 0 || height <= 0 || !width || !height || node.drawData.length == 0) { return; } let canvasScaleX = sys.DisplayList.$canvasScaleX; let canvasScaleY = sys.DisplayList.$canvasScaleY; if (width * canvasScaleX < 1 || height * canvasScaleY < 1) { canvasScaleX = canvasScaleY = 1; } if (node.$canvasScaleX != canvasScaleX || node.$canvasScaleY != canvasScaleY) { node.$canvasScaleX = canvasScaleX; node.$canvasScaleY = canvasScaleY; node.dirtyRender = true; } //缩放叠加 width2 / width 填满整个区域 width = width * canvasScaleX; height = height * canvasScaleY; var width2 = Math.ceil(width); var height2 = Math.ceil(height); canvasScaleX *= width2 / width; canvasScaleY *= height2 / height; width = width2; height = height2; if (!this.canvasRenderBuffer || !this.canvasRenderBuffer.context) { this.canvasRenderer = new CanvasRenderer(); this.canvasRenderBuffer = new CanvasRenderBuffer(width, height); } else if (node.dirtyRender || forHitTest) { this.canvasRenderBuffer.resize(width, height); } if (!this.canvasRenderBuffer.context) { return; } if (canvasScaleX != 1 || canvasScaleY != 1) { this.canvasRenderBuffer.context.setTransform(canvasScaleX, 0, 0, canvasScaleY, 0, 0); } if (node.x || node.y) { if (node.dirtyRender || forHitTest) { this.canvasRenderBuffer.context.translate(-node.x, -node.y); } buffer.transform(1, 0, 0, 1, node.x, node.y); } let surface = this.canvasRenderBuffer.surface; if (forHitTest) { this.canvasRenderer.renderGraphics(node, this.canvasRenderBuffer.context, true); WebGLUtils.deleteWebGLTexture(surface); let texture = buffer.context.getWebGLTexture(surface); buffer.context.drawTexture(texture, 0, 0, width, height, 0, 0, width, height, surface.width, surface.height); } else { if (node.dirtyRender) { this.canvasRenderer.renderGraphics(node, this.canvasRenderBuffer.context); // 拷贝canvas到texture let texture: WebGLTexture = node.$texture; if (!texture) { texture = buffer.context.createTexture(surface); node.$texture = texture; } else { // 重新拷贝新的图像 buffer.context.updateTexture(texture, surface); } // 保存材质尺寸 node.$textureWidth = surface.width; node.$textureHeight = surface.height; } let textureWidth = node.$textureWidth; let textureHeight = node.$textureHeight; buffer.context.drawTexture(node.$texture, 0, 0, textureWidth, textureHeight, 0, 0, textureWidth / canvasScaleX, textureHeight / canvasScaleY, textureWidth, textureHeight); } if (node.x || node.y) { if (node.dirtyRender || forHitTest) { this.canvasRenderBuffer.context.translate(node.x, node.y); } buffer.transform(1, 0, 0, 1, -node.x, -node.y); } if (!forHitTest) { node.dirtyRender = false; } } private renderGroup(groupNode: sys.GroupNode, buffer: WebGLRenderBuffer): void { let m = groupNode.matrix; let savedMatrix; let offsetX; let offsetY; if (m) { savedMatrix = Matrix.create(); let curMatrix = buffer.globalMatrix; savedMatrix.a = curMatrix.a; savedMatrix.b = curMatrix.b; savedMatrix.c = curMatrix.c; savedMatrix.d = curMatrix.d; savedMatrix.tx = curMatrix.tx; savedMatrix.ty = curMatrix.ty; offsetX = buffer.$offsetX; offsetY = buffer.$offsetY; buffer.useOffset(); buffer.transform(m.a, m.b, m.c, m.d, m.tx, m.ty); } let children = groupNode.drawData; let length = children.length; for (let i = 0; i < length; i++) { let node: sys.RenderNode = children[i]; this.renderNode(node, buffer, buffer.$offsetX, buffer.$offsetY); } if (m) { let matrix = buffer.globalMatrix; matrix.a = savedMatrix.a; matrix.b = savedMatrix.b; matrix.c = savedMatrix.c; matrix.d = savedMatrix.d; matrix.tx = savedMatrix.tx; matrix.ty = savedMatrix.ty; buffer.$offsetX = offsetX; buffer.$offsetY = offsetY; Matrix.release(savedMatrix); } } /** * @private */ private createRenderBuffer(width: number, height: number): WebGLRenderBuffer { let buffer = renderBufferPool.pop(); if (buffer) { buffer.resize(width, height); } else { buffer = new WebGLRenderBuffer(width, height); buffer.$computeDrawCall = false; } return buffer; } } }