tmp

src/components/Render.tsx

@@ -1,39 +1,24 @@
-import React from "react";
-import { HttpRequest } from "../renderi/commons/HttpRequest";
+import React, { useEffect } from "react";
+import { BasicWebGLApplication } from "../renderi/webgl/GLRenderingContext";
 
 interface RenderProps {
     name: string
 }
 
-class Render extends React.Component<RenderProps> {
+const Render: React.FC<RenderProps> = (prop) => {
 
-    //eslint-disable-next-line
-    constructor(prop) {
-        super(prop);
-    }
-
-    componentDidMount() {
+    useEffect(() => {
         let canvas: HTMLCanvasElement | null = document.getElementById('render') as HTMLCanvasElement;
-        console.log(canvas)
+        let app: BasicWebGLApplication = new BasicWebGLApplication(canvas);
+        app.run();
+    }, []);
 
-        let ret = HttpRequest.loadImg("https://3dresource.aihomee.com/uploads/image/2021-04-09/original/202104091701593415.jpg");
 
-        ret.then((data) => {
-            let path:string = URL.createObjectURL(data);
-            document.querySelector('#ig')?.setAttribute("src",path);
-        });
-
-    }
-
-    render() {
-        return <>
-            <div>
-                {this.props.name}
+    return <div>
+        {prop.name}
         <canvas id="render" width="800" height="600" style={{ backgroundColor: 'lightgray' }}> </canvas>
-                <img src="" alt="test" id="ig" />
     </div>
-        </>;
-    }
+
 }
 
 //lightgray

src/renderi/lib/AsyncLoadTestApplication.ts

@@ -1,3 +1,4 @@
+import { resolve } from "node:dns";
 import { HttpRequest } from "../commons/HttpRequest";
 import { Application } from "../core/Application";
 
@@ -22,7 +23,8 @@ export class AsyncLoadTestApplication extends Application {
     /**
      * 并行加载图片
      */
-    public loadImageParallel(): void {
+    public loadImageParallel(): Promise<void> {
+        return new Promise((resolve, reject): void => {
             let _promises: Promise<HTMLImageElement>[] = [];
             for (let i = 0; i < this._urls.length; i++) {
                 _promises.push(HttpRequest.loadImageAsync(this._urls[i]));
@@ -31,7 +33,10 @@ export class AsyncLoadTestApplication extends Application {
                 for (let i: number = 0; i < images.length; i++) {
                     console.log("Load image parallel", images[i]);
                 }
+                resolve();
             });
+        });
+
     }
 
     /**
@@ -45,6 +50,34 @@ export class AsyncLoadTestApplication extends Application {
     public async run(): Promise<void> {
         await this.loadImageSequence();
         await this.loadTextFile();
-        this.loadImageParallel();
+        await this.loadImageParallel();
+
+        // HttpRequest.loadImg("https://3dresource.aihomee.com/uploads/image/2021-04-09/original/202104091701593415.jpg");
+
+        // HttpRequest.loadImg("https://3dresource.aihomee.com/uploads/image/2021-06-21/original/202106210918315593.jpg");
+
+        // let urls: string[] = [
+        //     "https://3dresource.aihomee.com/uploads/image/2021-06-19/original/202106191144276197.jpg",
+        //     "https://3dresource.aihomee.com/uploads/image/2021-04-22/original/202104221743486390.jpg",
+        //     "https://3dresource.aihomee.com/uploads/image/2021-04-09/original/20210409170159930.jpg",
+        //     "https://3dresource.aihomee.com/uploads/image/2021-04-09/original/202104092012357318.jpg",
+        //     "https://3dresource.aihomee.com/uploads/image/2021-06-21/original/202106210916006390.jpg",
+        //     "https://3dresource.aihomee.com/uploads/image/2021-06-21/original/202106210918315593.jpg",
+        //     "https://3dresource.aihomee.com/uploads/image/2021-06-21/original/202106211159238419.jpg"
+        // ];
+
+        // for(let i: number = 0; i < urls.length; i++){
+        //     HttpRequest.loadImg(urls[i]);
+        // }
+
+
+        //console.log(ret);
+
+        // await ret.then((data) => {
+        //     let path:string = URL.createObjectURL(data);
+        //     console.log("load img");
+        // });
+
+        console.log("finished");
     }
 }

src/renderi/math/Mat4.ts

@@ -18,6 +18,13 @@ export class mat4 {
         }
     }
 
+    public print(): void {
+        console.log(this.values[0] + " " + this.values[1] + " " + this.values[2] + " " + this.values[3]);
+        console.log(this.values[4] + " " + this.values[5] + " " + this.values[6] + " " + this.values[6]);
+        console.log(this.values[8] + " " + this.values[9] + " " + this.values[10] + " " + this.values[11]);
+        console.log(this.values[12] + " " + this.values[13] + " " + this.values[14] + " " + this.values[15]);
+    }
+
     public set(values: number[]): mat4 {
         for (let i = 0; i < 16; i++) {
             this.values[i] = values[i];
@@ -608,25 +615,10 @@ export class mat4 {
         let y = vec3.cross(z, x).normalize();
 
         return new mat4([
-            x.x,
-            y.x,
-            z.x,
-            0,
-
-            x.y,
-            y.y,
-            z.y,
-            0,
-
-            x.z,
-            y.z,
-            z.z,
-            0,
-
-            -vec3.dot(x, position),
-            -vec3.dot(y, position),
-            -vec3.dot(z, position),
-            1
+            x.x, y.x, z.x, 0,
+            x.y, y.y, z.y, 0,
+            x.z, y.z, z.z, 0,
+            -vec3.dot(x, position), -vec3.dot(y, position), -vec3.dot(z, position), 1
         ]);
     }
 

src/renderi/math/Matrix4.ts

@@ -0,0 +1,199 @@
+import { EPSILON } from "../commons/types";
+import { vec3, vec4 } from ".";
+
+
+export class Matrix4 {
+
+
+    /**
+     * @var 矩阵数据
+     */
+    public values = new Float32Array(16);
+
+
+    public constructor(values: number[] | null = null) {
+        if (values) {
+            this.setAll(values);
+        }
+        else {
+            this.setIdentity();
+        }
+    }
+
+    /**
+     * 通过数组去设置矩阵
+     * @param values Array
+     * @returns 
+     */
+    public setAll(values: number[]): Matrix4 {
+        for (let i = 0; i < 16; i++) {
+            this.values[i] = values[i];
+        }
+
+        return this;
+    }
+
+    /**
+     * 通过索引去设置矩阵
+     * @param index 
+     * @param value 
+     * @returns 
+     */
+    public setIndex(index: number, value: number): Matrix4 {
+        if (index < 0 || index > 15) {
+            throw new Error("Index out of bounds");
+        }
+        this.values[index] = value;
+        return this;
+    }
+
+    /**
+     * 通过行和列去设置矩阵
+     * @param row 
+     * @param col 
+     * @param value 
+     * @returns 
+     */
+    public set(row: number, col: number, value: number): Matrix4 {
+        let index: number = row * 4 + col;
+        if (index < 0 || index > 15) {
+            throw new Error("Index out of bounds");
+        }
+        this.setIndex(index, value);
+        return this;
+    }
+
+    /**
+     * 通过索引来获取矩阵元素的值
+     * @param index 
+     * @returns 
+     */
+    public getIndex(index: number): number {
+        if (index < 0 || index > 15) {
+            throw new Error("Index out of bounds");
+        }
+        return this.values[index];
+    }
+
+    /**
+     * 获取矩阵的一行
+     * @param index 
+     * @returns 
+     */
+    public getRow(index: number): vec4 {
+        let ret: vec4 = new vec4();
+        ret.r = this.get(index, 0);
+        ret.g = this.get(index, 1);
+        ret.b = this.get(index, 2);
+        ret.a = this.get(index, 3);
+        return ret;
+    }
+
+    /**
+     * 获取矩阵的一列
+     * @param index 
+     * @returns 
+     */
+    public getCol(index: number): vec4 {
+        let ret: vec4 = new vec4();
+        ret.r = this.get(0, index);
+        ret.g = this.get(1, index);
+        ret.b = this.get(2, index);
+        ret.a = this.get(3, index);
+        return ret;
+    }
+
+    /**
+     * 通过行列号来获取矩阵元素的值
+     * @param row 
+     * @param col 
+     * @returns 
+     */
+    public get(row: number, col: number): number {
+        let index: number = row * 4 + col;
+        return this.getIndex(index);
+    }
+
+    /**
+     * 打印
+     */
+    public print(): void {
+        console.log(this.values[0] + " " + this.values[1] + " " + this.values[2] + " " + this.values[3]);
+        console.log(this.values[4] + " " + this.values[5] + " " + this.values[6] + " " + this.values[6]);
+        console.log(this.values[8] + " " + this.values[9] + " " + this.values[10] + " " + this.values[11]);
+        console.log(this.values[12] + " " + this.values[13] + " " + this.values[14] + " " + this.values[15]);
+    }
+    /**
+     * 设置成单位矩阵
+     * @returns 
+     */
+    public setIdentity(): Matrix4 {
+        this.values[0] = 1;
+        this.values[1] = 0;
+        this.values[2] = 0;
+        this.values[3] = 0;
+        this.values[4] = 0;
+        this.values[5] = 1;
+        this.values[6] = 0;
+        this.values[7] = 0;
+        this.values[8] = 0;
+        this.values[9] = 0;
+        this.values[10] = 1;
+        this.values[11] = 0;
+        this.values[12] = 0;
+        this.values[13] = 0;
+        this.values[14] = 0;
+        this.values[15] = 1;
+
+        return this;
+    }
+
+
+    /**
+     * 矩阵乘
+     * @param matrix 
+     * @returns 
+     */
+    public multiply(matrix: Matrix4): Matrix4 {
+
+        for (let i = 0; i < 4; i++) {
+            for(let j = 0; j < 4; j++){
+                let v1: vec4 = this.getRow()
+                this.set(i,j, )
+            }
+        }
+        return this;
+    }
+
+
+    /**
+     * 生成一个投影矩阵
+     * @param left 
+     * @param right 
+     * @param bottom 
+     * @param top 
+     * @param near 
+     * @param far 
+     * @returns 
+     */
+    public static orthographic(left: number, right: number, bottom: number, top: number, near: number, far: number): Matrix4 {
+        let ret: Matrix4 = new Matrix4();
+
+        let tm: Matrix4 = new Matrix4();
+        tm.set(0, 3, -(left + right) / 2);
+        tm.set(1, 3, -(bottom + top) / 2);
+        tm.set(2, 3, -(near + far) / 2);
+
+        let sm: Matrix4 = new Matrix4();
+        sm.set(0, 0, 2 / (right - left));
+        sm.set(1, 2, 2 / (top - bottom));
+        sm.set(2, 2, 2 / (far - near));
+
+        let tzm: Matrix4 = new Matrix4();
+        tzm.set(2, 2, -1);
+
+
+
+        return ret;
+    }
+}

src/renderi/math/index.ts

@@ -4,3 +4,4 @@ export * from './Vec4';
 export * from './Mat4';
 export * from './Quat';
 export * from '../commons/Util';
+export * from './Matrix4';

src/renderi/webgl/GLHelper.ts

@@ -0,0 +1,30 @@
+export class GLHelper {
+    /**
+     * 打印webgl当前状态
+     */
+    public static printStates(gl: WebGLRenderingContext | null): void {
+        if (gl === null) {
+            return;
+        }
+        console.log("1. isBlendEnable = " + gl.isEnabled(gl.BLEND));
+        console.log("2. isCullFaceEnable = " + gl.isEnabled(gl.CULL_FACE));
+        console.log("3. isDepthTestEnable = " + gl.isEnabled(gl.DEPTH_TEST));
+        console.log("4. isDitherEnable = " + gl.isEnabled(gl.DITHER));
+        console.log("5. isPolygonOffsetFillEnable = " + gl.isEnabled(gl.POLYGON_OFFSET_FILL));
+        console.log("6. isSampleAlphtToCoverageEnable = " + gl.isEnabled(gl.SAMPLE_ALPHA_TO_COVERAGE));
+        console.log("7. isSampleCoverageEnable = " + gl.isEnabled(gl.SAMPLE_COVERAGE));
+        console.log("8. isScissorEnable = " + gl.isEnabled(gl.SCISSOR_TEST));
+        console.log("9. isStencilEnable = " + gl.isEnabled(gl.STENCIL_TEST));
+    }
+
+    /**
+     * 触发上下文丢失事件
+     * @param gl 
+     */
+    public static triggerContextLostEvent(gl: WebGLRenderingContext): void {
+        let ret: WEBGL_lose_context | null = gl.getExtension('WEBGL_lose_context');
+        if(ret !== null){
+            ret.loseContext();
+        }
+    }
+}

src/renderi/webgl/GLRenderingContext.ts

@@ -0,0 +1,71 @@
+import { Application } from "../core/Application";
+import { mat4, Util, vec3, Matrix4 } from "../math";
+import { GLHelper } from "./GLHelper"
+
+export class BasicWebGLApplication extends Application {
+
+    /**
+     * @var 渲染上下文
+     */
+    public gl: WebGLRenderingContext;
+
+    /**
+     * @var 投影矩阵
+     */
+    public projectMatrix: mat4;
+
+    /** 
+    * @var 视图矩阵 
+    */
+    public viewMatrix: mat4;
+
+    /**
+     * @var 视图投影矩阵
+     */
+    public viewProjectMatrix: mat4;
+
+
+    public constructor(canvas: HTMLCanvasElement) {
+
+        super(canvas);
+
+        //创建渲染上下文
+        let contextAttribs: WebGLContextAttributes = {
+            depth: true, //创建深度缓存区
+            stencil: true, //创建蒙板缓冲区
+            alpha: true, //颜色缓冲区是否开始透明通道
+            premultipliedAlpha: true, //预乘？？？？
+            antialias: true,//是否使用抗锯齿
+            preserveDrawingBuffer: false //是否保留上一帧的内容，这里设置乘false，所以不保留，所以不需要clear
+        }
+        let ctx: WebGLRenderingContext | null = this.canvas.getContext("webgl", contextAttribs);
+        if (ctx === null) {
+            throw new Error("getContext Error!");
+        }
+        this.gl = ctx;
+
+        //渲染上下文丢失事件处理,如果上下文丢失，则会重新创建一个上下文对象
+        let that = this;
+        this.canvas.addEventListener('webglcontextlost', function (e) {
+            console.log(JSON.stringify(e));
+            let ctx: WebGLRenderingContext | null = that.canvas.getContext("webgl", contextAttribs);
+            if (ctx === null) {
+                throw new Error("getContext Error!");
+            }
+            that.gl = ctx;
+        }, false);
+
+        //初始化视图和投影矩阵
+        this.projectMatrix = mat4.perspective(Util.toRadian(45), this.canvas.width/this.canvas.height, 0.1, 100);
+        this.viewMatrix = mat4.lookAt(new vec3([0,0,5]), new vec3([0,0,0]), new vec3([0,1,0]));
+        this.viewProjectMatrix = mat4.product(this.projectMatrix, this.viewMatrix);
+    }
+
+
+    public run(): void {
+        let m:Matrix4 = Matrix4.orthographic(-50, 50, -25, 25, -25, 25);
+        
+        //GLHelper.printStates(this.gl);
+        //console.log(this.gl.getParameter(this.gl.DEPTH_TEST));
+    }
+}