javascript js WebGL WebGL2 後期處理特效之點選水波紋漣漪例子

先來看結果圖(轉.gif掉幀了):

完整原始碼分享網址: https://share.weiyun.com/Vpkp5KP3

1 首先初始化用到的所有圖片:

const images = [
    "./img/girls.jpg",
    "./img/ball.png",
    "./img/water.jpg", 
    "./img/spriteX8.png",

    //8張雪碧圖, 在main()中合成一張圖
    "./img/sprites/0.png",
    "./img/sprites/1.png",
    "./img/sprites/2.png",
    "./img/sprites/3.png",
    "./img/sprites/4.png",
    "./img/sprites/5.png",
    "./img/sprites/6.png",
    "./img/sprites/7.png",
]

{ //init images
    let len = 0;
    for(let i = 0; i < images.length; i++) {
        const image = new Image();
        image.onload = () => {
            if(len++ === images.length - 1) main();
        }
        image.src = images[i];
        images[i] = image;
    }
}

2 初始化渲染器

const renderer = new Renderer();
renderer.setSize();
document.body.appendChild(renderer.domElement);
console.log(renderer);

3 先往渲染器裡面丟一個背景

const background = new Object2D(new GeometryRect(innerWidth, innerHeight), new Material(new Texture(images[0], FormatRGB), false));
renderer.append(background);

3 再往渲染器丟一個例項化版本的雪碧圖(精靈圖)

//將上面載入好的0-7張圖打包成一張圖
const si = 4, len = 8;
const context = ElementUtils.createContext(images[si].width * len, images[si].height, true);
for(let i = 0; i < len; i++){
    context.drawImage(images[i+si], images[i+si].width * i, 0);
}


//建立 InstancedSprite 例項化雪碧圖
const instancedSprite = new InstancedSprite(
    new GeometryRect(images[si].width, context.canvas.height), 
    new Material(new Texture(context.canvas, FormatRGBA), true),
    2, false, len, 0
);


//初始化所有例項(2個)的位置
for(let i = 0; i < instancedSprite.len; i++){
    instancedSprite.translateI(i, instancedSprite.geometry.width * i, 0);
}


//
renderer.append(instancedSprite);


//補間 每 120 毫秒更換一次
const instancedSpriteTween = new TweenCache({x: 0}, {x: 1}, 120, () => { 
    instancedSprite.offset += 1;
    instancedSpriteTween.reverse();
    instancedSpriteTween.start();
}, true);

4 建立後期處理(就是水波紋特效)

const imageSource = new ImageSource(renderTargetGeometry.width, renderTargetGeometry.height, null); //第三個引數必須為null

const renderTargetGeometry = new GeometryRect(renderer.domElement.width, renderer.domElement.height);

const renderTargetMaterial = new MaterialShader({

    vertexCode: defaultShaderCode.texture1.vertex, //使用預設的頂點著色器
        
        //水波紋主要實現程式碼(原理很簡單就是偏移uv座標): 
    fragmentCode: `#version 300 es
        precision mediump float; //highp, mediump, lowp
        uniform vec2 uSize;
        uniform sampler2D uImage;
        uniform vec2 uOrigin;
        uniform vec2 uRange;
        uniform float uScale;
        uniform float uLife;
        uniform float uTime;
        in vec2 vPos;

        out vec4 outColor;
        const float PI = 3.141592653589793;
        vec2 uv;

        float atan2(float y, float x) {
            if(x > 0.0){return atan(y / x);}
            if(x < 0.0){
                if(y >= 0.0){return atan(y / x) + PI;}
                return atan(y / x) - PI;
            }
            if(y > 0.0){return PI;}
            if(y < 0.0){return -PI;}
            return 0.0;
        }

        void main() {
            vec2 newPos = vPos - uOrigin;
            float _d = newPos.x * newPos.x + newPos.y * newPos.y;
            if(_d < 0.001 || _d < uRange.x * uRange.x || _d > uRange.y * uRange.y){
                uv = vPos / uSize;
                uv.y = 1.0 - uv.y;
                outColor = texture(uImage, uv);
            } else {
                float s = sqrt(_d);
                float d = (1.0 - uScale) * s;
                float r = atan2(vPos.y, vPos.x);
                vec2 uv = (vPos + ((1.0 - s / uRange.y) * uLife) * vec2(cos(r) * sin(d - uTime) / d, sin(r) * sin(d - uTime) / d)) / uSize;
                uv.y = 1.0 - uv.y;
                outColor = texture(uImage, uv);
            }
        }
    `,

    uniforms: {
        uImage: new Texture(imageSource),
        uOrigin: [innerWidth / 2, innerHeight / 2], //擴散原點
        uRange: [1, 200], //0: 擴散最小半徑, 1: 擴散最大半徑;
        uScale: 0.6, //值越大波就越寬
        uLife: 200, //值越大起伏就越大
        uTime: 0,
    },
});

//把 Object2D 當作渲染目標
renderer.createRenderTarget(new Object2D(renderTargetGeometry, renderTargetMaterial));

5 螢幕點選事件

var isRenderTarget = false;

const renderTargetTween = new TweenCache({x: 0, y: 0}, {x: 0, y: 0}, 1000, () => isRenderTarget = false);

renderer.domElement.addEventListener("click", e => {
        //重置水波紋的擴散原點
    renderTargetMaterial.uniforms.uOrigin[0] = e.offsetX;
    renderTargetMaterial.uniforms.uOrigin[1] = e.offsetY;

        //重置水波紋的style
    renderTargetTween.origin.x = 200;
    renderTargetTween.origin.y = 0.6;
    renderTargetTween.end.x = 0;
    renderTargetTween.end.y = 0;

        //允許在動畫迴圈中繪製水波紋
    renderTargetTween.start();
    isRenderTarget = true;
});

6 動畫迴圈

//loop
new AnimateLoop(() => {
        //更新例項雪碧圖的Tween
    instancedSpriteTween.update();

        //渲染器的正常繪製
    if(isRenderTarget === false) renderer.redraw();

    else {
        //繪製後期處理(水波紋特效)
        renderTargetTween.update();
        renderTargetMaterial.uniforms.uLife = renderTargetTween.origin.x;
        renderTargetMaterial.uniforms.uTime += renderTargetTween.origin.y;
        renderer.redrawRenderTarget();
    }
}).play();

//完整原始碼分享網址: https://share.weiyun.com/Vpkp5KP3

import { Box, Matrix3, Vector2 } from './Utils.js';
import { Shape, ShapeUtils, SplineCurve } from './TwoUtils.js';

const BlendEquationAdd = [0, -1];

const BlendDefault = [6, 7, -1, -1],
BlendAdd = [1, 1, -1, -1],
BlendSub = [0, 3, 0, 1],
BlendMultiply = [0, 2, 0, 6];

const ModePoints = "POINTS",
ModeLineStrip = "LINE_STRIP",
ModeLineLoop = "LINE_LOOP",
ModeLines = "LINES",
ModeTriangleStrip = "TRIANGLE_STRIP",
ModeTriangleFan = "TRIANGLE_FAN",
ModeTriangles = "TRIANGLES";

const FormatAlpha = 0,
FormatLuminance = 2,
FormatLuminanceAlpha = 4,
FormatRGB = 12,
FormatRGBA = 14;

const PixelStoreiFlipY = 2,
PixelStoreiPremultiplyAlpht = 3;


/* test defaultShaderCode.texture2_blend
    const geometry = new GeometryRect(200, 200); //二維的矩形

    const sstruet = new Structure({
        vertexCode: defaultShaderCode.texture2_blend.vertex,
        fragmentCode: defaultShaderCode.texture2_blend.fragment,

        attributes: {
            aPos: new Attribute(2, geometry.vertices),
        },

        uniforms: {
            uPMat: renderer.projectionMatrix,
            uMat: new Matrix3().translate(100, 100).toArray(), 
            uSampler: images[2], //不透明的背景圖
            uSampler1: images[4], //透明的圓球
            opacity: 1,
            ratio: 0.5,
            uSize: [geometry.width, geometry.height],
        },

        indices: geometry.indices,
    });

    renderer.append(sstruet).redraw();
*/

/* test defaultShaderCode.texture2_after
    const geometry = new GeometryRect(200, 200); //二維的矩形

    const sstruet = new Structure({
        vertexCode: defaultShaderCode.texture2_after.vertex,
        fragmentCode: defaultShaderCode.texture2_after.fragment,

        attributes: {
            aPos: new Attribute(2, geometry.vertices),
        },

        uniforms: {
            uPMat: renderer.projectionMatrix,
            uMat: new Matrix3().translate(100, 100).toArray(), 
            uSampler: images[2],
            uSampler1: images[3], 
            damp: 1,
            uSize: [geometry.width, geometry.height],
        },

        indices: geometry.indices,
    });

    renderer.append(sstruet).redraw();
*/

/* test defaultShaderCode.texture2_WaterRefract
    const geometry = new GeometryRect(innerWidth, innerHeight); //二維的矩形
    const sstruet = new Structure({
        vertexCode: defaultShaderCode.texture2_WaterRefract.vertex,
        fragmentCode: defaultShaderCode.texture2_WaterRefract.fragment,

        attributes: {
            aPos: new Attribute(2, geometry.vertices),
        },

        uniforms: {
            uPMat: renderer.projectionMatrix,
            uMat: new Matrix3().toArray(), 
            textureMatrix: new Matrix3().toArray(), 
            uSampler: images[5], //waterColor.jpg
            uSampler1: images[5], //waterNormal.jpg
            uColor: [0, 0.5, 0], //綠色
            uTime: 0,
            uSize: [geometry.width, geometry.height],
        },

        indices: geometry.indices,
    });

    function loop() {
        sstruet.uniforms.uTime -= 0.05;
        renderer.redraw();
    }

    renderer.append(sstruet);
    new AnimateLoop(loop).play();
*/


const defaultShaderCode = {
    color_v4: {
        vertex: `
            attribute vec2 aPos;
            uniform mat3 uPMat;
            uniform mat3 uMat;
            void main() {
                gl_Position.xyz = uPMat * uMat * vec3(aPos, 1.0);
                gl_Position.w = 1.0;
            }
        `,
        fragment: `
            precision mediump float; //highp, mediump, lowp
            uniform vec4 uColor;
            void main() {
                gl_FragColor = uColor;
            }
        `,
    },
    texture1: {
        vertex: `#version 300 es
            in vec2 aPos;
            uniform mat3 uPMat;
            uniform mat3 uMat;
            out vec2 vPos;
            void main() {
                vPos = aPos;
                gl_Position.xyz = uPMat * uMat * vec3(aPos, 1.0);
                gl_Position.w = 1.0;
            }
        `,
        fragment: `#version 300 es
            precision mediump float; //highp, mediump, lowp
            uniform sampler2D uImage;
            uniform vec2 uSize;
            in vec2 vPos;
            out vec4 outColor;
            void main() {
                outColor = texture(uImage, vPos / uSize);
            }
        `,
    },
    texture1_sprite: {
        vertex: `#version 300 es
            in vec2 aPos;
            uniform mat3 uPMat;
            uniform mat3 uMat;
            out vec2 vPos;
            void main() {
                vPos = aPos;
                gl_Position.xyz = uPMat * uMat * vec3(aPos, 1.0);
                gl_Position.w = 1.0;
            }
        `,
        fragment: `#version 300 es
            precision mediump float; //highp, mediump, lowp
            uniform sampler2D uImage;
            uniform float uLen;
            uniform float uOffset;
            uniform vec2 uSize;
            in vec2 vPos;
            out vec4 outColor;
            void main() {
                outColor = texture(uImage, vec2(vPos.x / (uSize.x * uLen) + 1.0 / uLen * uOffset, vPos.y / uSize.y));
            }
        `,
    },
    texture1_Instanced: {
        vertex: `#version 300 es
            in vec2 aPos;
            in mat3 uIMat;
            uniform mat3 uPMat;
            uniform mat3 uMat;
            out vec2 vPos;
            void main() {
                vPos = aPos;
                gl_Position.xyz = uPMat * uMat * uIMat * vec3(aPos, 1.0);
                gl_Position.w = 1.0;
            }
        `,
        fragment: `#version 300 es
            precision mediump float; //highp, mediump, lowp
            uniform sampler2D uImage;
            uniform vec2 uSize;
            in vec2 vPos;
            out vec4 outColor;
            void main() {
                outColor = texture(uImage, vPos / uSize);
            }
        `,
    },
    texture1_Instanced_points: {
        vertex: `#version 300 es
            in vec2 aPos;
            in mat3 uIMat;
            uniform mat3 uPMat;
            uniform mat3 uMat;
            uniform float uSize;
            void main() {
                gl_Position.xyz = uPMat * uMat * uIMat * vec3(aPos, 1.0);
                gl_Position.w = 1.0;
                gl_PointSize = uSize;
            }
        `,
        fragment: `#version 300 es
            precision mediump float; //highp, mediump, lowp
            uniform sampler2D uImage;
            out vec4 outColor;
            void main() {
                outColor = texture(uImage, gl_PointCoord.xy);
            }
        `,
    },
    texture1_Instanced_sprite: {
        vertex: `#version 300 es
            in vec2 aPos;
            in mat3 uIMat;
            uniform mat3 uPMat;
            uniform mat3 uMat;
            out vec2 vPos;
            void main() {
                vPos = aPos;
                gl_Position.xyz = uPMat * uMat * uIMat * vec3(aPos, 1.0);
                gl_Position.w = 1.0;
            }
        `,
        fragment: `#version 300 es
            precision mediump float; //highp, mediump, lowp
            uniform sampler2D uImage;
            uniform float uLen;
            uniform float uOffset;
            uniform vec2 uSize;
            in vec2 vPos;
            out vec4 outColor;
            void main() {
                outColor = texture(uImage, vec2(vPos.x / (uSize.x * uLen) + 1.0 / uLen * uOffset, vPos.y / uSize.y));
            }
        `,
    },
    texture1_fog: {
        vertex: `
            attribute vec2 aPos;
            uniform mat3 uPMat;
            uniform mat3 uMat;
            varying vec2 vPos;
            void main() {
                vPos = aPos;
                gl_Position.xyz = uPMat * uMat * vec3(aPos, 1.0);
                gl_Position.w = 1.0;
            }
        `,
        fragment: `
            precision mediump float; //highp, mediump, lowp
            uniform sampler2D uSampler;
            uniform vec4 uFogColor;
            uniform float uFogAmount;
            uniform vec2 uSize;
            varying vec2 vPos;
            void main() {
                gl_FragColor = mix(texture2D(uSampler, vPos / uSize), uFogColor, uFogAmount);
            }
        `,
    },
    texture1_brightContrast: { //亮度對比度
        vertex: `
            attribute vec2 aPos;
            uniform mat3 uPMat;
            uniform mat3 uMat;
            varying vec2 vPos;
            void main() {
                vPos = aPos;
                gl_Position.xyz = uPMat * uMat * vec3(aPos, 1.0);
                gl_Position.w = 1.0;
            }
        `,
        fragment: `
            precision mediump float; //highp, mediump, lowp
            uniform sampler2D uSampler;
            uniform float bright;
            uniform float contrast;
            uniform vec2 uSize;
            varying vec2 vPos;
            void main() {
                gl_FragColor = texture2D(uSampler, vPos / uSize);
                gl_FragColor.rgb += bright;
                if(contrast > 0.0){
                    gl_FragColor.rgb = (gl_FragColor.rgb - 0.5) / (1.0 - contrast) + 0.5;
                } else {
                    gl_FragColor.rgb = (gl_FragColor.rgb - 0.5) * (1.0 + contrast) + 0.5;
                }
            }
        `,
    },
    texture1_color_ifv3: {
        vertex: `
            attribute vec2 aPos;
            uniform mat3 uPMat;
            uniform mat3 uMat;
            varying vec2 vPos;
            void main() {
                vPos = aPos;
                gl_Position.xyz = uPMat * uMat * vec3(aPos, 1.0);
                gl_Position.w = 1.0;
            }
        `,
        fragment: `
            precision mediump float; //highp, mediump, lowp
            uniform sampler2D uSampler;
            uniform vec3 uColor;
            uniform vec2 uSize;
            varying vec2 vPos;
            void main() {
                vec4 tex = texture2D(uSampler, vPos / uSize);
                gl_FragColor = vec4(dot(tex.xyz, vec3(0.299, 0.587, 0.114)) * uColor, tex.w);
            }
        `,
    },
    texture2_blend: {
        vertex: `
            attribute vec2 aPos;
            uniform mat3 uPMat;
            uniform mat3 uMat;
            varying vec2 vPos;
            void main() {
                vPos = aPos;
                gl_Position.xyz = uPMat * uMat * vec3(aPos, 1.0);
                gl_Position.w = 1.0;
            }
        `,
        fragment: `
            precision mediump float; //highp, mediump, lowp
            uniform sampler2D uSampler;
            uniform sampler2D uSampler1;
            uniform float opacity;
            uniform float ratio;
            uniform vec2 uSize;
            varying vec2 vPos;
            void main() {
                vec2 uv = vPos / uSize;
                gl_FragColor = opacity * mix(texture2D(uSampler, uv), texture2D(uSampler1, uv), ratio);
            }
        `,
    },
    texture2_after: {
        vertex: `
            attribute vec2 aPos;
            uniform mat3 uPMat;
            uniform mat3 uMat;
            varying vec2 vPos;
            void main() {
                vPos = aPos;
                gl_Position.xyz = uPMat * uMat * vec3(aPos, 1.0);
                gl_Position.w = 1.0;
            }
        `,
        fragment: `
            precision mediump float; //highp, mediump, lowp
            uniform sampler2D uSampler;
            uniform sampler2D uSampler1;
            uniform float damp;
            uniform vec2 uSize;
            varying vec2 vPos;
            vec4 when_gt(vec4 x, float y) {
                return max(sign(x - y), 0.0);
            }
            void main() {
                vec2 uv = vPos / uSize;
                vec4 tex = texture2D(uSampler, uv);
                tex *= damp * when_gt(tex, 0.1);
                gl_FragColor = max(texture2D(uSampler1, uv), tex);
            }
        `,
    },
    texture2_WaterRefract: { //水折射
        vertex: `
            attribute vec2 aPos;
            uniform mat3 uPMat;
            uniform mat3 uMat;
            varying vec2 vPos;

            uniform mat3 textureMatrix;
            varying vec3 vUvRefraction;

            void main() {
                vPos = aPos;
                vec3 pos = vec3(aPos, 1.0);
                vUvRefraction = textureMatrix * pos;
                gl_Position.xyz = uPMat * uMat * pos;
                gl_Position.w = 1.0;
            }
        `,
        fragment: `
            precision mediump float; //highp, mediump, lowp
            uniform sampler2D uSampler;
            uniform sampler2D uSampler1;
            uniform vec3 uColor;
            uniform float uTime;
            uniform vec2 uSize;
            varying vec2 vPos;
            
            varying vec3 vUvRefraction;

            float blendOverlay(float base, float blend) {
                return(base < 0.5 ? (2.0 * base * blend) : (1.0 - 2.0 * (1.0 - base) * (1.0 - blend)));
            }

            vec3 blendOverlay(vec3 base, vec3 blend) {
                return vec3(blendOverlay(base.r, blend.r), blendOverlay(base.g, blend.g),blendOverlay(base.b, blend.b));
            }

            void main() {
                vec2 uv = vPos / uSize;
                float waveStrength = 0.5;
                float waveSpeed = 0.03;

                // simple distortion (ripple) via dudv map (see https://www.youtube.com/watch?v=6B7IF6GOu7s)

                vec2 distortedUv = texture2D(uSampler1, vec2(uv.x + uTime * waveSpeed, uv.y)).rg * waveStrength;
                distortedUv = uv.xy + vec2(distortedUv.x, distortedUv.y + uTime * waveSpeed);
                vec2 distortion = (texture2D(uSampler1, distortedUv).rg * 2.0 - 1.0) * waveStrength;

                // new vUvRef coords

                vec4 vUvRef = vec4(vUvRefraction, 1.0);
                vUvRef.xy += distortion;

                vec4 base = texture2DProj(uSampler, vUvRef);

                gl_FragColor = vec4(blendOverlay(base.rgb, uColor), 1.0);

                //#include <tonemapping_fragment>
                //#include <colorspace_fragment>
            }
        `,
    },
}

//返回是否時可用畫素源
function isPixelSource(source) {
    /* TypeArray: 
        Uint8Array 如果 type 是 gl.UNSIGNED_BYTE則必須使用
        Uint16Array 如果 type 是 gl.UNSIGNED_SHORT_5_6_5, gl.UNSIGNED_SHORT_4_4_4_4, gl.UNSIGNED_SHORT_5_5_5_1, gl.UNSIGNED_SHORT 或ext.HALF_FLOAT_OES則必須使用
        Uint32Array 如果type 是 gl.UNSIGNED_INT 或ext.UNSIGNED_INT_24_8_WEBGL則必須使用
        Float32Array 如果type 是 gl.FLOAT則必須使用
    */
    return ImageData.prototype.isPrototypeOf(source) ||
    ImageBitmap.prototype.isPrototypeOf(source) ||
    HTMLImageElement.prototype.isPrototypeOf(source) || 
    HTMLCanvasElement.prototype.isPrototypeOf(source) || 
    HTMLVideoElement.prototype.isPrototypeOf(source);
}

//翻轉 points: [x, y, x1, y1, ...] => [x1, y1, x, y, ...];
function reversePoints(points = [0, 0, 0, 0]) {
    for(let i = 0, j = points.length - 1; i < j; i += 2, j -= 2){
        points[i] = points[j-1];
        points[i+1] = points[j];
        points[j] = points[i+1];
        points[j-1] = points[i];
    }
    return points;
}

//value 是否是2的冪
function isPowerOf2(value) {
    return (value & (value - 1)) === 0;
}

//array 的某個元素如果超出 Uint16Array 範圍則立即返回true
function arrayNeedsUint32( array ) {
    // assumes larger values usually on last
    for ( let i = array.length - 1; i >= 0; -- i ) {
        if ( array[ i ] >= 65535 ) return true; // account for PRIMITIVE_RESTART_FIXED_INDEX, #24565
    }
    return false;
}

//平移頂點
function translateVertices(vertices, count, x, y) {
    for(let i = 0; i < vertices.length; i += count){
        vertices[i] += x;
        vertices[i + 1] += y;
    }
}

//計算包圍盒
function computeBBox(vertices, count) {
    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
    for(let i = 0, x, y; i < vertices.length; i += count){
        x = vertices[i];
        y = vertices[i + 1];
        minX = Math.min(x, minX);
        minY = Math.min(y, minY);
        maxX = Math.max(x, maxX);
        maxY = Math.max(y, maxY);
    }
    return {x: minX, y: minY, x1: maxX, y1: maxY}
}

/**
 * @returns {WebGL2RenderingContext}
 */
function createWebGL2(contextOption = Renderer.contextOption, glOption = Renderer.glOption){
    const canvas = document.createElement("canvas");
    const gl = canvas.getContext("webgl2", contextOption);
    //gl.viewport(0, 0, width, height);
    
    const clearColor = glOption.clearColor || {r: 0.45, g: 0.45, b: 0.45, a: 1}
    gl.clearColor(Math.min(clearColor.r, 1), Math.min(clearColor.g, 1), Math.min(clearColor.b, 1), Math.min(clearColor.a, 1)); //清除顏色: r, g, b, a: 0 - 1; 對應 .clear(COLOR_BUFFER_BIT)
    //gl.clear(gl.COLOR_BUFFER_BIT); //COLOR_BUFFER_BIT //顏色緩衝區 gl.DEPTH_BUFFER_BIT //深度緩衝區 STENCIL_BUFFER_BIT //模板緩衝區
    //gl.getParameter(gl.COLOR_CLEAR_VALUE); //要獲得當前的清除值，傳入 COLOR_CLEAR_VALUE, DEPTH_CLEAR_VALUE 或 STENCIL_CLEAR_VALUE 常量

    //gl.enable(gl.DEPTH_TEST); //啟用深度 對應 .clear(DEPTH_BUFFER_BIT)
    //gl.depthFunc(gl.LEQUAL); // Near things obscure far things 近覆蓋遠
    //gl.clearDepth(1); // 設定深度緩衝區的值（0-1），預設為1
    
    //gl.clearStencil(1) //設定模板緩衝區的值（0或1），預設0; 對應 .clear(STENCIL_BUFFER_BIT);

    //gl.enable(gl.SCISSOR_TEST); //開啟剪裁
    //gl.scissor(x, y, width, height); //設定剪裁區域

    //gl.colorMask(true, true, true, false); //禁啟用: 紅色通道, 綠色通道, 藍色通道, 透明度(如果為false則不會繪製任何顏色即完全透明);

    //混合
    //gl.enable(gl.BLEND);  // 啟用混合, 預設透明部分用背景色覆蓋
    //gl.blendEquation(gl.FUNC_ADD);
    
    //gl.blendFunc(gl.ONE, gl.ONE); //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    //gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); //將所有顏色乘以源 alpha 值, 將所有顏色乘以 1 減去源 alpha 值。
    //gl.disable(gl.BLEND); //禁用混合
    //gl.getParameter(gl.BLEND_SRC_RGB) == gl.SRC_COLOR;
    //混合畫素的方法:

    //gl.drawElements(gl.TRIANGLES, obj2d.geometry.indices.length, gl.UNSIGNED_SHORT, 0); //gl.UNSIGNED_BYTE, gl.UNSIGNED_SHORT
    //gl.drawArrays(mode, 0, geo.vertices.length / geo.vertexCount);
    return gl;
}

function initExtensions(gl) {
    // 啟用了抗鋸齒
    if(Renderer.contextOption.antialias === true && !gl.getContextAttributes().antialias && gl.getExtension('WEBGL_multisample_2d_canvas')) {
        gl.sampleCoverage = true;
        gl.enable(gl.SAMPLE_ALPHA_TO_COVERAGE);
    }

    //擴充套件 WEBGL_multi_draw 
    /* const WEBGL_multi_draw = gl.getExtension('WEBGL_multi_draw');
    if (WEBGL_multi_draw) {
        var multiDrawElementsWEBGL = gl.multiDrawElementsWEBGL.bind(gl);
        // 準備你要繪製的元素的資訊
        var counts = []; //每個draw call的元素數量
        var offsets = []; //每個draw call的起始偏移
        // 呼叫 multiDrawElementsWEBGL 方法
        multiDrawElementsWEBGL(gl.TRIANGLES, counts, gl.UNSIGNED_SHORT, offsets);
    } */
}

function createShader(gl, program, type, code) {
    const shader = gl.createShader(type); //建立著色器
    gl.shaderSource(shader, code); //繫結資料來源
    gl.compileShader(shader); //編譯著色器
    gl.attachShader(program, shader); //繫結著色器
    if(gl.getShaderParameter(shader, gl.COMPILE_STATUS) === false){
        console.error(type, gl.getShaderInfoLog(shader), code);
        gl.deleteShader(shader);
    }
    return shader;
}

function createProgram(gl, vertexShaderCode, fragmentShaderCode) {
    if(!gl) return null;
    const program = gl.createProgram();
    const vertexShader = createShader(gl, program, gl.VERTEX_SHADER, vertexShaderCode);
    const fragmentShader = createShader(gl, program, gl.FRAGMENT_SHADER, fragmentShaderCode);
    
    gl.linkProgram(program); //連線頂點著色器與片元著色器
    if(gl.getProgramParameter(program, gl.LINK_STATUS) === false){
        console.error(gl.getProgramInfoLog(program));
        gl.deleteProgram(program);
        return null;
    }
    
    return {
        program: program,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
    };
}

function compileUniform(gl, loc, n, v, t) {
    //number
    switch(typeof v[n]){
        case "number": 
        return () => gl.uniform1f(loc, v[n]);

        case "object": 
        break;

        default: return function(){};
    }

    //vec2, vec3, vec4, Matrix3x3, Matrix4x4
    if(Array.isArray(v[n]) === true){
        switch(v[n].length){
            case 2: 
            return () => gl.uniform2f(loc, v[n][0], v[n][1]);
    
            case 3: 
            return () => gl.uniform3f(loc, v[n][0], v[n][1], v[n][2]);
            
            case 4: 
            return () => gl.uniform4f(loc, v[n][0], v[n][1], v[n][2], v[n][3]);
    
            case 9: 
            return () => gl.uniformMatrix3fv(loc, false, v[n]);
    
            case 16: 
            return () => gl.uniformMatrix4fv(loc, false, v[n]);
        }
    }

    //Material
    /* if(Material.prototype.isPrototypeOf(v[n]) === true){
        const i = t.length, 
        obj = {
            texture: gl.createTexture(), 
            source: v[n], 
            index: gl["TEXTURE"+i], 
            needupdate: false,
        };

        t[i] = obj;
        gl.activeTexture(obj.index);
        gl.bindTexture(gl.TEXTURE_2D, obj.texture);
        
        const material = v[n];
        obj.update = () => {
            if(material.source !== null) updateTexture(gl, material);
        }
        Object.defineProperties(obj, {
            source: {get: () => {return material.source;}},
            needupdate: {get: () => {return material.needupdate;}},
        });
        obj.update();
        return () => gl.uniform1i(loc, i);
    } */

    //Attribute
    if(Attribute.prototype.isPrototypeOf(v[n]) === true){
        switch(v[n].size){
            case 1: 
            return () => gl.uniform1fv(loc, v[n].value);

            case 2: 
            return () => gl.uniform2fv(loc, v[n].value);

            case 3: 
            return () => gl.uniform3fv(loc, v[n].value);

            case 4: 
            return () => gl.uniform4fv(loc, v[n].value);
        }
    }

    return function(){};
}

function compileBuffer(gl, loc, att) {
    const obj = {
        vao: gl.createVertexArray(),
        buffer: gl.createBuffer(),
        size: att.size,
        //loc: loc, //如果著色器中沒有用到這個變數就會返回-1
        value: att.value,
    }

    gl.bindVertexArray(obj.vao);
    gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer); //指定 buffer
    gl.bufferData(gl.ARRAY_BUFFER, obj.value, gl.STATIC_DRAW); //上傳資料到指定的 buffer
    gl.vertexAttribPointer(loc, att.size, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(loc);

    return obj;
}

function resetBuffers(gl) {
    gl.bindVertexArray(null);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);
    gl.bindTexture(gl.TEXTURE_2D, null);
}

function createBuffers(gl, vertices, indices) {
    //索引 indices
    var indexBuffer = null;
    if(indices) {
        indexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
    }
    
    //頂點 vertices
    const vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); //指定儲存單元
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); //gl.STATIC_DRAW: 寫入一次,繪製多次(不能再次修改,可重複使用)

    //紋理座標 uvs
    //const uvBuffer = gl.createBuffer();
    //gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
    //gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW);

    //const loc = gl.getAttribLocation(pro, "aPosition");
    
    //gl.vertexAttribPointer(loc, vertexCount, gl.FLOAT, false, 0, 0);

    return {
        indexBuffer: indexBuffer,
        vertexBuffer: vertexBuffer,
        //uvBuffer: uvBuffer,
    }
}

function deleteBuffers(gl, buffers) {
    if(!buffers) return;
    for(let n in buffers){
        if(buffers[n]) gl.deleteBuffer(buffers[n]);
    }
}

function updateTexture(gl, tex) {
    //畫素預處理
    if(Array.isArray(tex.pixelStorei) === true) {
        for(let i = 0, v; i < tex.pixelStorei.length; i++) {
            v = Texture.pixelStoreis[tex.pixelStorei[i]];
            if(v !== undefined) gl.pixelStorei(gl[v], true);
        }
    }

    if(ImageSource.prototype.isPrototypeOf(tex.source) === true){
        gl.texImage2D(gl.TEXTURE_2D, 0, gl[tex.format], tex.source.width, tex.source.height, 0, gl[tex.format], gl[tex.type], tex.source.data);
    } else {
        gl.texImage2D(gl.TEXTURE_2D, 0, gl[tex.format], gl[tex.format], gl[tex.type], tex.source);
    }

    //gl.getParameter(gl.MAX_TEXTURE_SIZE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); //LINEAR (default value)(線性的), NEAREST(最近的)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); //REPEAT(重複), CLAMP_TO_EDGE(夾到邊緣), MIRRORED_REPEAT(像鏡子一樣的重複?)
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    
    //mipmap
    if(tex.mipmap === true){ // && isPowerOf2(tex.source.width) === true && isPowerOf2(tex.source.height) === true
        gl.generateMipmap(gl.TEXTURE_2D);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
    } else {
        //gl.LINEAR, gl.NEAREST, gl.NEAREST_MIPMAP_NEAREST, gl.LINEAR_MIPMAP_NEAREST, gl.NEAREST_MIPMAP_LINEAR (default value), gl.LINEAR_MIPMAP_LINEAR.
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 
    }
}

function proHandler(gl, pros, renderer, object2d) {
    const isMS = MaterialShader.prototype.isPrototypeOf(object2d.material);

    const result = {
        cache: null, 
        uniforms: {
            uPMat: renderer.projectionMatrix, 
            uMat: object2d.modelMatrix, 
            uSize: [object2d.geometry.width, object2d.geometry.height], 
        }, 
    }

    if(isMS === false){
        result.uniforms.uImage = object2d.material.texture;
    } else {
        const properties = {};
        for(let n in object2d.material.uniforms){
            properties[n] = {
                enumerable: true,
                get: () => {return object2d.material.uniforms[n];},
            }
        }
        Object.defineProperties(result.uniforms, properties);
    }

    let proName = "", pro = null;

    switch(object2d.constructor.name){
        case "Object2D": 
        proName = "texture1";

        if(isMS === false){
            pro = pros[proName];
        } else {
            pro = createProgram(gl, object2d.material.vertexCode, object2d.material.fragmentCode);
            proName = "";
        }

        result.cache = new Cache(gl, proName, pro, object2d, gl[ModeTriangles]);
        break;

        case "Sprite": 
        proName = "texture1_sprite";

        if(isMS === false){
            pro = pros[proName];
        } else {
            pro = createProgram(gl, object2d.material.vertexCode, object2d.material.fragmentCode);
            proName = "";
        }

        if(result.uniforms.uLen === undefined) result.uniforms.uLen = object2d.len;
        if(result.uniforms.uOffset === undefined){
            Object.defineProperty(result.uniforms, "uOffset", {
                enumerable: true, //編譯時需要遍歷 uniforms
                get: () => {return object2d.offset;}, 
            });
        }

        result.cache = new Cache(gl, proName, pro, object2d, gl[ModeTriangles]);
        break;

        case "Instanced": 
        proName = "texture1_Instanced";
        
        if(isMS === false){
            pro = pros[proName];
        } else {
            pro = createProgram(gl, object2d.material.vertexCode, object2d.material.fragmentCode);
            proName = "";
        }

        result.cache = new CacheInstanced(gl, proName, pro, object2d, gl[ModeTriangles]);
        break;

        case "InstancedPoints": 
        proName = "texture1_Instanced_points";
        
        if(isMS === false){
            pro = pros[proName];
        } else {
            pro = createProgram(gl, object2d.material.vertexCode, object2d.material.fragmentCode);
            proName = "";
        }

        if(Array.isArray(result.uniforms.uSize) === true){
            Object.defineProperty(result.uniforms, "uSize", {
                enumerable: true, //編譯時需要遍歷 uniforms
                get: () => {return object2d.pointSize;}, 
            });
        }
        
        result.cache = new CacheInstanced(gl, proName, pro, object2d, gl[ModePoints]);
        break;

        case "InstancedSprite": 
        proName = "texture1_Instanced_sprite";
        
        if(isMS === false){
            pro = pros[proName];
        } else {
            pro = createProgram(gl, object2d.material.vertexCode, object2d.material.fragmentCode);
            proName = "";
        }

        if(result.uniforms.uLen === undefined) result.uniforms.uLen = object2d.len1;
        if(result.uniforms.uOffset === undefined){
            Object.defineProperty(result.uniforms, "uOffset", {
                enumerable: true, //編譯時需要遍歷 uniforms
                get: () => {return object2d.offset;}, 
            });
        }
        
        result.cache = new CacheInstanced(gl, proName, pro, object2d, gl[ModeTriangles]);
        break;
    }

    //if(isMS) Object.assign(result.uniforms, object2d.material.uniforms);
    //console.log(result.uniforms);
    return result;
}

/**
 * @param {WebGL2RenderingContext} gl 
 */
function createRenderTarget(gl, width, height) {
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

    // Create and bind the framebuffer
    const frameBuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

    //將一個 frameBuffer 複製到另一個 frameBuffer
    //this.gl.blitFramebuffer(0, 0, this.viewPort.width, this.viewPort.height, 0, 0, this.viewPort.width, this.viewPort.height,this.gl.COLOR_BUFFER_BIT, this.gl.LINEAR);


    //const renderBuffer = gl.createRenderbuffer();
    //gl.bindRenderbuffer(gl.RENDERBUFFER, renderBuffer);

    //gl.renderbufferStorageMultisample(gl.RENDERBUFFER, 4, gl.RGBA8, width, height);

    // 為渲染緩衝區指定儲存資料的型別和尺寸
    //gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);

    // 6. 將渲染緩衝區物件附加到幀緩衝區物件上
    //gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, renderBuffer);
 
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);

    return {
        texture: texture,
        frameBuffer: frameBuffer,
        //renderBuffer: renderBuffer,
    }
}




/* glsl 一些內建函式：‌
abs 返回一個數的絕對值。‌
acos 返回一個數的反餘弦。‌
asin 返回一個數的反正弦。‌
atan 返回一個數的反正切。‌
//atan2 返回從X軸到點(y,x)的角度（‌以弧度為單位）‌。‌
cos 返回一個數的餘弦。‌
sin 返回一個數的正弦。‌
sqrt 返回一個數的平方根。‌
tan 返回一個數的正切。‌
round 將一個指定的數值表示式舍入到最近的整數並將其返回。‌
random 返回一個0和1之間的偽隨機數。‌
parseFloat 返回從字串轉換而來的浮點數。‌
parseInt 返回從字串轉換而來的整數。‌
pow 返回一個指定冪次的底表示式的值。‌
step(float a, float x): a < x ? x : a;
clamp(float x, float min, float max): min > x ? min : min < x && max > x ? x : max; 返回三個值中的中間值
mix(vac4 color1, vec4 color2, float weight) 返回兩種顏色的混合, color2 為 weight, color1 為 1 - weight
mod(float x, float y): x % y

exp 返回e的x次冪。‌
log 返回x的自然對數，‌
exp2 返回2的x次冪。‌
log2 返回x的2為底的對數，

inversesqrt 回1/xxx，
sign 返回數值的符號值。‌

texture2D(uSampler, gl_PointCoord.xy) gl_PointCoord 特殊變數能自動獲取 points 的紋理座標 
*/


class Attribute {

    /**
     * @param {number} size 
     * @param {Array|TypeBufferArray} value 
     */
    constructor(size, value) {
        this.size = size;
        this.value = value;
    }

}


/** Geometry
demo: 
    const width = 256, height = 256;

    const geometry = new Geometry({
        aPosition: new Attribute(2, new Float32Array([
            width,0, 0,0, 0,height, 
            0,height, width,height, width,0,
        ])),
    }, width, height);


    //頂點索引版本: 
    const geometry = new Geometry({
        aPosition: new Attribute(2, new Float32Array([
            0,0, width,0, width,height, 0,height,
        ]))
    }, width, height);

    geometry.setIndex([1,0,3, 3,2,1]);
*/
class Geometry {
    
    #type = "UNSIGNED_SHORT"; //索引面的型別(初始化時自動選擇設定); 可能的值有: UNSIGNED_SHORT|UNSIGNED_INT
    get type() {return this.#type;}

    #offset = 0; //繪製幾何體的偏移
    get offset() {return this.#offset;}
    
    #indices = null;
    get indices() {return this.#indices;}

    #w = 0;
    #h = 0;
    get width() {return this.#w;}
    get height() {return this.#h;}

    /**
     * @param {{aPos: Attribute}} attributes 必須定義(面索用.setIndex()方法設定)
     * @param {Box} bbox 可選(如果未定義則在構造器中自動計算一次)
     */
    constructor(attributes, w = 0, h = 0) {
        this.attributes = attributes;
        this.#w = w;
        this.#h = h;
    }

    /**
     * 根據 this.attributes[attributeName] 的頂點設定邊界大小
     * @param {string} attributeName 
     */
    computeSize(attributeName) {
        const att = this.attributes[attributeName];
        if(Attribute.prototype.isPrototypeOf(att) === false) return;
        const obj = computeBBox(att.value, att.size);
        if(obj.x !== 0 || obj.y !== 0){
            translateVertices(att.value, att.size, -obj.x, -obj.y);
            this.#w = Math.abs(obj.x1 - obj.x);
            this.#h = Math.abs(obj.y1 - obj.y);
        } else {
            this.#w = obj.x1;
            this.#h = obj.y1;
        }
    }

    /**
     * 設定頂點索引
     * @param {[]|Uint16Array|Uint32Array} indices 
     * @param {undefined|boolean} isu32 //如果 indices 已是型別陣列可以忽略此引數
     * @returns 
     */
    setIndex(indices, isu32) {
        if(this.#indices !== null) return console.warn("不支援更改索引面");

        switch(indices.constructor.name){
            case "Array": 
            break;

            case "Uint32Array": 
            this.#type = "UNSIGNED_INT";
            this.#indices = indices;
            return;
            
            default: 
            case "Uint16Array": 
            this.#type = "UNSIGNED_SHORT";
            this.#indices = indices;
            return;
        }

        if(typeof isu32 !== "boolean"){
            isu32 = false;
            for(let i = 0; i < indices.length; i++){
                if(indices[i] < 65535) continue;
                isu32 = true;
                break;
            }
        }

        if(isu32 === false) {
            this.#type = "UNSIGNED_SHORT";
            this.#indices = new Uint16Array(indices);
        } else {
            this.#type = "UNSIGNED_INT";
            this.#indices = new Uint32Array(indices);
        }
    }

}


//矩形
class GeometryRect extends Geometry {

    constructor(width, height) {
        super({aPos: new Attribute(2, new Float32Array([0,0, width,0, width,height, 0,height]))}, width, height);
        this.setIndex([1, 0, 3, 3, 2, 1], false);
    }

}


//圓形
class GeometryCircle extends Geometry {
   
    constructor(radius = 1, segments = 32, thetaStart = 0, thetaLength = Math.PI * 2) {
        segments = Math.max(3, segments);

        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;

        const vertices = [0, 0];
        for ( let s = 0, i = 3, segment; s <= segments; s ++, i += 3 ) {
            segment = thetaStart + s / segments * thetaLength;
            const x = radius * Math.cos( segment ), 
            y = radius * Math.sin( segment );
            vertices.push(x, y);
            minX = Math.min(x, minX);
            minY = Math.min(y, minY);
            maxX = Math.max(x, maxX);
            maxY = Math.max(y, maxY);
        }

        const indices = [];
        for ( let i = 1; i <= segments; i ++ ) {
            indices.push( i, i + 1, 0 );
        }

        if(minX !== 0 || minY !== 0){
            translateVertices(vertices, 2, -minX, -minY);
            super({aPos: new Attribute(2, new Float32Array(vertices))}, Math.abs(maxX - minX), Math.abs(maxY - minY));
        } else {
            super({aPos: new Attribute(2, new Float32Array(vertices))}, maxX, maxY);
        }

        this.setIndex(indices);
    }

}


//形狀
class GeometryShape extends Geometry {

    constructor(points, segments = 1) {
        let isu32 = false, minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;

        points = new Shape(points).extractPoints(segments).shape;
        if(ShapeUtils.isClockWise(points) === false) points = points.reverse();

        //
        const indices = [], vertices = [], 
        faces = ShapeUtils.triangulateShape(points, []);
        for(let i = 0, p, l = points.length; i < l; i ++){
            p = points[i];
            vertices.push(p.x, p.y);
            minX = Math.min(p.x, minX);
            minY = Math.min(p.y, minY);
            maxX = Math.max(p.x, maxX);
            maxY = Math.max(p.y, maxY);
        }

        for(let i = 0, face, l = faces.length; i < l; i++){
            face = faces[i];
            indices.push(face[0], face[1], face[2]);
            if(isu32 === false && (face[0] >= 65535 || face[1] >= 65535 || face[2] >= 65535)) isu32 = true;
        }

        //
    
        if(minX !== 0 || minY !== 0){
            translateVertices(vertices, 2, -minX, -minY);
            super({aPos: new Attribute(2, new Float32Array(vertices))}, Math.abs(maxX - minX), Math.abs(maxY - minY));
        } else {
            super({aPos: new Attribute(2, new Float32Array(vertices))}, maxX, maxY);
        }
        
        this.setIndex(indices, isu32);
    }

}


//波浪矩形
class GeometryRectWavy extends GeometryShape {

    constructor(width, height, distance, divisions = 12) {
        const halfW = width / 2, halfH = height / 2;
        distance = distance === undefined ? Math.min(halfW, halfH) * 0.2 : Math.min(distance, Math.min(halfW, halfH) * 0.5);
        const points = [
            //右上
            new Vector2(halfW + distance, 0),
            new Vector2(width, 0),
            new Vector2(width, halfH - distance),

            //右下
            new Vector2(width, halfH + distance),
            new Vector2(width, height),
            new Vector2(halfW + distance, height),

            //左下
            new Vector2(halfW - distance, height),
            new Vector2(0, height),
            new Vector2(0, halfH + distance),

            //左上
            new Vector2(0, halfH - distance),
            new Vector2(0, 0),
            new Vector2(halfW - distance, 0),
        ];

        const points1 = [], curve = new SplineCurve();
        for(let i = 0; i < points.length; i += 3) {
            curve.points = [points[i], points[i+1], points[i+2]];
            const points2 = curve.getPoints(divisions);
            for(let i = 0; i < points2.length; i++){
                points1.push(points2[i]);
            }
        }

        super(points1, 1);
    }

}


class ImageSource {

    /**
     * ImageData 的構造器不是很友好, 這是它的替代品
     * @param {number} w 
     * @param {number} h 
     * @param {Uint8Array} d //步長為4的陣列, 分別是: r, g, b, a
     */
    constructor(w, h, d = new Uint8Array(w * h * 4)) {
        this.width = w;
        this.height = h;
        this.data = d;
    }

}


class Texture {

    static pixelStoreis = [
        "PACK_ALIGNMENT", //將畫素資料打包到記憶體中
        "UNPACK_ALIGNMENT", //從記憶體中解壓縮畫素資料
        "UNPACK_FLIP_Y_WEBGL", //翻轉紋理的y軸
        "UNPACK_PREMULTIPLY_ALPHA_WEBGL", //預乘阿爾法通道(將alpha通道與其他顏色通道相乘)
        "UNPACK_COLORSPACE_CONVERSION_WEBGL", //預設顏色空間轉換或不進行顏色空間轉換
    ];

    static formats = [
        "ALPHA", "UNSIGNED_BYTE", //14: 1,1; //阿爾法
        "LUMINANCE", "UNSIGNED_BYTE", //12: 1,1; //不透明灰度圖
        "LUMINANCE_ALPHA",    "UNSIGNED_BYTE", //10: 2,2; //透明灰度圖
        "RGB",    "UNSIGNED_SHORT_5_6_5", //8: 3,2
        "RGBA",    "UNSIGNED_SHORT_5_5_5_1", //6: 4,2
        "RGBA", "UNSIGNED_SHORT_4_4_4_4", //4: 4,3
        "RGB", "UNSIGNED_BYTE", //2: 3,3 //不透明
        "RGBA", "UNSIGNED_BYTE", //0: 4,4 //透明
    ];

    #f_t = 0;
    get format() {return Texture.formats[this.#f_t];}
    get type() {return Texture.formats[this.#f_t + 1];}

    #needupdate = false; //如果材質屬性發生改變將此值設為true,渲染器會重繪材質的紋理(紋理不適合頻繁的修改, 用著色器實現動態紋理)
    get needupdate() {
        if(this.#needupdate === false) return false;
        this.#needupdate = false;
        return true;
    }

    #source = null;
    get source() {return this.#source;}
    set source(v) {
        this.#source = v;
        this.#needupdate = true;
    }

    #pixelStorei = null;
    get pixelStorei() {return this.#pixelStorei;}
    get isPremultiplyAlpht() {
        return this.#pixelStorei === null ? false : this.#pixelStorei.includes(PixelStoreiPremultiplyAlpht);
    }

    #mipmap = false;
    get mipmap() {return this.#mipmap;}
    set mipmap(v) {
        if(typeof v !== "boolean" || v === this.#mipmap) return;
        this.#mipmap = v;
        this.#needupdate = true;
    }

    constructor(source, format = FormatRGBA, pixelStorei = [PixelStoreiPremultiplyAlpht], mipmap = false) {
        this.#source = source;
        this.#f_t = format;
        this.#pixelStorei = pixelStorei;
        this.#mipmap = mipmap;
    }

    setFormatAndType(v = FormatRGBA) {
        this.#f_t = v;
        this.#needupdate = true;
    }

    setPixelStorei(key = PixelStoreiPremultiplyAlpht, enable = false) {
        if(key >= Texture.pixelStoreis.length || key < 0) return;
        if(enable === true){
            if(this.#pixelStorei === null) this.#pixelStorei = [];
            this.#pixelStorei.push(key);
            this.#needupdate = true;
        } else if(this.#pixelStorei !== null){
            const i = this.#pixelStorei.indexOf(key);
            if(i === -1) return;
            this.#pixelStorei.splice(i, 1);
            this.#needupdate = true;
        }
    }

}


class MUS {

    static blendESs = [
        "FUNC_ADD", //source + destination (default value)
        "FUNC_SUBTRACT", //source - destination
        "FUNC_REVERSE_SUBTRACT", //destination - source
        "MIN", //Minimum of source and destination
        "MAX", //Maximum of source and destination
    ];

    static blendFSs = [
        "ZERO", //所有顏色乘 0
        "ONE",  //所有顏色乘 1
        "SRC_COLOR", //將所有顏色乘上源顏色
        "ONE_MINUS_SRC_COLOR", //每個源顏色所有顏色乘 1
        "DST_COLOR",  //將所有顏色與目標顏色相乘
        "ONE_MINUS_DST_COLOR", //將所有顏色乘以 1 減去每個目標顏色, 
        "SRC_ALPHA", //將所有顏色乘以源 alpha 值
        "ONE_MINUS_SRC_ALPHA", //將所有顏色乘以 1 減去源 alpha 值
        "DST_ALPHA", //將所有顏色與目標 alpha 值相乘
        "ONE_MINUS_DST_ALPHA", //將所有顏色乘以 1 減去目標 alpha 值
        "CONSTANT_COLOR", //將所有顏色乘以一個常數顏色
        "ONE_MINUS_CONSTANT_COLOR", //所有顏色乘以 1 減去一個常數顏色
        "CONSTANT_ALPHA", //將所有顏色乘以一個常數
        "ONE_MINUS_CONSTANT_ALPHA", //所有顏色乘以 1 減去一個常數
        "SRC_ALPHA_SATURATE", //將 RGB 顏色乘以源 alpha 值或 1 減去目標 alpha 值中的較小值。alpha 值乘以 1
    ];

    #blendEnable = false;
    get blendEnable() {return this.#blendEnable;}
    set blendEnable(v) {
        this.#blendEnable = typeof v === "boolean" ? v : false;
    }

    #blendC = {r: 0, g: 0, b: 0, a: 0};
    get blendC(){return this.#blendC;}

    #blendES = [BlendEquationAdd[0], BlendEquationAdd[1]];
    get blendES(){return this.#blendES;} //mode || modeRGB, modeAlpha; 值為: MUS.blendESs 的索引

    #blendFS = [BlendDefault[0], BlendDefault[1], BlendDefault[2], BlendDefault[3]];
    get blendFS(){return this.#blendFS;} //sfactor, dfactor || srcRGB, dstRGB, srcAlpha, dstAlpha; 值為: MUS.blendFSs 的索引

    //如果紋理屬性發生改變將此值設為true,渲染器會重繪材質的紋理(紋理不適合頻繁的修改, 用著色器實現動態紋理)
    //注意還要設定對應材質的.needupdate = true 才有效
    #needupdate = false; 
    get needupdate() {
        if(this.#needupdate === false) return false;
        this.#needupdate = false;
        return true;
    }
    set needupdate(v) {
        this.#needupdate = v;
    }

    /**
     * 設定內建的混合組合
     * @param {Array} v //值為帶字首 Blend* 的常量
     */
    setBlend(v){
        switch(v){
            default: return false;
            case BlendDefault: 
            case BlendAdd: 
            case BlendSub: 
            case BlendMultiply: 
            break;
        }
        Object.assign(this.#blendFS, v);
        return true;
    }

    /**
     * gl.blendFunc(sfactor, dfactor)
     * @param {number} sfactor //值為: MUS.blendFSs 的索引
     * @param {number} dfactor //值為: MUS.blendFSs 的索引
     */
    blendFunc(sfactor, dfactor) {
        this.#blendFS[0] = sfactor;
        this.#blendFS[1] = dfactor;
        this.#blendFS[2] = -1;
        this.#blendFS[3] = -1;
    }

    /**
     * //gl.blendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha); 值為: MUS.blendFSs 的索引
     * @param {number} srcRGB 
     * @param {number} dstRGB 
     * @param {number} srcAlpha 
     * @param {number} dstAlpha 
     */
    blendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha) {
        this.#blendFS[0] = srcRGB;
        this.#blendFS[1] = dstRGB;
        this.#blendFS[2] = srcAlpha;
        this.#blendFS[3] = dstAlpha;
    }

}


class Material extends MUS {

    #texture = null;
    get texture() {return this.#texture;}

    /**
     * @param {Texture} texture 
     * @param {boolean} blendEnable 
     */
    constructor(texture, blendEnable) {
        super();
        this.#texture = texture;
        this.blendEnable = blendEnable;
    }

}


/** MaterialShader
demo: 
    const width = 256, height = 256;
    const geometry = new Geometry({
        aPosition: new Attribute(2, new Float32Array([
            width,0, 0,0, 0,height, 
            0,height, width,height, width,0,
        ])),
    }, width, height);

    const material = new MaterialShader({
        vertexCode: `#version 300 es
            in vec2 aPosition;
            uniform mat3 projectionMatrix;
            uniform mat3 modelMatrix;
            void main() {
                gl_Position.xyz = projectionMatrix * modelMatrix * vec3(aPosition, 1.0);
                gl_Position.w = 1.0;
            }
        `,
        fragmentCode: `#version 300 es
            precision mediump float; //highp, mediump, lowp
            uniform vec4 uColor;
            out vec4 outColor;
            void main() {
                outColor = uColor;
            }
        `,
        uniforms: {
            projectionMatrix: renderer.projectionMatrix,
            modelMatrix: null, //這裡夠不到模型矩陣,先佔個位
            uColor: [1, 0, 0, 1],
        },
    });

    const shader = new Object2D(geometry, material).translate(100, 300);
    material.uniforms.modelMatrix = shader.modelMatrix;
    renderer.append(shader).redraw();

    
    //這麼做太麻煩了, 看下面這個: 

    const geometry1 = new GeometryRect(256, 256);
    const material1 = new MaterialShader({
        vertexCode: `#version 300 es
            in vec2 aPos;             //aPosition -> aPos 頂點屬性
            uniform mat3 uPMat;     //projectionMatrix -> uPMat 投影矩陣
            uniform mat3 uMat;         //modelMatrix -> uMat 模型矩陣
            void main() {
                gl_Position.xyz = uPMat * uMat * vec3(aPos, 1.0);
                gl_Position.w = 1.0;
            }
        `,
        fragmentCode: `#version 300 es
            precision mediump float; //highp, mediump, lowp
            uniform vec4 uColor;
            out vec4 outColor;
            void main() {
                outColor = uColor;
            }
        `,
        uniforms: {
            uColor: [1, 0, 0, 1],
        },
    });

    const shader1 = new Object2D(geometry1, material1).translate(100+256+10, 300);
    renderer.append(shader1).redraw();

    //每個模型的內建變數不一樣(參考: defaultShaderCode), 這裡只針對 Object2D;
    //Object2D 內建了1個屬性, Geometry.attributes: {aPos: Attribute}
    //Object2D 內建了4個全域性屬性, .uniforms: {uPMat: [3x3], uMat: [3x3], uSize: [0, 0], uImage: Texture}
    //如果定義的著色器程式碼沒有使用這些內建屬性,渲染器在初始化它們時將自動丟棄掉


    //水波紋漣漪特效例子: 

    const materialShader = new MaterialShader({
        blending: BlendDefault,
        vertexCode: defaultShaderCode.texture1.vertex,
        fragmentCode: `#version 300 es
            precision mediump float; //highp, mediump, lowp
            uniform vec2 uSize;
            uniform sampler2D uImage;
            uniform vec2 uOrigin;
            uniform vec2 uRange;
            uniform float uScale;
            uniform float uLife;
            uniform float uTime;
            in vec2 vPos;

            out vec4 outColor;
            const float PI = 3.141592653589793;

            float atan2(float y, float x) {
                if(x > 0.0){return atan(y / x);}
                if(x < 0.0){
                    if(y >= 0.0){return atan(y / x) + PI;}
                    return atan(y / x) - PI;
                }
                if(y > 0.0){return PI;}
                if(y < 0.0){return -PI;}
                return 0.0;
            }

            void main() {
                vec2 newPos = vPos - uOrigin;
                float _d = newPos.x * newPos.x + newPos.y * newPos.y;
                if(_d < 0.001 || _d < uRange.x * uRange.x || _d > uRange.y * uRange.y){
                    outColor = texture(uImage, vPos / uSize);
                } else {
                    float d = sqrt((1.0 - uScale) * _d);
                    float r = atan2(vPos.y, vPos.x);
                    outColor = texture(uImage, (vPos + vec2(cos(r) * sin(d - uTime) / d, sin(r) * sin(d - uTime) / d) * uLife) / uSize);
                }
            }
        `,
        uniforms: {
            uImage: new Texture(images[0], FormatRGBA),
            uOrigin: [innerWidth / 2, innerHeight / 2], //擴散原點
            uRange: [0, innerWidth], //0: 擴散最小半徑, 1: 擴散最大半徑;
            uScale: 0.993, //值越大波就越寬
            uLife: innerWidth, //值越大起伏就越大
            uTime: 0,
        },
    });
*/
class MaterialShader extends MUS {

    /**
     * @param {{vertexCode: string, fragmentCode: string, uniforms: object, blending: Array}} option 
     */
    constructor(option) {
        super();
        this.vertexCode = option.vertexCode;
        this.fragmentCode = option.fragmentCode;
        this.uniforms = option.uniforms;
        this.blendEnable = this.setBlend(option.blending);
    }

}


/** Object2D
demo: 
    const geometry = new GeometryRect(renderer.domElement.width, renderer.domElement.height);
    const texture = new Texture(images[0], FormatRGB);
    const material = new Material(texture, false);
    const background = new Object2D(geometry, material);
    renderer.append(background).redraw();
*/
class Object2D {

    #geometry = null;
    get geometry() {
        return this.#geometry;
    }

    #material = null;
    get material() {
        return this.#material;
    }

    #mat3A = [];
    get modelMatrix() {return this.#mat3A;}

    #mat3 = null;
    #bbox = new Box();
    get x() {return this.#bbox.x;}
    get y() {return this.#bbox.y;}

    /**
     * 渲染器的常規成員 (複用它們: Geometry, Material, Texture, 如果這麼做那麼它們大部分東西都是共享的包括GPU上的快取)
     * @param {Geometry} geometry 
     * @param {Material} material 
     */
    constructor(geometry, material) {
        this.#geometry = geometry || null;
        this.#material = material || null;

        this.#bbox.size(geometry.width, geometry.height);
        this.#mat3 = new Matrix3(this.#mat3A).makeTranslation(0, 0);
        this.visible = true;
    }

    translate(x, y) {
        this.#bbox.x += x;
        this.#bbox.y += y;
        this.#mat3.translate(x, y);
        return this;
    }

    rotate(r, ox = this.#bbox.w / 2, oy = this.#bbox.h / 2) {
        const cx = this.#bbox.x + ox,
        cy = this.#bbox.y + oy;
        this.#mat3.translate(-cx, -cy)
        .rotate(r).translate(cx, cy);
        return this;
    }

    scale(x, y, ox = this.#bbox.w / 2, oy = this.#bbox.h / 2) {
        const cx = this.#bbox.x + ox,
        cy = this.#bbox.y + oy;
        this.#mat3.translate(-cx, -cy)
        .scale(x, y).translate(cx, cy);
        return this;
    }

    setPosition(x, y) {
        this.#mat3.translate(x - this.#bbox.x, y - this.#bbox.y);
        this.#bbox.x = x;
        this.#bbox.y = y;
        return this;
    }

    containsPoint(x, y) {
        return this.#bbox.containsPoint(x, y);
    }

}


/** Sprite
demo: 
    const geometry = new GeometryRect(renderer.domElement.width, renderer.domElement.height);
    const texture = new Texture(images[3], FormatRGB);
    const material = new Material(texture, false);
    const sprite = new Sprite(geometry, material, 8, 0);
    renderer.append(sprite).redraw();
    setInterval(() => {
        sprite.offset += 1; //sprite.offset += 0.1;
        renderer.redraw();
    }, 600);
*/
class Sprite extends Object2D {

    #len = 1;
    get len() {return this.#len;}

    #offset = 0;
    get offset() {return this.#offset;}
    set offset(v) {this.#offset = v % this.#len;}

    /**
     * 雪碧圖, 精靈 (暫只支援 x * 1 的雪碧圖), 設定它 .offset 實時生效! 
     * @param {Geometry} geometry 
     * @param {Material} material 
     * @param {number} len //雪碧圖x軸長度(圖片的寬 / 每一格的寬)
     * @param {number} offset //雪碧圖x軸位置, 浮點值, 0.0 至 len - 1 個為一個迴圈(offset % len)
     */
    constructor(geometry, material, len, offset = 0.0) {
        super(geometry, material);
        this.#len = Math.floor(Math.max(this.#len, len));
        this.offset = offset;
    }

}


/** Instanced
demo: 
    const instanced = new Instanced(geos[2], mats[2], 5).translate(100, 100);
    for(let i = 0; i < instanced.len; i++){ //設定每一個例項的旋轉
        instanced.rotateI(i, i / instanced.len);
    }

    renderer.append(instanced).redraw();
*/
class Instanced extends Object2D {

    #frequentUpdate = false;
    get frequentUpdate() {return this.#frequentUpdate;}

    #needupdate = null;
    #needupdateI = [];
    get needupdateI() {return this.#needupdateI;}
    get needupdate() {return this.#needupdate;}

    #len = 0;
    get len() {return this.#len;}

    #matrixData = null;
    get matrixData() {return this.#matrixData;}

    #matrices = null;
    #matricesA = null;
    get matricesA() {return this.#matricesA;}

    #bboxs = null;

    /**
     * Object2D 的例項化版本
     * @param {Geometry} geometry 
     * @param {Material} material 
     * @param {number} len //例項的長度
     * @param {boolean} frequentUpdate //是否經常更新變換矩陣, 預設 false; (決定了變換矩陣資料在著色器中的快取型別)
     */
    constructor(geometry, material, len, frequentUpdate) {
        super(geometry, material);

        len = Math.max(1, Math.floor(len));
        
        const matrixLen = 3 * 3, sizeByte = matrixLen * 4;
        this.#matrixData = new Float32Array(len * matrixLen);
        this.#matrices = new Array(len);
        this.#matricesA = new Array(len);

        this.#needupdate = new Array(len);
        this.#bboxs = new Array(len);
        const cx = geometry.width / 2, cy = geometry.height / 2;

        for(let i = 0, val; i < len; i++){
            val = new Float32Array(this.#matrixData.buffer, i * sizeByte, matrixLen);
            this.#matricesA[i] = val;
            this.#matrices[i] = new Matrix3(val).makeTranslation(0, 0);
            this.#needupdate[i] = false;
            this.#bboxs[i] = new Box(0, 0, cx, cy);
        }

        this.#len = len;
        this.#frequentUpdate = typeof frequentUpdate === "boolean" ? frequentUpdate : false;
    }

    translateI(i, x, y) {
        const bboxs = this.#bboxs[i];
        bboxs.x += x;
        bboxs.y += y;
        bboxs.w = this.x + bboxs.x + this.geometry.width / 2;
        bboxs.h = this.y + bboxs.y + this.geometry.height / 2;
        this.#matrices[i].translate(x, y);
        if(this.#needupdate[i] === false){
            this.#needupdate[i] = true;
            this.#needupdateI.push(i);
        }
        return this;
    }

    rotateI(i, x) {
        const bboxs = this.#bboxs[i];
        this.#matrices[i].translate(-bboxs.w, -bboxs.h)
        .rotate(x).translate(bboxs.w, bboxs.h);
        if(this.#needupdate[i] === false){
            this.#needupdate[i] = true;
            this.#needupdateI.push(i);
        }
        return this;
    }

    scaleI(i, x, y) {
        const bboxs = this.#bboxs[i];
        this.#matrices[i].translate(-bboxs.w, -bboxs.h)
        .scale(x, y)(bboxs.w, bboxs.h);
        if(this.#needupdate[i] === false){
            this.#needupdate[i] = true;
            this.#needupdateI.push(i);
        }
        return this;
    }

    containsPointI(x, y) {
        for(let i = this.#len; i <= 0; i++){
            if(this.#bboxs[i].containsPoint(x, y) === true) return i;
        }
        return -1;
    }

}


/** InstancedPoints
demo: 
    const points = new InstancedPoints(geos[1], mats[1], 50000, false, 10);
    for(let i = 0; i < points.len; i++){ //每一個例項設定一個隨機位置
        points.translateI(i, UTILS.random(0, innerWidth - points.geometry.width), UTILS.random(0, innerHeight - points.geometry.height));
    }

    renderer.append(points).redraw();
*/
class InstancedPoints extends Instanced {

    /**
     * 幾乎與 Instanced 一樣, 就多了一個.pointSize 屬性, 修改此屬性實時生效!
     * @param {Geometry} geometry 
     * @param {Material} material 
     * @param {number} len 
     * @param {boolean} frequentUpdate 
     * @param {number} pointSize //每一個點的大小(可以是浮點數)
     */
    constructor(geometry, material, len, frequentUpdate, pointSize) {
        super(geometry, material, len, frequentUpdate);
        this.pointSize = pointSize;
    }

}


/** InstancedSprite
demo: 
    const geometry = new GeometryRect(renderer.domElement.width, renderer.domElement.height);
    const texture = new Texture(images[3], FormatRGB);
    const material = new Material(texture, false);
    const sprite = new InstancedSprite(geometry, material, 5, false, 8);
    for(let i = 0; i < sprite.len; i++){ //每一個例項設定一個隨機位置
        sprite.translateI(i, UTILS.random(0, innerWidth - sprite.geometry.width), UTILS.random(0, innerHeight - sprite.geometry.height));
    }
    renderer.append(sprite).redraw();
    setInterval(() => {
        sprite.offset += 1; //sprite.offset += 0.1;
        renderer.redraw();
    }, 600);
*/
class InstancedSprite extends Instanced {

    #len1 = 1;
    get len1() {return this.#len1;}

    #offset = 0;
    get offset() {return this.#offset;}
    set offset(v) {this.#offset = v % this.#len1;}

    /**
     * Sprite 雪碧圖的例項化版本, 設定它 .offset 實時生效! 
     * @param {Geometry} geometry 
     * @param {Material} material 
     * @param {number} len 
     * @param {boolean} frequentUpdate 
     * @param {number} len1 //雪碧圖x軸長度(圖片的寬 / 每一格的寬)
     * @param {number} offset //雪碧圖x軸位置, 浮點值, 0.0 至 len1 - 1 個為一個迴圈(offset % len1)
     */
    constructor(geometry, material, len, frequentUpdate, len1, offset = 0.0) {
        super(geometry, material, len, frequentUpdate);
        this.#len1 = Math.floor(Math.max(this.#len1, len1));
        this.offset = offset;
    }

}



//此類對外部是完全隱藏, 保密的, 只由渲染器直接呼叫; 
class Cache {

    constructor(gl, proName, pro, obj2d, mode) {
        this.gl = gl;
        this.proName = proName;
        this.pro = pro;
        this.obj2d = obj2d;
        this.mode = mode;
        this.geo = null; //CacheGeometry
        this.mat = null; //CacheMaterial
        this.texLocs = [];
        this.uniforms = [];
    }

    initUniforms(uniforms, matHad = false, texMap = new Map()) {
        const gl = this.gl;
        for(let n in uniforms){
            const loc = gl.getUniformLocation(this.pro.program, n);
            if(loc === null) continue;

            if(Texture.prototype.isPrototypeOf(uniforms[n]) === false){
                this.uniforms.push(compileUniform(gl, loc, n, uniforms));
                continue;
            }

            if(matHad === false){
                let tex = texMap.get(uniforms[n]);
                if(tex === undefined){
                    tex = new CacheTexture(gl, this.mat.textures.length, n, uniforms);
                    gl.activeTexture(tex.index);
                    gl.bindTexture(gl.TEXTURE_2D, tex._texture);
                    if(tex.texture.needupdate !== undefined) updateTexture(gl, tex.texture);
                    texMap.set(uniforms[n], tex);
                }
                tex.len++;
                this.mat.textures.push(tex);
                //this.uniforms.push(() => gl.uniform1i(loc, i));
            }
        }

        if(matHad === false) this.mat.lenT = this.mat.textures.length;
        for(let i = 0; i < this.mat.lenT; i++){
            this.texLocs[i] = gl.getUniformLocation(this.pro.program, this.mat.textures[i].name);
        }
    }

    dispose() {
        this.gl.deleteShader(this.pro.vertexShader);
        this.gl.deleteShader(this.pro.fragmentShader);
        this.gl.deleteProgram(this.pro.program);
    }

    draw() {
        if(this.geo.lenI === 0){
            this.gl.drawArrays(this.mode, 0, this.geo.lenV);
        } else {
            this.gl.drawElements(this.mode, this.geo.lenI, this.gl[this.geo.value.type], 0);
        }
    }

}


class CacheInstanced extends Cache {

    constructor(gl, proName, pro, instanced, mode) {
        super(gl, proName, pro, instanced, mode);
        
        this.matrixLoc = gl.getAttribLocation(pro.program, "uIMat");
        this.matrixBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, this.matrixBuffer); 
        gl.bufferData(gl.ARRAY_BUFFER, instanced.matrixData, gl[instanced.frequentUpdate === false ? "STATIC_DRAW" : "DYNAMIC_DRAW"]);

        instanced.needupdate.fill(false);
        instanced.needupdateI.length = 0;
        
        this.sizeByte = 3 * 3 * 4;
        this.instanced = instanced;
    }

    dispose() {
        this.gl.deleteBuffer(this.matrixBuffer);
        return super.dispose();
    }

    draw() {
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.matrixBuffer);

        const instanced = this.instanced;
        var n, v = instanced.needupdateI.length;
        
        if(v !== 0){ //需要上傳矩陣
            if(v !== instanced.len){ //個別矩陣更新了
                let i = 0;
                for(n = 0; n < v; n++){
                    i = instanced.needupdateI[n];
                    instanced.needupdate[i] = false;
                    this.gl.bufferSubData(this.gl.ARRAY_BUFFER, i * this.sizeByte, instanced.matricesA[i], 0, 9); //9 = 3 * 3 = instanced.matricesA[i].length;
                }
            } else { //所有矩陣都更新了
                instanced.needupdate.fill(false);
                this.gl.bufferSubData(this.gl.ARRAY_BUFFER, 0, instanced.matrixData);
            }
            instanced.needupdateI.length = 0;
        }

        for(n = 0; n < 3; n++){
            v = this.matrixLoc + n;
            this.gl.enableVertexAttribArray(v);
            this.gl.vertexAttribPointer(v, 3, this.gl.FLOAT, false, this.sizeByte, n * 12); //12 = 3 mat3 * 4 byte
            this.gl.vertexAttribDivisor(v, 1);
        }
    
        if(this.geo.lenI === 0){
            this.gl.drawArraysInstanced(this.mode, 0, this.geo.lenV, instanced.len);
        } else {
            this.gl.drawElementsInstanced(this.mode, this.geo.lenI, this.gl[this.geo.value.type], 0, instanced.len);
        }
    }

}


class CacheGeometry {

    constructor(gl, pro, geo) {
        this.lenV = 0;
        this.attributes = {};
        for(let n in geo.attributes){
            const loc = gl.getAttribLocation(pro.program, n);
            if(loc === -1) continue;
            const obj = compileBuffer(gl, loc, geo.attributes[n]);
            this.attributes[n] = obj;
            if(this.lenV === 0) this.lenV = obj.value.length / obj.size;
        }

        this.lenI = 0;
        this.indexBuffer = null;
        if(geo.indices !== null) {
            this.indexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, geo.indices, gl.STATIC_DRAW);
            this.lenI = geo.indices.length;
        }

        this.len = 0;
        this.value = geo;
    }

    dispose(gl) {
        if(this.indexBuffer !== null){
            gl.deleteBuffer(this.indexBuffer);
        }
        for(let n in this.attributes){
            gl.deleteVertexArray(this.attributes[n].vao);
            gl.deleteBuffer(this.attributes[n].buffer);
        }
    }

}


class CacheMaterial {

    constructor(mat, texs = []) {
        this.textures = texs;
        this.lenT = texs.length;
        this.len = 0;
        this.value = mat;
    }

    dispose(gl) {

    }

}


class CacheTexture {

    constructor(gl, i, n, v) {
        this._texture = gl.createTexture();
        this.texture = v[n];
        this.name = n;
        this.index = gl["TEXTURE"+i];
        this.len = 0;
    }

    dispose(gl) {
        gl.deleteTexture(this._texture);
    }

}


/* Renderer WebGL2 2D渲染器
未完的功能: 
    1 後期處理
    2 陰影
    3 漸變

constructor: 
    空; 初始化選項都在 Renderer.contextOption .glOption 中自行修改

attribute: 
    domElement: HTMLCanvasElement; //只讀
    projectionMatrix: Array; //只讀, 返回預設的3x3投影矩陣

method: 
    append(object2d: Structure|InstancedPoints|Object2D...): this; //新增到渲染佇列並建立快取
    delete(object2d: Structure|InstancedPoints|Object2D...): this; //從渲染佇列刪除並釋放快取
    dispose(): undefined; //銷燬 WebGL2RenderingContext, 銷燬後此類無法在繼續使用
    setSize(width, height): undefined; //設定了: 畫布寬高, gl的視口, 投影矩陣;
    select(x, y: number): Object2D|null; //根據一個點來獲取 Object2D
    redraw(): undefined; //重繪畫布
    readPixels(box: Box, result: ImageSource): ImageSource; //擷取畫素; box.x,box.y: 距畫布左上角的偏移量; result: 如果未定義則會建立一個新的 ImageSource；

demo: 
    const renderer = new Renderer();
    renderer.setSize(innerWidth, innerHeight);
    document.body.appendChild(renderer.domElement);

    const geos = [
        new GeometryRect(256, 256), 
        new GeometryCircle(125), 
        new GeometryRectWavy(256, 256),
    ];

    const mats = [
        new Material(new Texture(images[0], FormatRGB), false), 
        new Material(new Texture(images[1], FormatRGBA), true), 
        new Material(new Texture(images[2], FormatRGB), false),
    ];

    renderer.domElement.addEventListener("click", e => {
        const geo = geos[Math.floor(UTILS.random(0, geos.length))]; //隨機複用幾何體
        const mat = mats[Math.floor(UTILS.random(0, mats.length))]; //隨機複用材質
        const obj2d = new Object2D(geo, mat).translate(e.offsetX, e.offsetY);
    
        renderer.append(obj2d).redraw();
        setTimeout(() => renderer.delete(obj2d).redraw(), UTILS.random(5000, 15000));
    });


    //擷取畫素示例.readPixels():
    //Renderer.contextOption.preserveDrawingBuffer 必須為 true, 預設為false(開啟可能會影響繪製效能), 否則結果會使一個黑圖
    renderer.domElement.addEventListener("click", e => {
        const geo = new GeometryRect(256, 256);
        geo.translate(e.offsetX, e.offsetY);

        const source = renderer.readPixels(new Box(e.offsetX, e.offsetY, 256, 256));
        const mat = new Material(source);
        mat.setPixelStorei(PixelStoreiFlipY, true); //設定紋理預處理: 翻轉畫素y;
        
        renderer.append(new Object2D(geo, mat)).redraw();
    });


    //畫布截圖
    //renderer.domElement.toBlob(ElementUtils.downloadFile, "image/png"); 


    //新增後期處理(會直接影響渲染效能)
    const geo = new GeometryRect(innerWidth, innerHeight);
    const materialShader = new MaterialShader({
        blending: BlendDefault, 
        vertexCode: defaultShaderCode.texture1.vertex,
        fragmentCode: `#version 300 es
            precision mediump float; //highp, mediump, lowp
            uniform sampler2D uImage;
            uniform vec2 uSize;
            in vec2 vPos;
            out vec4 outColor;
            void main() {
                vec2 uv = vPos / uSize;
                uv.y = 1.0 - uv.y; //翻轉y
                outColor = texture(uImage, uv);
            }
        `,
        uniforms: {
            //必須是 ImageSource, 並且第三個引數必須是null, 否則會建立失敗
            uImage: new Texture(new ImageSource(geo.width, geo.height, null)), 
        },
    });
    renderer.createRenderTarget(new Object2D(geo, materialShader));
    renderer.redrawRenderTarget();
*/
class Renderer {

    static contextOption = {
        alpha: false, //畫布css的背景啟用阿爾法 預設 true
        antialias: true, //抗鋸齒 預設 true
        depth: false, //深度緩衝 預設 true
        desynchronized: true, //從事件迴圈中取消畫布繪製週期的同步來減少延遲
        stencil: false, //模板緩衝 預設 false
        premultipliedAlpha: true,  //預乘阿爾法通道 預設 true
        preserveDrawingBuffer: false, //true: 保留繪圖緩衝區 預設 false 
        failIfMajorPerformanceCaveat: true, //指示在系統效能較低時是否建立上下文

        powerPreference: "default", //指示哪種GPU配置適合於WebGL上下文。
        //可能的值是：
        //"default" 讓使用者代理決定哪個GPU配置最適合。這是預設值。
        //"high-performance" 將渲染效能優先於功耗。
        //"low-power" 將節能優先於渲染效能。
        
        xrCompatible: false,
    }

    static glOption = {
        clearColor: {r: 0.45, g: 0.45, b: 0.45, a: 1}, //gl的背景顏色(在畫布css顏色之上)
    }

    #contextAttributes = {};
    #gl = createWebGL2();
    #pro = null;

    #states = {
        pro: null, 
        blendE: false,
        blendC: {r: -1, g: 0, b: 0, a: 0},
        blendES: [-1, 0],
        blendFS: [-1, 0, 0, 0],
    }

    #geometries = new Map();
    #materials = new Map();
    #textures = new Map();
    #objects = [];
    #caches = [];

    #frameBuffer = null;
    #renderBuffer = null;
    #objectsRT = [];
    #cachesRT = [];
    
    #projectionMatrix = new Matrix3();
    #projectionMatrixA = [];
    get projectionMatrix() {
        return this.#projectionMatrixA; //#projectionMatrix.toArray();
    }

    get lengthObject() {return this.#objects.length;}
    get lengthGeometry() {return this.#geometries.size;}
    get lengthMaterial() {return this.#materials.size;}
    get lengthTexture() {return this.#textures.size;}

    get domElement() {return this.#gl.canvas;}

    constructor() {
        Object.assign(this.#contextAttributes, this.#gl.getContextAttributes());
        this.#pro = {
            texture1: createProgram(this.#gl, defaultShaderCode.texture1.vertex, defaultShaderCode.texture1.fragment),
            texture1_sprite: createProgram(this.#gl, defaultShaderCode.texture1_sprite.vertex, defaultShaderCode.texture1_sprite.fragment),
            texture1_Instanced: createProgram(this.#gl, defaultShaderCode.texture1_Instanced.vertex, defaultShaderCode.texture1_Instanced.fragment),
            texture1_Instanced_points: createProgram(this.#gl, defaultShaderCode.texture1_Instanced_points.vertex, defaultShaderCode.texture1_Instanced_points.fragment),
            texture1_Instanced_sprite: createProgram(this.#gl, defaultShaderCode.texture1_Instanced_sprite.vertex, defaultShaderCode.texture1_Instanced_sprite.fragment),
        }
        initExtensions(this.#gl);

    }
    
    /**
     * @param {Object2D|Sprite|Instanced|InstancedPoints|InstancedSprite} object2d 
     * @returns {this}
     */
    append(object2d) {
        if(arguments.length === 1){
            if(this.#objects.includes(object2d) === true) return this;

            const obj = proHandler(this.#gl, this.#pro, this, object2d),
            cache = obj.cache;
            if(obj === null) return this;
            
            //
            cache.geo = this.#geometries.get(object2d.geometry);
            if(cache.geo === undefined){
                cache.geo = new CacheGeometry(this.#gl, cache.pro, object2d.geometry);
                this.#geometries.set(object2d.geometry, cache.geo);
            }
            cache.geo.len++;
            
            //
            cache.mat = this.#materials.get(object2d.material);
            const matHad = cache.mat !== undefined;
            if(matHad === false){
                cache.mat = new CacheMaterial(object2d.material);
                if(object2d.material.needupdate !== undefined) this.#materials.set(object2d.material, cache.mat);
            } else {
                for(let i = 0; i < cache.mat.textures.length; i++) cache.mat.textures[i].len++;
            }
            cache.mat.len++;
            
            //
            cache.initUniforms(obj.uniforms, matHad, this.#textures);
            this.#caches.push(cache);
            this.#objects.push(object2d);
            return this;
        }
        
        for(let i = 0, arg = arguments; i < arg.length; i++) this.append(arg[i]);

        return this;
    }

    /**
     * @param {Object2D|Sprite|Instanced|InstancedPoints|InstancedSprite} object2d 
     * @returns {this}
     */
    delete(object2d) {
        if(arguments.length === 1){
            const i = this.#objects.indexOf(object2d);
            if(i === -1) return this;
            
            const gl = this.#gl, cache = this.#caches[i];

            this.#objects.splice(i, 1);
            this.#caches.splice(i, 1);

            if(!cache.proName || this.#pro[cache.proName] !== cache.pro){
                cache.dispose(); //是自定義的著色器
            }

            cache.geo.len--;
            if(cache.geo.len === 0){
                cache.geo.dispose(gl);
                this.#geometries.delete(object2d.geometry);
            }

            cache.mat.len--;
            if(cache.mat.len === 0){
                cache.mat.dispose(gl);
                this.#materials.delete(object2d.material);
            }

            for(let i = 0, tex; i < cache.mat.textures.length; i++){
                tex = cache.mat.textures[i];
                tex.len--;
                if(tex.len === 0){
                    tex.dispose(gl);
                    this.#textures.delete(tex.texture);
                }
            }
            
            return this;
        }
        
        for(let i = 0, arg = arguments; i < arg.length; i++) this.delete(arg[i]);

        return this;
    }

    redraw() {
        const len = this.#caches.length;
        if(len === 0) return;
        
        const gl = this.#gl, states = this.#states;
        //gl.clear(gl.COLOR_BUFFER_BIT);

        for(let i = 0, v, n, t, g, m; i < len; i++){
            v = this.#caches[i];
            if(v.obj2d.visible !== true) continue;

            if(states.pro !== v.pro){
                states.pro = v.pro;
                gl.useProgram(states.pro.program);
            }

            if(g !== v.geo){
                g = v.geo;
                for(n in g.attributes) gl.bindVertexArray(g.attributes[n].vao);
                if(g.lenI !== 0) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, g.indexBuffer);
            }

            if(m !== v.mat || m.value.needupdate === true){
                m = v.mat;
                
                if(states.blendE !== m.value.blendEnable){
                    states.blendE = m.value.blendEnable;
                    gl[states.blendE === true ? "enable" : "disable"](gl.BLEND);
                }

                if(states.blendE === true){
                    if(states.blendC.r !== m.value.blendC.r || 
                        states.blendC.g !== m.value.blendC.g || 
                        states.blendC.b !== m.value.blendC.b || 
                        states.blendC.a !== m.value.blendC.a){
                        Object.assign(states.blendC, m.value.blendC);
                        gl.blendColor(states.blendC.r, states.blendC.g, states.blendC.b, states.blendC.a);
                    }
        
                    if(states.blendES[0] !== m.value.blendES[0] ||
                        states.blendES[1] !== m.value.blendES[1]){ 
                        Object.assign(states.blendES, m.value.blendES);
                        if(states.blendES[0] !== -1){
                            if(states.blendES[1] === -1){
                                gl.blendEquation(gl[MUS.blendESs[states.blendES[0]]]);
                            } else {
                                gl.blendEquationSeparate(gl[MUS.blendESs[states.blendES[0]]], gl[MUS.blendESs[states.blendES[1]]]);
                            }
                        }
                    }
        
                    if(states.blendFS[0] !== m.value.blendFS[0] ||
                        states.blendFS[1] !== m.value.blendFS[1] || 
                        states.blendFS[2] !== m.value.blendFS[2] || 
                        states.blendFS[3] !== m.value.blendFS[3]){
                        Object.assign(states.blendFS, m.value.blendFS);
                        if(states.blendFS[0] !== -1){
                            if(states.blendFS[2] === -1){
                                gl.blendFunc(gl[MUS.blendFSs[states.blendFS[0]]], gl[MUS.blendFSs[states.blendFS[1]]]);
                            } else {
                                gl.blendFuncSeparate(gl[MUS.blendFSs[states.blendFS[0]]], gl[MUS.blendFSs[states.blendFS[1]]], gl[MUS.blendFSs[states.blendFS[2]]], gl[MUS.blendFSs[states.blendFS[3]]]);
                            }
                        }
                    }
                }

                for(n = 0; n < m.lenT; n++){
                    t = m.textures[n];
                    gl.bindTexture(gl.TEXTURE_2D, t._texture);
                    gl.activeTexture(t.index);
                    if(t.texture.needupdate === true) updateTexture(gl, t.texture);
                    gl.uniform1i(v.texLocs[n], n);
                }
            } //else {

                //for(n = 0; n < m.lenT; n++){
                    //gl.uniform1i(v.texLocs[n], n); //這玩意每個物件都會建立一個新的(即使材質或紋理都一樣,因為它指向的是自己所用的 program)
                //}

            //}

            t = v.uniforms.length;
            for(n = 0; n < t; n++) v.uniforms[n]();
            
            v.draw();
            //resetBuffers(gl);
        }
    }
    
    dispose() {
        this.#caches.length = 0;
        this.#geometries.clear();
        this.#materials.clear();
        this.#textures.clear();
        if(this.#gl.isContextLost() === false){
            this.#gl.loseContext();
        }
        this.#gl = null;
    }

    setSize(width = innerWidth, height = innerHeight) {
        width *= window.devicePixelRatio;
        height *= window.devicePixelRatio;
        this.domElement.width = width;
        this.domElement.height = height;
        this.#gl.viewport(0, 0, width, height);
        this.#projectionMatrix.projection(width, height);
        this.#projectionMatrix.toArray(this.#projectionMatrixA);
    }

    select(x = 0, y = 0, targets = this.#objects) {
        for(let i = targets.length - 1, obj2d; i >= 0; i--){
            obj2d = targets[i];
            if(obj2d.visible === true && obj2d.containsPoint(x, y) === true) return obj2d;
        }
        return null;
    }

    readPixels(box = new Box(0, 0, 100, 100), result = new ImageSource(box.w, box.h)) {
        const y = (1 - box.y / this.domElement.height) * this.domElement.height - box.h;
        this.#gl.readPixels(box.x, y, box.w, box.h, this.#gl.RGBA, this.#gl.UNSIGNED_BYTE, result.data);
        return result;
    }

    /**
     * @param {Object2D|Sprite|Instanced|InstancedPoints|InstancedSprite} object2d 
     */
    createRenderTarget(object2d) {
        if(this.#cachesRT.length > 0) return console.warn("Renderer.createRenderTarget(): 建立失敗! 已存在");

        const objects = this.#objects, caches = this.#caches;
        this.#objects = this.#objectsRT;
        this.#caches = this.#cachesRT;

        this.append(object2d);
        const cache = this.#caches[0];
        
        if(cache === undefined || 
            cache.mat.textures.length === 0 || 
            ImageSource.prototype.isPrototypeOf(cache.mat.textures[0].texture.source) === false || 
            cache.mat.textures[0].texture.source.data !== null){
            this.delete(object2d);
            console.warn("Renderer.createRenderTarget(): 建立失敗! 引數錯誤");
        } else {
            const gl = this.#gl;
            const frameBuffer = gl.createFramebuffer();
            gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, cache.mat.textures[0]._texture, 0);
            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
            this.#frameBuffer = frameBuffer;
        }
        
        this.#objects = objects;
        this.#caches = caches;
    }

    redrawRenderTarget() {
        this.#gl.bindFramebuffer(this.#gl.FRAMEBUFFER, this.#frameBuffer);
        this.redraw();
        this.#gl.bindFramebuffer(this.#gl.FRAMEBUFFER, null);

        const objects = this.#objects, caches = this.#caches;
        this.#objects = this.#objectsRT;
        this.#caches = this.#cachesRT;
        this.redraw();
        this.#objects = objects;
        this.#caches = caches;
    }

}


export { 
    defaultShaderCode, 

    BlendEquationAdd, 

    BlendDefault, 
    BlendAdd,
    BlendSub,
    BlendMultiply,

    FormatAlpha,
    FormatLuminance,
    FormatLuminanceAlpha,
    FormatRGB,
    FormatRGBA,

    PixelStoreiFlipY, 
    PixelStoreiPremultiplyAlpht,

    Attribute, 
    Geometry, 
    GeometryRect, 
    GeometryCircle,
    GeometryShape, 
    GeometryRectWavy, 

    ImageSource, 
    Texture, 
    Material, 
    MaterialShader, 

    Object2D, 
    Sprite, 
    Instanced, 
    InstancedPoints, 
    InstancedSprite, 

    Renderer, 
}