2.0.68

.gitignore

@@ -5,4 +5,5 @@ node_modules
 debug
 .vscode
 dist
-docs
\ No newline at end of file
+docs
+srcNew
\ No newline at end of file

.npmignore

@@ -21,4 +21,5 @@ adapters
 testThree
 README.md
 abandoned
-beta
\ No newline at end of file
+beta
+srcNew
\ No newline at end of file

abandoned/DrawAllToCanvas.ts

+import Texture from "../texture/Texture";
+import { Rectangle } from "../math";
+import { nextPow2 } from "./twiddle";
+import BaseTexture from "../texture/BaseTexture";
+import { createCanvas } from "./tbminiAdapte";
+
+
+const pool = [];
+let padding = 2;
+let maxSize = 4096;
+/**
+ * 用于优化webgl图集处理，暂时废弃
+ * 将所有图片画于一张canvas，返回这些图片的texture
+ * 不会计入全局缓存，有需要回调里缓存
+ * 暂时不考虑旋转图片
+ * 矩形遍历方式还有待优化，考虑是否开发属性，具体情况自行修改填充方式，还有padding
+ * @param images  基本是base64形式的图片对象集{aaa:"vasdasdasdacasfwe",bbb:"vasdasdasdacasfwe"},以后支持直接的图片标签，或链接，或canvas；
+ * @param callback 回调
+ */
+export function DrawAllToCanvas(images: any, callback) {
+    let textures = {};
+    let imagesAll = [];
+    //获取所有图片的数量
+    var countAll = Object.getOwnPropertyNames(images).length;
+    preLoad(images, (img) => {
+        imagesAll.push(img);
+        //全部加载好后
+        if (imagesAll.length == countAll) {
+            //排序,宽从小到大，高从小到大，因为时倒序放
+            imagesAll.sort(compare('width', 'height'));
+            while (imagesAll.length) {
+                //只要imagesAll中还有图片就一直执行
+                putInCanvas(imagesAll, textures)
+            }
+            callback(textures)
+        }
+    })
+}
+
+
+function preLoad(images: any, callback: Function) {
+    for (var key in images) {
+        var bitmap = images[key];
+        // let imgTag = document.createElement('img');
+        // let imgTag = new Image();
+        let backCanvas;
+        if (typeof (bitmap) == 'string') {
+            let imgTag = new Image();
+            if (bitmap.indexOf("iVBO") === 0 || bitmap.indexOf("/9j/2w") === 0) {
+                imgTag.src = 'data:image/png;base64,' + bitmap;
+            }
+            else {
+                //如果是图片链接
+                imgTag.src = bitmap;
+            }
+            imgTag["imageKey"] = key;
+            imgTag.onload = function () {
+                callback(imgTag)
+            }
+        }
+        //如果是图片标签
+        else if (bitmap instanceof HTMLImageElement) {
+            bitmap["imageKey"] = key;
+            if (bitmap.complete && bitmap.width && bitmap.height) {
+                callback(bitmap)
+            } else {
+                //还未加载
+                bitmap.onload = function () {
+                    callback(bitmap)
+                }
+            }
+        }
+        //如果是canvas
+        else if (bitmap instanceof HTMLCanvasElement) {
+            callback(bitmap)
+        }
+    }
+}
+
+function compare(name1, name2) {
+    return function (a, b) {
+        let fir1 = a[name1];
+        let sec1 = b[name1];
+        if (fir1 === sec1) {
+            let fir2 = a[name2];
+            let sec2 = b[name2];
+            if (fir2 === sec2) {
+                return 0; // 表示位置不变
+            } else {
+                return fir2 > sec2 ? 1 : -1; // 表示从大到小排序 
+            }
+        } else {
+            return fir1 > sec1 ? 1 : -1; // 表示从小到大排序
+        }
+    }
+}
+/**
+ * 合图集核心，差一点，要不要考虑图片旋转，暂时没有，如需添加，texture底层需修改
+ * @param imagesAll 
+ * @param textures 
+ */
+function putInCanvas(imagesAll, textures) {
+    //可用矩形
+    var freeRects = [];
+    //图片信息数组
+    var imageInfos: imageInfo[] = [];
+    //先初始化maxSize*maxSize
+    var canvas = createCanvas()//document.createElement('canvas');
+    canvas.width = maxSize;
+    canvas.height = maxSize;
+    //添加第一个可用矩形
+    freeRects.push(new Rectangle(0, 0, maxSize, maxSize))
+    //可变
+    var canvasWidth = 0, canvasHeight = 0
+    //先排满在canvas
+    let match = false;
+    for (var i = imagesAll.length - 1; i >= 0; i--) {
+        let img = imagesAll[i];
+        match = false
+        for (var j = freeRects.length - 1; j >= 0; j--) {
+            let freeRect = freeRects[j];
+            if (freeRect.width >= img.width + padding && freeRect.height >= img.height + padding) {
+                match = true
+                //有满足的，记录
+                var imageIn = new imageInfo(img, freeRect.x, freeRect.y)
+                imageInfos.push(imageIn)
+                //imagesAll里移除
+                imagesAll.splice(i, 1);
+                //freeRects里移除
+                freeRects.splice(j, 1);
+                //然后添加两个矩形,如果为边缘矩形，就用unshift，否则用push，因为是倒序，push的会先检测，先占用；
+                //考虑何种方式最优
+                //right
+                var restW = freeRect.width - img.width - padding
+                if (restW > 0) {
+                    var rightRect = new Rectangle(freeRect.x + img.width + padding, freeRect.y, restW, img.height + padding);
+                    freeRect.y == 0 ? freeRects.unshift(rightRect) : freeRects.push(rightRect)
+                }
+                //down
+                var restH = freeRect.height - img.height - padding
+                if (restH > 0) {
+                    var downRect = new Rectangle(freeRect.x, freeRect.y + img.height + padding, freeRect.width, restH);
+                    freeRect.x == 0 ? freeRects.unshift(downRect) : freeRects.push(downRect)
+                }
+                //修改宽高
+                // if (freeRect.x == 0) canvasHeight += (img.height + padding)
+                // if (freeRect.y == 0) canvasWidth += (img.width + padding)
+                //有任何一个imageIn的x加width大于canvasWidth就修改
+                if (imageIn.image.width + imageIn.x > canvasWidth) {
+                    canvasWidth = imageIn.image.width + imageIn.x
+                }
+                if (imageIn.image.height + imageIn.y > canvasHeight) {
+                    canvasHeight = imageIn.image.height + imageIn.y
+                }
+                break
+            }
+        }
+        //只要出现一张没放下，就break
+        if (!match) break
+    }
+    //检查canvas宽高，尽可能小
+    canvas.width = nextPow2(canvasWidth + padding);
+    canvas.height = nextPow2(canvasHeight + padding);
+    //开始绘制
+    var ctx = canvas.getContext("2d")
+    for (var m = 0; m < imageInfos.length; m++) {
+        let imageInfo = imageInfos[m];
+        let image = imageInfo.image
+        ctx.drawImage(imageInfo.image, 0, 0, image.width, image.height, imageInfo.x, imageInfo.y, image.width, image.height)
+    }
+    //查看canvas
+    // document.body.appendChild(canvas)
+    //基础纹理
+    var baseTexture = new BaseTexture(canvas);
+    //赋值所有纹理
+    for (var n = 0; n < imageInfos.length; n++) {
+        let imageInfo = imageInfos[n];
+        let image = imageInfo.image
+        //纹理imageKey
+        textures[image.imageKey] = new Texture(
+            baseTexture,
+            new Rectangle(imageInfo.x, imageInfo.y, image.width, image.height),//大图上的位置
+            new Rectangle(0, 0, image.width, image.height),//原始尺寸
+            null,
+        );
+    }
+
+}
+
+class imageInfo {
+    image: any;
+    x: number;
+    y: number;
+    constructor(image: any, x: number = 0, y: number = 0) {
+        this.image = image;
+        this.x = x;
+        this.y = y;
+
+    }
+}
+

abandoned/buildLineOld.ts

+import GraphicsData from "../GraphicsData";
+import Graphics from "../Graphics";
+import { Point } from "../../math";
+import { SHAPES } from "../../const";
+
+
+/**
+ * Builds a line to draw
+ *
+ * Ignored from docs since it is not directly exposed.
+ *
+ * @ignore
+ * @private
+ * @param {WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
+ * @param {object} webGLData - an object containing all the WebGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the WebGL-specific information to create nativeLines
+ */
+export default function (graphicsData: GraphicsData, graphicsGeometry: Graphics) {
+    // if (graphicsData.lineStyle.native)
+    // {
+    //     buildNativeLine(graphicsData, graphicsGeometry);
+    // }
+    // else
+    // {
+    buildLine(graphicsData, graphicsGeometry);
+    // }
+}
+
+/**
+ * Builds a line to draw using the polygon method.
+ *
+ * Ignored from docs since it is not directly exposed.
+ *
+ * @ignore
+ * @private
+ * @param {GraphicsData} graphicsData - The graphics object containing all the necessary properties
+ * @param {GraphicsGeometry} graphicsGeometry - Geometry where to append output
+ */
+function buildLine(graphicsData: GraphicsData, graphicsGeometry: Graphics) {
+    const shape = graphicsData.shape;
+    let points = graphicsData.points || shape.points.slice();
+
+    if (points.length === 0) {
+        return;
+    }
+    // if the line width is an odd number add 0.5 to align to a whole pixel
+    // commenting this out fixes #711 and #1620
+    // if (graphicsData.lineWidth%2)
+    // {
+    //     for (i = 0; i < points.length; i++)
+    //     {
+    //         points[i] += 0.5;
+    //     }
+    // }
+
+    const style = graphicsData.lineStyle;
+
+    // get first and last point.. figure out the middle!
+    const firstPoint = new Point(points[0], points[1]);
+    const lastPoint = new Point(points[points.length - 2], points[points.length - 1]);
+    const closedShape = shape.type !== SHAPES.POLY || shape.closed;
+    const closedPath = firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y;
+
+    // if the first point is the last point - gonna have issues :)
+    if (closedPath || closedShape) {
+        // need to clone as we are going to slightly modify the shape..
+        points = points.slice();
+
+        if (closedPath) {
+            points.pop();
+            points.pop();
+            lastPoint.set(points[points.length - 2], points[points.length - 1]);
+        }
+
+        const midPointX = lastPoint.x + ((firstPoint.x - lastPoint.x) * 0.5);
+        const midPointY = lastPoint.y + ((firstPoint.y - lastPoint.y) * 0.5);
+
+        points.unshift(midPointX, midPointY);
+        points.push(midPointX, midPointY);
+    }
+
+    const verts = graphicsGeometry.verts;
+    const length = points.length / 2;
+    let indexCount = points.length;
+    let indexStart = verts.length / 2;
+
+    // DRAW the Line
+    const width = style.width / 2;
+
+    // sort color
+    let p1x = points[0];
+    let p1y = points[1];
+    let p2x = points[2];
+    let p2y = points[3];
+    let p3x = 0;
+    let p3y = 0;
+
+    let perpx = -(p1y - p2y);
+    let perpy = p1x - p2x;
+    let perp2x = 0;
+    let perp2y = 0;
+    let perp3x = 0;
+    let perp3y = 0;
+
+    let dist = Math.sqrt((perpx * perpx) + (perpy * perpy));
+
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    const ratio = style.alignment;// 0.5;
+    const r1 = (1 - ratio) * 2;
+    const r2 = ratio * 2;
+
+    // start
+    verts.push(
+        p1x - (perpx * r1),
+        p1y - (perpy * r1));
+
+    verts.push(
+        p1x + (perpx * r2),
+        p1y + (perpy * r2));
+
+    for (let i = 1; i < length - 1; ++i) {
+        p1x = points[(i - 1) * 2];
+        p1y = points[((i - 1) * 2) + 1];
+
+        p2x = points[i * 2];
+        p2y = points[(i * 2) + 1];
+
+        p3x = points[(i + 1) * 2];
+        p3y = points[((i + 1) * 2) + 1];
+
+        perpx = -(p1y - p2y);
+        perpy = p1x - p2x;
+
+        dist = Math.sqrt((perpx * perpx) + (perpy * perpy));
+        perpx /= dist;
+        perpy /= dist;
+        perpx *= width;
+        perpy *= width;
+
+        perp2x = -(p2y - p3y);
+        perp2y = p2x - p3x;
+
+        dist = Math.sqrt((perp2x * perp2x) + (perp2y * perp2y));
+        perp2x /= dist;
+        perp2y /= dist;
+        perp2x *= width;
+        perp2y *= width;
+
+        const a1 = (-perpy + p1y) - (-perpy + p2y);
+        const b1 = (-perpx + p2x) - (-perpx + p1x);
+        const c1 = ((-perpx + p1x) * (-perpy + p2y)) - ((-perpx + p2x) * (-perpy + p1y));
+        const a2 = (-perp2y + p3y) - (-perp2y + p2y);
+        const b2 = (-perp2x + p2x) - (-perp2x + p3x);
+        const c2 = ((-perp2x + p3x) * (-perp2y + p2y)) - ((-perp2x + p2x) * (-perp2y + p3y));
+
+        let denom = (a1 * b2) - (a2 * b1);
+
+        if (Math.abs(denom) < 0.1) {
+            denom += 10.1;
+            verts.push(
+                p2x - (perpx * r1),
+                p2y - (perpy * r1));
+
+            verts.push(
+                p2x + (perpx * r2),
+                p2y + (perpy * r2));
+
+            continue;
+        }
+
+        const px = ((b1 * c2) - (b2 * c1)) / denom;
+        const py = ((a2 * c1) - (a1 * c2)) / denom;
+        const pdist = ((px - p2x) * (px - p2x)) + ((py - p2y) * (py - p2y));
+
+        if (pdist > (196 * width * width)) {
+            perp3x = perpx - perp2x;
+            perp3y = perpy - perp2y;
+
+            dist = Math.sqrt((perp3x * perp3x) + (perp3y * perp3y));
+            perp3x /= dist;
+            perp3y /= dist;
+            perp3x *= width;
+            perp3y *= width;
+
+            verts.push(p2x - (perp3x * r1), p2y - (perp3y * r1));
+
+            verts.push(p2x + (perp3x * r2), p2y + (perp3y * r2));
+
+            verts.push(p2x - (perp3x * r2 * r1), p2y - (perp3y * r1));
+
+            indexCount++;
+        }
+        else {
+            verts.push(p2x + ((px - p2x) * r1), p2y + ((py - p2y) * r1));
+
+            verts.push(p2x - ((px - p2x) * r2), p2y - ((py - p2y) * r2));
+        }
+    }
+
+    p1x = points[(length - 2) * 2];
+    p1y = points[((length - 2) * 2) + 1];
+
+    p2x = points[(length - 1) * 2];
+    p2y = points[((length - 1) * 2) + 1];
+
+    perpx = -(p1y - p2y);
+    perpy = p1x - p2x;
+
+    dist = Math.sqrt((perpx * perpx) + (perpy * perpy));
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    verts.push(p2x - (perpx * r1), p2y - (perpy * r1));
+
+    verts.push(p2x + (perpx * r2), p2y + (perpy * r2));
+
+    const indices = graphicsGeometry.indices;
+
+    // indices.push(indexStart);
+
+    for (let i = 0; i < indexCount - 2; ++i) {
+        indices.push(indexStart, indexStart + 1, indexStart + 2);
+
+        indexStart++;
+    }
+}
+
+/**
+ * Builds a line to draw using the gl.drawArrays(gl.LINES) method
+ *
+ * Ignored from docs since it is not directly exposed.
+ *
+ * @ignore
+ * @private
+ * @param {WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
+ * @param {object} webGLData - an object containing all the WebGL-specific information to create this shape
+ */
+function buildNativeLine(graphicsData, graphicsGeometry) {
+    let i = 0;
+
+    const points = graphicsData.points || graphicsData.shape.points;
+
+    if (points.length === 0) return;
+
+    const verts = graphicsGeometry.points;
+    const indices = graphicsGeometry.indices;
+    const length = points.length / 2;
+
+    let indexStart = verts.length / 2;
+    // sort color
+
+    for (i = 1; i < length; i++) {
+        const p1x = points[(i - 1) * 2];
+        const p1y = points[((i - 1) * 2) + 1];
+
+        const p2x = points[i * 2];
+        const p2y = points[(i * 2) + 1];
+
+        verts.push(p1x, p1y);
+
+        verts.push(p2x, p2y);
+
+        indices.push(indexStart++, indexStart++);
+    }
+}

build/FYGE.d.ts

-declare namespace FYGE{export  const VERSION = "2.0.67";
+declare namespace FYGE{export  const VERSION = "2.0.68";
 
 export  function cos(angle: number): number;
 
@@ -11083,7 +11083,7 @@ export  class AnimationManager extends HashObject {
      * @param name
      * @param loops 循环次数，0表示无限循环，默认0
      */
-    showAni(name: string, loops?: number, callback?: (loop: number) => void): AnimationClip;
+    showAni(name: string, loops?: number, callback?: () => void): AnimationClip;
     /**
      * 停止
      */
@@ -11783,7 +11783,7 @@ export  class SpineAniManager extends AnimationManager {
      * @param callback
      * @param mix 带这个后，上一个动画的回调可能会失效，得看过度时间，对于有某些，a动画隐藏的皮肤，b动画没有处理该插槽，需要重置去掉a动画的效果,最好别赋值mix
      */
-    showAni(name: string, loops?: number, callback?: (loop: number) => void, mix?: number): AnimationClip;
+    showAni(name: string, loops?: number, callback?: () => void, mix?: number): AnimationClip;
     update(deltaTime?: number): void;
     private applyMixingFrom;
     private resetFrom;

build/types.d.ts

-export  const VERSION = "2.0.67";
+export  const VERSION = "2.0.68";
 
 export  function cos(angle: number): number;
 
@@ -11083,7 +11083,7 @@ export  class AnimationManager extends HashObject {
      * @param name
      * @param loops 循环次数，0表示无限循环，默认0
      */
-    showAni(name: string, loops?: number, callback?: (loop: number) => void): AnimationClip;
+    showAni(name: string, loops?: number, callback?: () => void): AnimationClip;
     /**
      * 停止
      */
@@ -11783,7 +11783,7 @@ export  class SpineAniManager extends AnimationManager {
      * @param callback
      * @param mix 带这个后，上一个动画的回调可能会失效，得看过度时间，对于有某些，a动画隐藏的皮肤，b动画没有处理该插槽，需要重置去掉a动画的效果,最好别赋值mix
      */
-    showAni(name: string, loops?: number, callback?: (loop: number) => void, mix?: number): AnimationClip;
+    showAni(name: string, loops?: number, callback?: () => void, mix?: number): AnimationClip;
     update(deltaTime?: number): void;
     private applyMixingFrom;
     private resetFrom;

package.json

 {
     "name": "fyge",
-    "version": "2.0.67",
+    "version": "2.0.68",
     "description": "canvas渲染引擎",
     "main": "./build/fyge.min.js",
     "module": "./build/fyge.esm.js",

record.txt

@@ -605,8 +605,15 @@
         AnimationNode的play方法新增第三个参数isFront，为了play可以按次数倒放
         AnimationNode的声明方法startAniRange修改了参数可传可不传
 
-
-
+2.0.68  AnimationManager的showAni的callback回调函数去掉参数loop
+        TextureManager的updateTexture方法里glTexture.premultiplyAlpha赋值texture.premultipliedAlpha
+        D3Renderer的onContextChange方法里打开floatVertexTextures注释
+        D3Renderer的flush方法里对于boneTexture的处理
+            var boneTexture = new BaseTexture({ _data: boneMatrices, width: size, height: size });
+            boneTexture.mipmap = false;
+            boneTexture.scaleMode = SCALE_MODES.NEAREST;
+            boneTexture.premultipliedAlpha = false;
+        SpineAniManager的showAni的callback回调函数去掉参数loop
 
 
 getElementsByName到时要处理下

src/2d/AnimationManager.ts

@@ -37,7 +37,7 @@ export class AnimationManager extends HashObject {
      * @param name 
      * @param loops 循环次数，0表示无限循环，默认0
      */
-    showAni(name: string, loops: number = 0, callback?: (loop: number) => void): AnimationClip {
+    showAni(name: string, loops: number = 0, callback?: () => void): AnimationClip {
         var clip = this.getAniClipByName(name)
         if (!clip) return null;
         //因为正在播放的动画会影响其他动画的初始状态，必须先重置

src/2d/const.ts

@@ -7,7 +7,7 @@
  * @name VERSION
  * @type {string}
  */
-export const VERSION = "2.0.67";
+export const VERSION = "2.0.68";
 
 
 /**

src/2d/renderers/managers/TextureManager.ts

@@ -196,7 +196,7 @@ export default class TextureManager {
                 glTexture = new GLTexture(this.gl, null, null, null, null);
                 //之前已经active过了，upload里也有bind，这里也许不用执行
                 // glTexture.bind(location);
-                glTexture.premultiplyAlpha = true;
+                glTexture.premultiplyAlpha = (texture as BaseTexture).premultipliedAlpha;
                 if (texture.source._data) {//是data形式
                     glTexture.uploadData(texture.source._data, texture.width, texture.height)
                 } else {

src/3d/D3Renderer.ts

@@ -8,7 +8,7 @@ import { BaseShader } from "./shaders/BaseShader";
 import { LightShader } from "./shaders/LightShader";
 import { hex2rgb, rgb2hex, Dict } from "../2d/utils";
 import { Matrix4 } from "./math/Matrix4";
-import { BLEND_MODES } from "../2d/const";
+import { BLEND_MODES, SCALE_MODES } from "../2d/const";
 import { BatchBuffer } from "../2d/renderers/webgl/BatchBuffer";
 import { BaseMaterial, RenderSideType } from "./materials/BaseMaterial";
 import { getCusShader } from "./shaders/getCusShader";
@@ -65,7 +65,7 @@ export class D3Renderer extends ObjectRenderer {
         var vertexTextures = maxVertexTextures > 0;
         var floatFragmentTextures = !!gl.getExtension("OES_texture_float");
         //传入的数据纹理暂时有问题，是UNPACK_ALIGNMENT还是UNPACK_FLIP_Y_WEBGL的问题未知，所以不管先
-        this.floatVertexTextures = false//vertexTextures && floatFragmentTextures;
+        this.floatVertexTextures = vertexTextures && floatFragmentTextures;
     }
     start() {
         //设置3d状态机属性
@@ -281,8 +281,10 @@ export class D3Renderer extends ObjectRenderer {
                                 size = Math.max(size, 4);
                                 var boneMatrices = new Float32Array(size * size * 4); // 4 floats per RGBA pixel
                                 boneMatrices.set(skeleton.boneMatrices); // copy current values
-                                var boneTexture = new BaseTexture({ data: boneMatrices, width: size, height: size });
+                                var boneTexture = new BaseTexture({ _data: boneMatrices, width: size, height: size });
                                 boneTexture.mipmap = false;
+                                boneTexture.scaleMode = SCALE_MODES.NEAREST;
+                                boneTexture.premultipliedAlpha = false;
                                 skeleton.boneMatrices = boneMatrices;
                                 skeleton.boneTexture = boneTexture;
                                 skeleton.boneTextureSize = size;

src/spine/SpineAniManager.ts

@@ -48,7 +48,7 @@ export class SpineAniManager extends AnimationManager {
      * @param callback 
      * @param mix 带这个后，上一个动画的回调可能会失效，得看过度时间，对于有某些，a动画隐藏的皮肤，b动画没有处理该插槽，需要重置去掉a动画的效果,最好别赋值mix
      */
-    showAni(name: string, loops: number = 0, callback?: (loop: number) => void, mix: number = 0) {
+    showAni(name: string, loops: number = 0, callback?: () => void, mix: number = 0) {
         //如果不设置过度
         if (!mix || !this.currentClip) {
             return super.showAni(name, loops, callback)