tmp

src/App.tsx

@@ -1,27 +1,26 @@
 import React from 'react';
 import './App.css';
-import { Demo1 } from "./examples/Demo1";
-import { Test } from "./examples/Test";
-import { Application } from "./renderi/core/Application";
+import { AsyncLoadTestApplication } from "./renderi/lib/AsyncLoadTestApplication";
 
-function fCallback(app: Application): void {
-  console.log(app.fps);
-}
+let canvas: HTMLCanvasElement | null = document.getElementById('render') as HTMLCanvasElement;
+let app: AsyncLoadTestApplication = new AsyncLoadTestApplication(canvas);
+//app.run();
 
+let p: Promise<string> = new Promise((resolve, rejected) => {
+  resolve("ok");
+});
 
-function test() {
-  let canvas: HTMLCanvasElement | null = document.getElementById('render') as HTMLCanvasElement;
-  let rect: ClientRect = canvas.getBoundingClientRect();
-  console.log(rect);
-  let instance = new Test(canvas);
-  //instance.frameCallback = fCallback;
-  instance.start();
-}
+p.then((value) => {
+  console.log(value);
+}).then(() =>{
+  console.log("ending");
+});
 
-function App() {
+console.log("runing");
 
-  test();
+//console.log(p);
 
+function App() {
   return (
     <div className="App">
     </div>

src/renderi/commons/HttpRequest.ts

@@ -0,0 +1,78 @@
+import { rejects } from "node:assert";
+import { ImageInfo } from "../core/ImageInfo";
+
+export class HttpRequest {
+    /**
+     * 读取图片
+     * 这个函数要起作用，必须要在tsconfig.json中将default的es5改成ES2015
+     * @param url 
+     */
+    public static loadImageAsync(url: string): Promise<HTMLImageElement> {
+        return new Promise((resolve, reject): void => {
+            const image: HTMLImageElement = new Image();
+            image.src = url;
+            image.onload = function () {
+                resolve(image);
+            }
+            image.onerror = function () {
+                reject(new Error("Cloud not load image '" + url + "'."));
+            }
+        });
+    }
+
+    /**
+     * 安全读取图片
+     * @param url 
+     * @param name 
+     * @returns 
+     */
+    public static loadImageAsyncSafe(url: string, name: string = url): Promise<ImageInfo | null> {
+        return new Promise((resolve, rehect): void => {
+            let image: HTMLImageElement = new Image();
+            image.onload = function () {
+                let info: ImageInfo = new ImageInfo(name, image);
+                resolve(info);
+            }
+
+            image.onerror = function () {
+                resolve(null);
+            }
+            image.src = url;
+        });
+    }
+
+    /**
+     * 读取文档
+     * @param url 
+     */
+    public static loadTextFileAsync(url: string): Promise<string> {
+        return new Promise((resolve, reject): void => {
+            let xhr: XMLHttpRequest = new XMLHttpRequest();
+            xhr.onreadystatechange = (ev: Event): any => {
+                if (xhr.readyState === 4 && xhr.status === 200) {
+                    resolve(xhr.responseText);
+                }
+            }
+            xhr.open("get", url, true, null, null);
+            xhr.send();
+        });
+    }
+
+    /**
+     * 
+     * @param url 
+     */
+    public static loadArrayBufferAsync(url: string): Promise<ArrayBuffer> {
+        return new Promise((resolve, reject): void => {
+            let xhr: XMLHttpRequest = new XMLHttpRequest();
+            xhr.responseType = "arraybuffer";
+            xhr.onreadystatechange = (ev: Event): any => {
+                if (xhr.readyState === 4 && xhr.status === 2000) {
+                    resolve(xhr.response as ArrayBuffer);
+                }
+            }
+            xhr.open("get", url, true, null, null);
+            xhr.send();
+        });
+    }
+}

src/renderi/core/ImageInfo.ts

@@ -0,0 +1,9 @@
+export class ImageInfo {
+    public name: string;
+    public image: HTMLElement;
+
+    public constructor(path: string, image: HTMLElement) {
+        this.name = path;
+        this.image = image;
+    }
+}

src/renderi/lib/AsyncLoadTestApplication.ts

@@ -0,0 +1,50 @@
+import { HttpRequest } from "../commons/HttpRequest";
+import { Application } from "../core/Application";
+
+export class AsyncLoadTestApplication extends Application {
+
+    /**
+     * @var 需要加载的图片
+     */
+    private _urls: string[] = ["data/pic0.png", "data/pic1.jpg", "data/textureUV.jpg"];
+
+    /**
+     * 逐个加载
+     * 函数体内用了await，所以函数申明必须使用async关键字
+     */
+    public async loadImageSequence(): Promise<void> {
+        for (let i = 0; i < this._urls.length; i++) {
+            let image: HTMLImageElement = await HttpRequest.loadImageAsync(this._urls[i]);
+            console.log("Load image sequence ", i, image);
+        }
+    }
+
+    /**
+     * 并行加载图片
+     */
+    public loadImageParallel(): void {
+        let _promises: Promise<HTMLImageElement>[] = [];
+        for (let i = 0; i < this._urls.length; i++) {
+            _promises.push(HttpRequest.loadImageAsync(this._urls[i]));
+        }
+        Promise.all(_promises).then((images: HTMLImageElement[]) => {
+            for (let i: number = 0; i < images.length; i++) {
+                console.log("Load image parallel", images[i]);
+            }
+        });
+    }
+
+    /**
+     * 加载一个txt文件
+     */
+    public async loadTextFile(): Promise<void> {
+        let str: string = await HttpRequest.loadTextFileAsync("data/test.txt");
+        console.log(str);
+    }
+
+    public async run(): Promise<void> {
+        await this.loadImageSequence();
+        await this.loadTextFile();                
+        this.loadImageParallel();
+    }
+}

src/renderi/lib/CameraApplication.ts

@@ -1,15 +1,17 @@
+import { CanvasKeyBoardEvent } from "../core/Event";
 import { GLApplication } from "../webgl/GLApplication";
 
 export class CameraApplication extends GLApplication {
     /**
      * @var 相机控制
      */
-    public camera: Camera;
+    //public camera: Camera;
 
     public constructor(canvas: HTMLCanvasElement, contextAttributes: WebGLContextAttributes = { premultipliedAlpha: false }, need2d: boolean = false) {
-        super(canvas, contextAttributes, need2d);
-        this.camera = new Camera(this.gl, canvas.width, canvas.height, 45, 1, 200);
-        this.camera.z = 4;
+        super(canvas);
+        //super(canvas, contextAttributes, need2d);
+        //this.camera = new Camera(this.gl, canvas.width, canvas.height, 45, 1, 200);
+        //this.camera.z = 4;
     }
 
     /**
@@ -19,7 +21,7 @@ export class CameraApplication extends GLApplication {
      * @param intervalSec 
      */
     public update(elapsedMsec: number, intervalSec: number) {
-        this.camera.update(intervalSec);
+        //this.camera.update(intervalSec);
     }
 
     /**
@@ -27,7 +29,7 @@ export class CameraApplication extends GLApplication {
      * @param evt 
      */
     public onKeyPress(evt: CanvasKeyBoardEvent): void {
-        if (evt.key === "w") {
+        /*if (evt.key === "w") {
             this.camera.moveForward(-1);   // 摄像机向前运行        
         } else if (evt.key === "s") {
             this.camera.moveForward(1);    // 摄像机向后运行
@@ -45,6 +47,6 @@ export class CameraApplication extends GLApplication {
             this.camera.roll(1);             // 摄像机绕本身的Z轴旋转
         } else if (evt.key == "p") {
             this.camera.pitch(1);            // 摄像机绕本身的X轴旋转
-        }
+        }*/
     }
 }

src/renderi/webgl/GLApplication.ts

@@ -4,17 +4,17 @@ export class GLApplication extends Application {
     /**
      * @var WebGL 
      */
-    public gl: WebGLRenderingContext;
+    //public gl: WebGLRenderingContext;
 
     /**
      * @var 模拟OpenGL1.1中的矩阵堆栈
      */
-    public matStack: GLWordMatrixStack;
+    //public matStack: GLWordMatrixStack;
 
     /**
     * @var 模拟OpenGL1.1的立即绘制模式
     */
-    public builder: GLMeshBuilder;
+   //public builder: GLMeshBuilder;
 
     /**
      * @var canvas 用来绘制文字