diff --git a/data/pic0.png b/public/data/pic0.png similarity index 100% rename from data/pic0.png rename to public/data/pic0.png diff --git a/data/pic1.jpg b/public/data/pic1.jpg similarity index 100% rename from data/pic1.jpg rename to public/data/pic1.jpg diff --git a/data/test.txt b/public/data/test.txt similarity index 100% rename from data/test.txt rename to public/data/test.txt diff --git a/data/textureUV.jpg b/public/data/textureUV.jpg similarity index 100% rename from data/textureUV.jpg rename to public/data/textureUV.jpg diff --git a/src/App.tsx b/src/App.tsx index 95ac9178..8ba8aa90 100755 --- a/src/App.tsx +++ b/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 = 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 (
diff --git a/src/renderi/commons/HttpRequest.ts b/src/renderi/commons/HttpRequest.ts new file mode 100755 index 00000000..8f06bb4e --- /dev/null +++ b/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 { + 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 { + 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 { + 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 { + 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(); + }); + } +} \ No newline at end of file diff --git a/src/renderi/core/ImageInfo.ts b/src/renderi/core/ImageInfo.ts new file mode 100755 index 00000000..7ebd558d --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/renderi/lib/AsyncLoadTestApplication.ts b/src/renderi/lib/AsyncLoadTestApplication.ts new file mode 100755 index 00000000..1eec9643 --- /dev/null +++ b/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 { + 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[] = []; + 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 { + let str: string = await HttpRequest.loadTextFileAsync("data/test.txt"); + console.log(str); + } + + public async run(): Promise { + await this.loadImageSequence(); + await this.loadTextFile(); + this.loadImageParallel(); + } +} \ No newline at end of file diff --git a/src/renderi/lib/CameraApplication.ts b/src/renderi/lib/CameraApplication.ts index dc86f0d7..f9b5e069 100755 --- a/src/renderi/lib/CameraApplication.ts +++ b/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轴旋转 - } + }*/ } } \ No newline at end of file diff --git a/src/renderi/webgl/GLApplication.ts b/src/renderi/webgl/GLApplication.ts index 49cd5374..eb3da088 100755 --- a/src/renderi/webgl/GLApplication.ts +++ b/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 用来绘制文字