diff --git a/source/GLRender/BaseCube.ts b/source/GLRender/BaseCube.ts index 2eef7b6..40e4a29 100644 --- a/source/GLRender/BaseCube.ts +++ b/source/GLRender/BaseCube.ts @@ -1,11 +1,89 @@ import { GLContextObject } from "./GLContext"; +import { Camera } from "./Camera"; +import { BasicsShader } from "./BasicShader"; -class BaseCube extends GLContextObject { +class BaseCube extends GLContextObject{ - onLoad() { - throw new Error("Method not implemented."); - } + /** + * 立方体数据 + */ + static CUBE_VER_DATA = new Float32Array([ + 1,1,1, -1,1,1, -1,1,-1, 1,1,-1, + 1,-1,1, -1,-1,1, -1,-1,-1, 1,-1,-1 + ]); + + /** + * 立方体线段绘制索引 + */ + static CUBE_ELE_DATA = new Uint16Array([ + 0,1, 1,2, 2,3, 3,0, + 4,5, 5,6, 6,7, 7,4, + 0,4, 1,5, 2,6, 3,7 + ]); + + public onLoad() { + + // 创建缓冲区 + this.cubeVertexBuffer = this.gl.createBuffer(); + this.cubeElementBuffer = this.gl.createBuffer(); + + // 绑定缓冲区 + this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.cubeVertexBuffer); + this.gl.bufferData(this.gl.ARRAY_BUFFER, BaseCube.CUBE_VER_DATA, this.gl.STATIC_DRAW); + + this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.cubeElementBuffer); + this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, BaseCube.CUBE_ELE_DATA, this.gl.STATIC_DRAW); + } + + private cubeVertexBuffer: WebGLBuffer | null = null; + private cubeElementBuffer: WebGLBuffer | null = null; + + /** + * 绘制半径 + */ + private r:[number,number,number] = [1, 1, 1]; + + /** + * 坐标 + */ + public position = [0, 0, 0]; + + /** + * 颜色 + */ + public color = [.5, .5, .5]; + + /** + * 绘制立方体 + */ + public draw(shader: BasicsShader){ + + // 使用程序 + shader.use(); + + // 绑定缓冲区 + this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.cubeVertexBuffer); + this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.cubeElementBuffer); + + // 指定指针数据 + this.gl.vertexAttribPointer( + shader.attribLocate("aPosition"), + 3, this.gl.FLOAT, false, 0, 0); + + // mvp参数传递 + shader.mvp(this.camera.transformMat); + + // 半径传递 + shader.radius(this.r); + shader.position(this.position); + + // 指定颜色 + shader.color(this.color); + + // 开始绘制 + this.gl.drawElements(this.gl.LINES, 24, this.gl.UNSIGNED_SHORT, 0); + } } -export default GLContextObject; -export { GLContextObject }; \ No newline at end of file +export default BaseCube; +export { BaseCube }; \ No newline at end of file diff --git a/source/GLRender/BasicRenderer.ts b/source/GLRender/BasicRenderer.ts index 571f7b7..749cdf0 100644 --- a/source/GLRender/BasicRenderer.ts +++ b/source/GLRender/BasicRenderer.ts @@ -75,6 +75,9 @@ abstract class BasicRenderer< } } + // 开启深度测试 + this.gl.enable(this.gl.DEPTH_TEST); + /** * 实例化时钟 */ diff --git a/source/GLRender/ClassicRenderer.ts b/source/GLRender/ClassicRenderer.ts index 07a2992..9a9020a 100644 --- a/source/GLRender/ClassicRenderer.ts +++ b/source/GLRender/ClassicRenderer.ts @@ -1,7 +1,8 @@ import { ObjectID, ObjectData, ICommonParam } from "@Model/Renderer"; -import { BasicRenderer, IRendererParams } from "./BasicRenderer"; +import { BasicRenderer } from "./BasicRenderer"; import { BasicsShader } from "./BasicShader"; import { Axis } from "./Axis"; +import { BaseCube } from "./BaseCube"; interface IClassicRendererParams {} @@ -9,6 +10,7 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> { private basicShader: BasicsShader = undefined as any; private axisObject: Axis = undefined as any; + private cubeObject: BaseCube = undefined as any; public onLoad(): void { @@ -19,6 +21,8 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> { this.axisObject = new Axis().bindRenderer(this); + this.cubeObject = new BaseCube().bindRenderer(this); + this.canvas.on("mousemove", () => { // 相机旋转 @@ -43,6 +47,7 @@ class ClassicRenderer extends BasicRenderer<{}, IClassicRendererParams> { this.cleanCanvas(); this.camera.generateMat(); this.axisObject.draw(this.basicShader); + this.cubeObject.draw(this.basicShader); } clean(id?: ObjectID | ObjectID[]): this {