diff --git a/source/GLRender/Axis.ts b/source/GLRender/Axis.ts new file mode 100644 index 0000000..d9a70cc --- /dev/null +++ b/source/GLRender/Axis.ts @@ -0,0 +1,72 @@ +import { BasicsShader } from "./BasicShader"; +import { GLContextObject } from "./GLContext"; + +class Axis extends GLContextObject{ + + /** + * 坐标轴数据 + */ + static AXIS_VER_DATA = new Float32Array([ + 0,0,0, 1,0,0, + 0,0,0, 0,1,0, + 0,0,0, 0,0,1 + ]); + + private axisVertexBuffer: WebGLBuffer | null = null; + + public onLoad() { + + // 创建缓冲区 + this.axisVertexBuffer = this.gl.createBuffer(); + + // 绑定缓冲区 + this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.axisVertexBuffer); + this.gl.bufferData(this.gl.ARRAY_BUFFER, Axis.AXIS_VER_DATA, this.gl.STATIC_DRAW); + } + + /** + * 绘制半径 + */ + public r:number = 1; + + public pos:number[] = [0, 0, 0]; + + /** + * 绘制坐标轴 + */ + public draw(shader: BasicsShader){ + + // 使用程序 + shader.use(); + + // 绑定缓冲区 + this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.axisVertexBuffer); + + // 指定指针数据 + this.gl.vertexAttribPointer( + shader.attribLocate("aPosition"), + 3, this.gl.FLOAT, false, 0, 0); + + // mvp参数传递 + shader.mvp(this.camera.transformMat); + + // 半径传递 + shader.radius([this.r, this.r, this.r]); + shader.position(this.pos); + + // 绘制 X 轴 + shader.color([1, 0, 0]); + this.gl.drawArrays(this.gl.LINES, 0, 2); + + // 绘制 Y 轴 + shader.color([0, 1, 0]); + this.gl.drawArrays(this.gl.LINES, 2, 2); + + // 绘制 Z 轴 + shader.color([0, 0, 1]); + this.gl.drawArrays(this.gl.LINES, 4, 2); + } +} + +export default Axis; +export { Axis }; \ No newline at end of file diff --git a/source/GLRender/BasicRenderer.ts b/source/GLRender/BasicRenderer.ts index 027e933..571f7b7 100644 --- a/source/GLRender/BasicRenderer.ts +++ b/source/GLRender/BasicRenderer.ts @@ -79,11 +79,6 @@ abstract class BasicRenderer< * 实例化时钟 */ this.clock = new Clock(); - - /** - * 初始化 - */ - this.onLoad(param); } /** @@ -137,9 +132,8 @@ abstract class BasicRenderer< /** * 初始化 - * @param param 渲染器参数 */ - abstract onLoad(param: Partial): void; + abstract onLoad(): void; /** * 渲染器执行 diff --git a/source/GLRender/ClassicRenderer.ts b/source/GLRender/ClassicRenderer.ts index 4ed1c85..07a2992 100644 --- a/source/GLRender/ClassicRenderer.ts +++ b/source/GLRender/ClassicRenderer.ts @@ -1,22 +1,50 @@ import { ObjectID, ObjectData, ICommonParam } from "@Model/Renderer"; import { BasicRenderer, IRendererParams } from "./BasicRenderer"; import { BasicsShader } from "./BasicShader"; +import { Axis } from "./Axis"; interface IClassicRendererParams {} class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> { - onLoad(param: Partial): void { + private basicShader: BasicsShader = undefined as any; + private axisObject: Axis = undefined as any; + + public onLoad(): void { // 自动调节分辨率 this.autoResize(); - let shader = new BasicsShader().bindRenderer(this); + this.basicShader = new BasicsShader().bindRenderer(this); + + this.axisObject = new Axis().bindRenderer(this); + + this.canvas.on("mousemove", () => { + + // 相机旋转 + if (this.canvas.mouseDown) + this.camera.ctrl(this.canvas.mouseMotionX, this.canvas.mouseMotionY); + + }); + + this.canvas.on("mousedown", () => { + this.canvas.can.style.cursor = "grabbing" + }); + + this.canvas.on("mouseup", () => { + this.canvas.can.style.cursor = "grab" + }) // 运行 this.run(); } + loop(t: number): void { + this.cleanCanvas(); + this.camera.generateMat(); + this.axisObject.draw(this.basicShader); + } + clean(id?: ObjectID | ObjectID[]): this { throw new Error("Method not implemented."); } @@ -28,10 +56,6 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> { cube(id: ObjectID, position: ObjectData, param?: ICommonParam): this { throw new Error("Method not implemented."); } - - loop(t: number): void { - this.cleanCanvas(); - } } export default ClassicRenderer; diff --git a/source/GLRender/GLShader.ts b/source/GLRender/GLShader.ts index b044f0d..703dc4d 100644 --- a/source/GLRender/GLShader.ts +++ b/source/GLRender/GLShader.ts @@ -118,7 +118,7 @@ abstract class GLShader< // 缓存搜索 if (cache === undefined || cache <= -1){ - cache = this.gl.getAttribLocation(!this.program, attr as string); + cache = this.gl.getAttribLocation(this.program!, attr as string); if (cache === undefined || cache <= -1) { console.error("Attrib: can not get locate of " + attr); @@ -151,7 +151,7 @@ abstract class GLShader< // 缓存搜索 if (!cache) { - cache = this.gl.getUniformLocation(!this.program, uni as string); + cache = this.gl.getUniformLocation(this.program!, uni as string); if (!cache) console.error("Uniform: can not get locate of " + uni); this.uniformLocationCache.set(uni as string, cache as any); diff --git a/source/Page/Laboratory/Laboratory.scss b/source/Page/Laboratory/Laboratory.scss index f6e7474..d301372 100644 --- a/source/Page/Laboratory/Laboratory.scss +++ b/source/Page/Laboratory/Laboratory.scss @@ -7,5 +7,6 @@ div.main-canvas { div.canvas { width: 100%; height: 100%; + cursor: grab; } } \ No newline at end of file diff --git a/source/Page/Laboratory/Laboratory.tsx b/source/Page/Laboratory/Laboratory.tsx index 8b3ca17..2e6a783 100644 --- a/source/Page/Laboratory/Laboratory.tsx +++ b/source/Page/Laboratory/Laboratory.tsx @@ -26,6 +26,8 @@ class Laboratory extends Component { className: "canvas" }); + renderer.onLoad(); + console.log(renderer); this.canvasContRef.current.appendChild(renderer.canvas.dom);