From 0945a188779d461b081aa591f133cd12c0ead1a4 Mon Sep 17 00:00:00 2001 From: Alex Badea Date: Fri, 6 Jul 2018 02:19:32 +0300 Subject: [PATCH] Redesigned architecture; can draw names --- Arrow.js | 68 ------------------ CoordSystem.js | 47 ------------ DrawableBlueprint.js | 14 ++++ Drawable.js => DrawableInstance.js | 74 +++++++++---------- Point.js | 37 ---------- Scene.js | 5 +- Segment.js | 39 ---------- Triangle.js | 40 ----------- Vector.js | 8 --- blueprints/Arrow.js | 11 +++ blueprints/CoordSystem.js | 19 +++++ blueprints/Point.js | 14 ++++ blueprints/Segment.js | 15 ++++ blueprints/Triangle.js | 16 +++++ blueprints/Vector.js | 14 ++++ instances/ArrowInstance.js | 57 +++++++++++++++ instances/CoordSystemInstance.js | 37 ++++++++++ instances/PointInstance.js | 29 ++++++++ instances/SegmentInstance.js | 31 ++++++++ instances/TriangleInstance.js | 32 +++++++++ instances/VectorInstance.js | 5 ++ main.html | 21 ++++-- main.js | 112 ++++++++++++++++++++--------- 23 files changed, 422 insertions(+), 323 deletions(-) delete mode 100644 Arrow.js delete mode 100644 CoordSystem.js create mode 100644 DrawableBlueprint.js rename Drawable.js => DrawableInstance.js (54%) delete mode 100644 Point.js delete mode 100644 Segment.js delete mode 100644 Triangle.js delete mode 100644 Vector.js create mode 100644 blueprints/Arrow.js create mode 100644 blueprints/CoordSystem.js create mode 100644 blueprints/Point.js create mode 100644 blueprints/Segment.js create mode 100644 blueprints/Triangle.js create mode 100644 blueprints/Vector.js create mode 100644 instances/ArrowInstance.js create mode 100644 instances/CoordSystemInstance.js create mode 100644 instances/PointInstance.js create mode 100644 instances/SegmentInstance.js create mode 100644 instances/TriangleInstance.js create mode 100644 instances/VectorInstance.js diff --git a/Arrow.js b/Arrow.js deleted file mode 100644 index f4dddd9..0000000 --- a/Arrow.js +++ /dev/null @@ -1,68 +0,0 @@ -class Arrow extends Segment { - constructor(name, p1, p2) { - super(name, p1, p2); - } - - init(gl) { - super.init(gl); - this.initArrowHead(gl); - } - - draw(programInfo) { - super.draw(programInfo); - this.drawArrowHead(programInfo); - } - - initArrowHead(gl) { - const dir = vec3.normalize(vec3.create(), vec3.sub(vec3.create(), this.p1.position, this.p2.position)); - const basePos = vec3.add(vec3.create(), this.p2.position, vec3.scale(vec3.create(), dir, 0.1)); - - const xAxis = vec3.fromValues(1, 0, 0); - const yAxis = vec3.fromValues(0, 1, 0); - const zAxis = vec3.fromValues(0, 0, 1); - - const newDir1 = vec3.scale(vec3.create(), vec3.normalize(vec3.create(), vec3.cross(vec3.create(), dir, xAxis)), 0.02); - const newDir2 = vec3.negate(vec3.create(), newDir1); - const newDir3 = vec3.scale(vec3.create(), vec3.normalize(vec3.create(), vec3.cross(vec3.create(), dir, yAxis)), 0.02); - const newDir4 = vec3.negate(vec3.create(), newDir3); - const newDir5 = vec3.scale(vec3.create(), vec3.normalize(vec3.create(), vec3.cross(vec3.create(), dir, zAxis)), 0.02); - const newDir6 = vec3.negate(vec3.create(), newDir5); - - const shiftedBasePos1 = vec3.add(vec3.create(), basePos, newDir1); - const shiftedBasePos2 = vec3.add(vec3.create(), basePos, newDir2); - const shiftedBasePos3 = vec3.add(vec3.create(), basePos, newDir3); - const shiftedBasePos4 = vec3.add(vec3.create(), basePos, newDir4); - const shiftedBasePos5 = vec3.add(vec3.create(), basePos, newDir5); - const shiftedBasePos6 = vec3.add(vec3.create(), basePos, newDir6); - - const p1 = new Point("", shiftedBasePos1, this.p2.color); - const p2 = new Point("", shiftedBasePos2, this.p2.color); - const p3 = new Point("", shiftedBasePos3, this.p2.color); - const p4 = new Point("", shiftedBasePos4, this.p2.color); - const p5 = new Point("", shiftedBasePos5, this.p2.color); - const p6 = new Point("", shiftedBasePos6, this.p2.color); - - this.s1 = new Segment("", this.p2, p1); - this.s2 = new Segment("", this.p2, p2); - this.s3 = new Segment("", this.p2, p3); - this.s4 = new Segment("", this.p2, p4); - this.s5 = new Segment("", this.p2, p5); - this.s6 = new Segment("", this.p2, p6); - - this.s1.init(gl); - this.s2.init(gl); - this.s3.init(gl); - this.s4.init(gl); - this.s5.init(gl); - this.s6.init(gl); - } - - drawArrowHead(programInfo) { - this.s1.draw(programInfo); - this.s2.draw(programInfo); - this.s3.draw(programInfo); - this.s4.draw(programInfo); - this.s5.draw(programInfo); - this.s6.draw(programInfo); - } -} \ No newline at end of file diff --git a/CoordSystem.js b/CoordSystem.js deleted file mode 100644 index 9475cc1..0000000 --- a/CoordSystem.js +++ /dev/null @@ -1,47 +0,0 @@ -class CoordSystem extends Drawable { - constructor(name, modelMatrix) { - super(name); - if (modelMatrix == undefined) - throw new Error("Undefined or null params"); - this.modelMatrix = modelMatrix; - this.drawList = []; - } - - add(drawable) { - this.drawList.push(drawable); - } - - init(gl) { - super.init(gl); - this.xAxis = new Vector("", new Point("", vec3.fromValues(1, 0, 0), vec3.fromValues(1, 0, 0))); - this.yAxis = new Vector("", new Point("", vec3.fromValues(0, 1, 0), vec3.fromValues(0, 1, 0))); - this.zAxis = new Vector("", new Point("", vec3.fromValues(0, 0, 1), vec3.fromValues(0, 0, 1))); - - this.xAxis.init(gl); - this.yAxis.init(gl); - this.zAxis.init(gl); - - for (const e of this.drawList) { - e.init(gl); - } - } - - draw(programInfo) { - super.draw(programInfo); - const currentModelMatrix = this.gl.getUniform(programInfo.program, programInfo.uniformLocations.modelMatrix, 0); - const modelMatrix = mat4.mul(mat4.create(), currentModelMatrix, this.modelMatrix); - this.gl.uniformMatrix4fv(this.programInfo.uniformLocations.modelMatrix, false, modelMatrix); - - this.xAxis.draw(programInfo); - this.yAxis.draw(programInfo); - this.zAxis.draw(programInfo); - - for (const e of this.drawList) { - e.draw(programInfo); - } - } - - getNamePos() { - return vec3.fromValues(0.333, 0.333, 0.333); - } -} \ No newline at end of file diff --git a/DrawableBlueprint.js b/DrawableBlueprint.js new file mode 100644 index 0000000..2480c96 --- /dev/null +++ b/DrawableBlueprint.js @@ -0,0 +1,14 @@ +class DrawableBlueprint { + constructor(name, color) { + if (new.target === DrawableBlueprint) + throw new TypeError("Cannot instantiate abstract class"); + if (name == undefined || color == undefined) + throw new Error("Undefined or null params"); + this.name = name; + this.color = color; + } + + instantiate(gl, programInfo) { + throw new Error("Cannot call abstract method"); + } +} \ No newline at end of file diff --git a/Drawable.js b/DrawableInstance.js similarity index 54% rename from Drawable.js rename to DrawableInstance.js index f3fcf19..76351ba 100644 --- a/Drawable.js +++ b/DrawableInstance.js @@ -1,74 +1,64 @@ -class Drawable { - constructor(name) { - if (new.target === Drawable) +class DrawableInstance { + constructor(drawable, gl, programInfo) { + if (new.target === DrawableInstance) throw new TypeError("Cannot instantiate abstract class"); - if (name == undefined) - throw new Error("Undefined or null params"); - this.name = name; - } - - init(gl) { - if (gl == undefined) + if (drawable == undefined || gl == undefined || programInfo == undefined) throw new Error("Undefined or null params"); + this.drawable = drawable; this.gl = gl; + this.programInfo = programInfo; this.buffers = { position: gl.createBuffer(), color: gl.createBuffer() }; - this._INIT_NAME(); + this._INIT_NAME(drawable, gl); } - // Depreciat: va fi înocuită când se va găsi o metodă mai bună - _INIT_NAME() { - if (this.gl == undefined) - throw new Error("Must initialize drawable before drawing name"); + draw() { + if (this.gl.getUniform(this.programInfo.program, this.programInfo.uniformLocations.modelMatrix, 0).every((e, i) => mat4.fromValues(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)[i] === e)) + throw new Error("Stray drawable not bound to any drawing context (coordinate system): " + this.name); + this._DRAW_NAME(this.programInfo); + } + + getNamePos() { + throw new Error("Cannot call abstract method"); + } + + // Depreciat: va fi înocuitã când se va gãsi o metodã mai bunã + _INIT_NAME(drawable, gl) { + if (drawable == undefined || gl == undefined) + throw new Error("Undefined or null params"); + + // NU MAI CREA DACà NUMELE E GOL@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ this.nameContainer = document.createElement("div"); - this.nameContainer.innerHTML = this.name; + this.nameContainer.innerHTML = drawable.name; this.nameContainer.setAttribute("style", "position: absolute;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"); document.body.appendChild(this.nameContainer); } - draw(programInfo) { - if (this.gl == undefined) - throw new Error("Must initialize WebGL context before drawing"); + // Depreciat: va fi înocuitã când se va gãsi o metodã mai bunã + // DE TESTAT DACà SE DESENEAZà RELATIV LA PÂNZà SAU RELATIV LA FEREASTRÃ; REPARà DACà RELATIV LA FEREASTRà + _DRAW_NAME(programInfo) { if (programInfo == undefined) throw new Error("Undefined or null params"); - if (this.gl.getUniform(programInfo.program, programInfo.uniformLocations.modelMatrix, 0).every((e, i) => mat4.fromValues(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)[i] === e)) - throw new Error("Stray drawable not bound to any drawing context (coordinate system): " + this.name); - this.programInfo = programInfo; - - this._DRAW_NAME(); - } - - // Depreciat: va fi înocuită când se va găsi o metodă mai bună - _DRAW_NAME() { - if (this.gl == undefined) - throw new Error("Must initialize WebGL context before drawing name"); - if (this.programInfo == undefined) - throw new Error("Must draw drawable before drawing name"); - - const projectionMatrix = this.gl.getUniform(this.programInfo.program, this.programInfo.uniformLocations.projectionMatrix, 0); - const viewMatrix = this.gl.getUniform(this.programInfo.program, this.programInfo.uniformLocations.viewMatrix, 0); - const modelMatrix = this.gl.getUniform(this.programInfo.program, this.programInfo.uniformLocations.modelMatrix, 0); + const projectionMatrix = this.gl.getUniform(programInfo.program, programInfo.uniformLocations.projectionMatrix, 0); + const viewMatrix = this.gl.getUniform(programInfo.program, programInfo.uniformLocations.viewMatrix, 0); + const modelMatrix = this.gl.getUniform(programInfo.program, programInfo.uniformLocations.modelMatrix, 0); + const namePos = vec4.fromValues(...this.getNamePos(), 1); const mvp = mat4.multiply(mat4.create(), mat4.multiply(mat4.create(), projectionMatrix, viewMatrix), modelMatrix); const nameMvpPos = vec4.transformMat4(vec4.create(), namePos, mvp); const nameNormScrPos = [nameMvpPos[0]/nameMvpPos[3], nameMvpPos[1]/nameMvpPos[3]]; const nameScrPos = [(nameNormScrPos[0]*0.5+0.5)*this.gl.canvas.width, (nameNormScrPos[1]*-0.5+0.5)*this.gl.canvas.height]; - if (nameScrPos[0] > 0 && nameScrPos[0] < this.gl.canvas.width && nameScrPos[1] > 0 && nameScrPos[1] < this.gl.canvas.height && nameMvpPos[2] > 0 - && this.nameContainer.innerHTML !== "") { + if (nameScrPos[0] > 0 && nameScrPos[0] < this.gl.canvas.width && nameScrPos[1] > 0 && nameScrPos[1] < this.gl.canvas.height && nameMvpPos[2] > 0) { this.nameContainer.style.left = nameScrPos[0]; this.nameContainer.style.top = nameScrPos[1]; this.nameContainer.style.display = "inline"; } else this.nameContainer.style.display = "none"; } - - getNamePos() { - throw new Error("Cannot call abstract method"); - } } \ No newline at end of file diff --git a/Point.js b/Point.js deleted file mode 100644 index 112f19e..0000000 --- a/Point.js +++ /dev/null @@ -1,37 +0,0 @@ -class Point extends Drawable { - constructor(name, position, color) { - super(name); - if (position == undefined || color == undefined) - throw new Error("Undefined or null params"); - this.position = position; - this.color = color; - } - - init(gl) { - super.init(gl); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.position); - gl.bufferData(gl.ARRAY_BUFFER, this.position, gl.STATIC_DRAW); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.color); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([...this.color, 1]), gl.STATIC_DRAW); - } - - draw(programInfo) { - super.draw(programInfo); - - this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.position); - this.gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 3, this.gl.FLOAT, false, 0, 0); - this.gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition); - - this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.color); - this.gl.vertexAttribPointer(programInfo.attribLocations.vertexColor, 4, this.gl.FLOAT, false, 0, 0); - this.gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor); - - this.gl.drawArrays(this.gl.POINTS, 0, 1); - } - - getNamePos() { - return this.position; - } -} \ No newline at end of file diff --git a/Scene.js b/Scene.js index fc4514c..d0a561e 100644 --- a/Scene.js +++ b/Scene.js @@ -50,8 +50,7 @@ class Scene { } insert(drawable) { - drawable.init(this.gl); - this.drawList.push(drawable); + this.drawList.push(drawable.instantiate(this.gl, this.programInfo)); } render() { @@ -65,7 +64,7 @@ class Scene { renderFrame() { this.gl.clearColor(0.5, 0.5, 0.5, 1.0); this.gl.clearDepth(1.0); - // Testul de adâncime dezactivat pentru transparență + // Testul de adâncime dezactivat pentru transparen?ã this.gl.disable(this.gl.DEPTH_TEST); this.gl.enable(this.gl.BLEND); //this.gl.depthFunc(this.gl.LEQUAL); diff --git a/Segment.js b/Segment.js deleted file mode 100644 index 5eddc94..0000000 --- a/Segment.js +++ /dev/null @@ -1,39 +0,0 @@ -class Segment extends Drawable { - constructor(name, p1, p2) { - super(name); - if (p1 == undefined || p2 == undefined) - throw new Error("Undefined or null params"); - this.p1 = p1; - this.p2 = p2; - } - - init(gl) { - super.init(gl); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.position); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([...this.p1.position, ...this.p2.position]), gl.STATIC_DRAW); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.color); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([...this.p1.color, 1, ...this.p2.color, 1]), gl.STATIC_DRAW); - } - - draw(programInfo) { - super.draw(programInfo); - - this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.position); - this.gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 3, this.gl.FLOAT, false, 0, 0); - this.gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition); - - this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.color); - this.gl.vertexAttribPointer(programInfo.attribLocations.vertexColor, 4, this.gl.FLOAT, false, 0, 0); - this.gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor); - - this.gl.drawArrays(this.gl.LINES, 0, 2); - } - - getNamePos() { - return vec3.fromValues((this.p1.position[0] + this.p2.position[0])/2, - (this.p1.position[1] + this.p2.position[1])/2, - (this.p1.position[2] + this.p2.position[2])/2); - } -} \ No newline at end of file diff --git a/Triangle.js b/Triangle.js deleted file mode 100644 index 347a8fa..0000000 --- a/Triangle.js +++ /dev/null @@ -1,40 +0,0 @@ -class Triangle extends Drawable { - constructor(name, p1, p2, p3) { - super(name); - if (p1 == undefined || p2 == undefined || p3 == undefined) - throw new Error("Undefined or null params"); - this.p1 = p1; - this.p2 = p2; - this.p3 = p3; - } - - init(gl) { - super.init(gl); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.position); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([...this.p1.position, ...this.p2.position, ...this.p3.position]), gl.STATIC_DRAW); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.color); - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([...this.p1.color, 0.5, ...this.p2.color, 0.5, ...this.p3.color, 0.5]), gl.STATIC_DRAW); - } - - draw(programInfo) { - super.draw(programInfo); - - this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.position); - this.gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 3, this.gl.FLOAT, false, 0, 0); - this.gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition); - - this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.color); - this.gl.vertexAttribPointer(programInfo.attribLocations.vertexColor, 4, this.gl.FLOAT, false, 0, 0); - this.gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor); - - this.gl.drawArrays(this.gl.TRIANGLES, 0, 3); - } - - getNamePos() { - return vec3.fromValues((this.p1.position[0] + this.p2.position[0] + this.p3.position[0])/3, - (this.p1.position[1] + this.p2.position[1] + this.p3.position[1])/3, - (this.p1.position[2] + this.p2.position[2] + this.p3.position[2])/3); - } -} \ No newline at end of file diff --git a/Vector.js b/Vector.js deleted file mode 100644 index 45c0555..0000000 --- a/Vector.js +++ /dev/null @@ -1,8 +0,0 @@ -class Vector extends Arrow { - constructor(name, p) { - if (p == undefined) - throw new Error("Undefined or null params"); - origin = new Point("O", vec3.fromValues(0, 0, 0), p.color); - super(name, origin, p); - } -} \ No newline at end of file diff --git a/blueprints/Arrow.js b/blueprints/Arrow.js new file mode 100644 index 0000000..627675f --- /dev/null +++ b/blueprints/Arrow.js @@ -0,0 +1,11 @@ +class Arrow extends Segment { + constructor(name, color, p1, p2) { + super(name, color, p1, p2); + } + + instantiate(gl, programInfo) { + if (gl == undefined || programInfo == undefined) + throw new Error("Undefined or null params"); + return new ArrowInstance(this, gl, programInfo); + } +} \ No newline at end of file diff --git a/blueprints/CoordSystem.js b/blueprints/CoordSystem.js new file mode 100644 index 0000000..0cb9c5f --- /dev/null +++ b/blueprints/CoordSystem.js @@ -0,0 +1,19 @@ +class CoordSystem extends DrawableBlueprint { + constructor(name, color, modelMatrix) { + super(name, color); + if (modelMatrix == undefined) + throw new Error("Undefined or null params"); + this.modelMatrix = modelMatrix; + this.drawList = []; + } + + instantiate(gl, programInfo) { + if (gl == undefined || programInfo == undefined) + throw new Error("Undefined or null params"); + return new CoordSystemInstance(this, gl, programInfo); + } + + add(drawable) { + this.drawList.push(drawable); + } +} \ No newline at end of file diff --git a/blueprints/Point.js b/blueprints/Point.js new file mode 100644 index 0000000..60b051d --- /dev/null +++ b/blueprints/Point.js @@ -0,0 +1,14 @@ +class Point extends DrawableBlueprint { + constructor(name, color, position) { + super(name, color); + if (position == undefined) + throw new Error("Undefined or null params"); + this.position = position; + } + + instantiate(gl, programInfo) { + if (gl == undefined || programInfo == undefined) + throw new Error("Undefined or null params"); + return new PointInstance(this, gl, programInfo); + } +} \ No newline at end of file diff --git a/blueprints/Segment.js b/blueprints/Segment.js new file mode 100644 index 0000000..4fffae1 --- /dev/null +++ b/blueprints/Segment.js @@ -0,0 +1,15 @@ +class Segment extends DrawableBlueprint { + constructor(name, color, p1, p2) { + super(name, color); + if (p1 == undefined || p2 == undefined) + throw new Error("Undefined or null params"); + this.p1 = p1; + this.p2 = p2; + } + + instantiate(gl, programInfo) { + if (gl == undefined || programInfo == undefined) + throw new Error("Undefined or null params"); + return new SegmentInstance(this, gl, programInfo); + } +} \ No newline at end of file diff --git a/blueprints/Triangle.js b/blueprints/Triangle.js new file mode 100644 index 0000000..3258707 --- /dev/null +++ b/blueprints/Triangle.js @@ -0,0 +1,16 @@ +class Triangle extends DrawableBlueprint { + constructor(name, color, p1, p2, p3) { + super(name, color); + if (p1 == undefined || p2 == undefined || p3 == undefined) + throw new Error("Undefined or null params"); + this.p1 = p1; + this.p2 = p2; + this.p3 = p3; + } + + instantiate(gl, programInfo) { + if (gl == undefined || programInfo == undefined) + throw new Error("Undefined or null params"); + return new TriangleInstance(this, gl, programInfo); + } +} \ No newline at end of file diff --git a/blueprints/Vector.js b/blueprints/Vector.js new file mode 100644 index 0000000..ebe83e3 --- /dev/null +++ b/blueprints/Vector.js @@ -0,0 +1,14 @@ +class Vector extends Arrow { + constructor(name, color, p) { + if (p == undefined) + throw new Error("Undefined or null params"); + const origin = new Point("", p.color, vec3.fromValues(0, 0, 0)); + super(name, color, origin, p); + } + + instantiate(gl, programInfo) { + if (gl == undefined || programInfo == undefined) + throw new Error("Undefined or null params"); + return new VectorInstance(this, gl, programInfo); + } +} \ No newline at end of file diff --git a/instances/ArrowInstance.js b/instances/ArrowInstance.js new file mode 100644 index 0000000..3766142 --- /dev/null +++ b/instances/ArrowInstance.js @@ -0,0 +1,57 @@ +class ArrowInstance extends SegmentInstance { + constructor(drawable, gl, programInfo) { + super(drawable, gl, programInfo); + this.initArrowHead(); + } + + draw() { + super.draw(); + this.drawArrowHead(); + } + + initArrowHead() { + const dir = vec3.normalize(vec3.create(), vec3.sub(vec3.create(), this.drawable.p1.position, this.drawable.p2.position)); + const basePos = vec3.add(vec3.create(), this.drawable.p2.position, vec3.scale(vec3.create(), dir, 0.1)); + + const xAxis = vec3.fromValues(1, 0, 0); + const yAxis = vec3.fromValues(0, 1, 0); + const zAxis = vec3.fromValues(0, 0, 1); + + const newDir1 = vec3.scale(vec3.create(), vec3.normalize(vec3.create(), vec3.cross(vec3.create(), dir, xAxis)), 0.02); + const newDir2 = vec3.negate(vec3.create(), newDir1); + const newDir3 = vec3.scale(vec3.create(), vec3.normalize(vec3.create(), vec3.cross(vec3.create(), dir, yAxis)), 0.02); + const newDir4 = vec3.negate(vec3.create(), newDir3); + const newDir5 = vec3.scale(vec3.create(), vec3.normalize(vec3.create(), vec3.cross(vec3.create(), dir, zAxis)), 0.02); + const newDir6 = vec3.negate(vec3.create(), newDir5); + + const shiftedBasePos1 = vec3.add(vec3.create(), basePos, newDir1); + const shiftedBasePos2 = vec3.add(vec3.create(), basePos, newDir2); + const shiftedBasePos3 = vec3.add(vec3.create(), basePos, newDir3); + const shiftedBasePos4 = vec3.add(vec3.create(), basePos, newDir4); + const shiftedBasePos5 = vec3.add(vec3.create(), basePos, newDir5); + const shiftedBasePos6 = vec3.add(vec3.create(), basePos, newDir6); + + const p1 = new Point("", this.drawable.p2.color, shiftedBasePos1); + const p2 = new Point("", this.drawable.p2.color, shiftedBasePos2); + const p3 = new Point("", this.drawable.p2.color, shiftedBasePos3); + const p4 = new Point("", this.drawable.p2.color, shiftedBasePos4); + const p5 = new Point("", this.drawable.p2.color, shiftedBasePos5); + const p6 = new Point("", this.drawable.p2.color, shiftedBasePos6); + + this.s1 = new Segment("", this.drawable.color, this.drawable.p2, p1).instantiate(this.gl, this.programInfo); + this.s2 = new Segment("", this.drawable.color, this.drawable.p2, p2).instantiate(this.gl, this.programInfo); + this.s3 = new Segment("", this.drawable.color, this.drawable.p2, p3).instantiate(this.gl, this.programInfo); + this.s4 = new Segment("", this.drawable.color, this.drawable.p2, p4).instantiate(this.gl, this.programInfo); + this.s5 = new Segment("", this.drawable.color, this.drawable.p2, p5).instantiate(this.gl, this.programInfo); + this.s6 = new Segment("", this.drawable.color, this.drawable.p2, p6).instantiate(this.gl, this.programInfo); + } + + drawArrowHead(programInfo) { + this.s1.draw(programInfo); + this.s2.draw(programInfo); + this.s3.draw(programInfo); + this.s4.draw(programInfo); + this.s5.draw(programInfo); + this.s6.draw(programInfo); + } +} \ No newline at end of file diff --git a/instances/CoordSystemInstance.js b/instances/CoordSystemInstance.js new file mode 100644 index 0000000..1ea85ac --- /dev/null +++ b/instances/CoordSystemInstance.js @@ -0,0 +1,37 @@ +class CoordSystemInstance extends DrawableInstance { + constructor(drawable, gl, programInfo) { + super(drawable, gl, programInfo); + + const r = drawable.color[0]; + const g = drawable.color[1]; + const b = drawable.color[2]; + const den = Math.max(r, g, b) + 1; + this.xAxis = new Vector("", vec3.fromValues((r+1)/den, g/den, b/den), new Point("", vec3.fromValues(0,0,0), vec3.fromValues(1, 0, 0))).instantiate(gl, programInfo); + this.yAxis = new Vector("", vec3.fromValues(r/den, (g+1)/den, b/den), new Point("", vec3.fromValues(0,0,0), vec3.fromValues(0, 1, 0))).instantiate(gl, programInfo); + this.zAxis = new Vector("", vec3.fromValues(r/den, g/den, (b+1)/den), new Point("", vec3.fromValues(0,0,0), vec3.fromValues(0, 0, 1))).instantiate(gl, programInfo); + + this.instancesDrawList = []; + for (let i = 0; i < drawable.drawList.length; i++) + this.instancesDrawList[i] = drawable.drawList[i].instantiate(gl, programInfo); + } + + draw() { + const currentModelMatrix = this.gl.getUniform(this.programInfo.program, this.programInfo.uniformLocations.modelMatrix, 0); + const modelMatrix = mat4.mul(mat4.create(), currentModelMatrix, this.drawable.modelMatrix); + this.gl.uniformMatrix4fv(this.programInfo.uniformLocations.modelMatrix, false, modelMatrix); + super.draw(); + + this.xAxis.draw(this.programInfo); + this.yAxis.draw(this.programInfo); + this.zAxis.draw(this.programInfo); + + for (const e of this.instancesDrawList) { + e.draw(); + this.gl.uniformMatrix4fv(this.programInfo.uniformLocations.modelMatrix, false, modelMatrix); + } + } + + getNamePos() { + return vec3.fromValues(0.1, 0.1, 0.1); + } +} \ No newline at end of file diff --git a/instances/PointInstance.js b/instances/PointInstance.js new file mode 100644 index 0000000..f27952c --- /dev/null +++ b/instances/PointInstance.js @@ -0,0 +1,29 @@ +class PointInstance extends DrawableInstance { + constructor(drawable, gl, programInfo) { + super(drawable, gl, programInfo); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.position); + gl.bufferData(gl.ARRAY_BUFFER, drawable.position, gl.STATIC_DRAW); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.color); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([...drawable.color, 1]), gl.STATIC_DRAW); + } + + draw() { + super.draw(); + + this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.position); + this.gl.vertexAttribPointer(this.programInfo.attribLocations.vertexPosition, 3, this.gl.FLOAT, false, 0, 0); + this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexPosition); + + this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.color); + this.gl.vertexAttribPointer(this.programInfo.attribLocations.vertexColor, 4, this.gl.FLOAT, false, 0, 0); + this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexColor); + + this.gl.drawArrays(this.gl.POINTS, 0, 1); + } + + getNamePos() { + return this.drawable.position; + } +} \ No newline at end of file diff --git a/instances/SegmentInstance.js b/instances/SegmentInstance.js new file mode 100644 index 0000000..9b9ae82 --- /dev/null +++ b/instances/SegmentInstance.js @@ -0,0 +1,31 @@ +class SegmentInstance extends DrawableInstance { + constructor(drawable, gl, programInfo) { + super(drawable, gl, programInfo); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.position); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([...drawable.p1.position, ...drawable.p2.position]), gl.STATIC_DRAW); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.color); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([...drawable.color, 1, ...drawable.color, 1]), gl.STATIC_DRAW); + } + + draw() { + super.draw(); + + this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.position); + this.gl.vertexAttribPointer(this.programInfo.attribLocations.vertexPosition, 3, this.gl.FLOAT, false, 0, 0); + this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexPosition); + + this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.color); + this.gl.vertexAttribPointer(this.programInfo.attribLocations.vertexColor, 4, this.gl.FLOAT, false, 0, 0); + this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexColor); + + this.gl.drawArrays(this.gl.LINES, 0, 2); + } + + getNamePos() { + return vec3.fromValues((this.drawable.p1.position[0] + this.drawable.p2.position[0])/2, + (this.drawable.p1.position[1] + this.drawable.p2.position[1])/2, + (this.drawable.p1.position[2] + this.drawable.p2.position[2])/2); + } +} \ No newline at end of file diff --git a/instances/TriangleInstance.js b/instances/TriangleInstance.js new file mode 100644 index 0000000..53d517d --- /dev/null +++ b/instances/TriangleInstance.js @@ -0,0 +1,32 @@ +class TriangleInstance extends DrawableInstance { + constructor(drawable, gl, programInfo) { + super(drawable, gl, programInfo); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.position); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([...drawable.p1.position, ...drawable.p2.position, ...drawable.p3.position]), gl.STATIC_DRAW); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.color); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([...drawable.color, 0.5, ...drawable.color, 0.5, ...drawable.color, 0.5]), gl.STATIC_DRAW); + } + + draw() { + super.draw(); + + this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.position); + this.gl.vertexAttribPointer(this.programInfo.attribLocations.vertexPosition, 3, this.gl.FLOAT, false, 0, 0); + this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexPosition); + + this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffers.color); + this.gl.vertexAttribPointer(this.programInfo.attribLocations.vertexColor, 4, this.gl.FLOAT, false, 0, 0); + this.gl.enableVertexAttribArray(this.programInfo.attribLocations.vertexColor); + + // DESENEAZà CU TESTUL DE ADÂNCIME OPRIT@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ + this.gl.drawArrays(this.gl.TRIANGLES, 0, 3); + } + + getNamePos() { + return vec3.fromValues((this.drawable.p1.position[0] + this.drawable.p2.position[0] + this.drawable.p3.position[0])/3, + (this.drawable.p1.position[1] + this.drawable.p2.position[1] + this.drawable.p3.position[1])/3, + (this.drawable.p1.position[2] + this.drawable.p2.position[2] + this.drawable.p3.position[2])/3); + } +} \ No newline at end of file diff --git a/instances/VectorInstance.js b/instances/VectorInstance.js new file mode 100644 index 0000000..f973b9a --- /dev/null +++ b/instances/VectorInstance.js @@ -0,0 +1,5 @@ +class VectorInstance extends ArrowInstance { + constructor(drawable, gl, programInfo) { + super(drawable, gl, programInfo); + } +} \ No newline at end of file diff --git a/main.html b/main.html index d62a1f8..a96c88e 100644 --- a/main.html +++ b/main.html @@ -1,11 +1,18 @@ + + + + + + + - - - - - - - + + + + + + + diff --git a/main.js b/main.js index f60061a..2ecd8e3 100644 --- a/main.js +++ b/main.js @@ -9,37 +9,85 @@ function main() { } const scene = new Scene(gl); - const p1 = new Point("A", vec3.fromValues(-0.5, -0.5, 0.5), vec3.fromValues(0, 0, 0)); - const p2 = new Point("B", vec3.fromValues(0.5, -0.5, 0.5), vec3.fromValues(0, 0, 1)); - scene.insert(p2); - const p3 = new Point("C", vec3.fromValues(0.5, 0.5, 0.5), vec3.fromValues(0, 1, 0)); - const p4 = new Point("D", vec3.fromValues(-0.5, 0.5, 0.5), vec3.fromValues(0, 1, 1)); - const p5 = new Point("E", vec3.fromValues(-0.5, -0.5, -0.5), vec3.fromValues(1, 0, 0)); - const p6 = new Point("F", vec3.fromValues(0.5, -0.5, -0.5), vec3.fromValues(1, 0, 1)); - const p7 = new Point("G", vec3.fromValues(0.5, 0.5, -0.5), vec3.fromValues(1, 1, 0)); - const p8 = new Point("H", vec3.fromValues(-0.5, 0.5, -0.5), vec3.fromValues(1, 1, 1)); - - const t1 = new Triangle("", p1, p2, p3); - const t2 = new Triangle("", p1, p3, p4); - const t3 = new Triangle("", p5, p6, p7); - const t4 = new Triangle("", p5, p7, p8); - const t5 = new Triangle("", p5, p1, p4); - const t6 = new Triangle("", p5, p4, p8); - const t7 = new Triangle("", p2, p6, p7); - const t8 = new Triangle("", p2, p7, p3); - - const cs1 = new CoordSystem("World", mat4.fromValues(1, 0, 0, 0, - 0, 1, 0, 0, - 0, 0, 1, 0, - 0, 0, 0, 1)); - cs1.add(t1); - cs1.add(t2); - cs1.add(t3); - cs1.add(t4); - cs1.add(t5); - cs1.add(t6); - cs1.add(t7); - cs1.add(t8); - scene.insert(cs1); + const p1 = new Point("P1", vec3.fromValues(0, 0, 1), vec3.fromValues(-0.5, -0.5, 0.5)); + const p2 = new Point("P2", vec3.fromValues(0, 1, 0), vec3.fromValues(0.5, -0.5, 0.5)); + const p3 = new Point("P3", vec3.fromValues(0, 1, 1), vec3.fromValues(0.5, 0.5, 0.5)); + const p4 = new Point("P4", vec3.fromValues(1, 0, 0), vec3.fromValues(-0.5, 0.5, 0.5)); + const p5 = new Point("P5", vec3.fromValues(1, 0, 1), vec3.fromValues(-0.5, -0.5, -0.5)); + const p6 = new Point("P6", vec3.fromValues(1, 1, 0), vec3.fromValues(0.5, -0.5, -0.5)); + const p7 = new Point("P7", vec3.fromValues(1, 1, 1), vec3.fromValues(0.5, 0.5, -0.5)); + const p8 = new Point("P8", vec3.fromValues(0, 0, 0), vec3.fromValues(-0.5, 0.5, -0.5)); + const t1 = new Triangle("", vec3.fromValues(1, 0, 0), p1, p2, p3); + const t2 = new Triangle("", vec3.fromValues(1, 0, 0), p1, p3, p4); + const t3 = new Triangle("", vec3.fromValues(0, 1, 0), p5, p6, p7); + const t4 = new Triangle("", vec3.fromValues(0, 1, 0), p5, p7, p8); + const t5 = new Triangle("", vec3.fromValues(0, 0, 1), p5, p1, p4); + const t6 = new Triangle("", vec3.fromValues(0, 0, 1), p5, p4, p8); + const t7 = new Triangle("", vec3.fromValues(0, 0.5, 0.5), p2, p6, p7); + const t8 = new Triangle("", vec3.fromValues(0, 0.5, 0.5), p2, p7, p3); + const world = new CoordSystem("World", vec3.fromValues(0, 0, 0), mat4.fromValues(1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + 0, 0, 0, 1)); + { + const v1 = new Vector("v1", vec3.fromValues(0, 1, 0), p1); + const cs1 = new CoordSystem("cs1", vec3.fromValues(0.5, 0, 1), mat4.fromValues(0.2, 0, 0, 0, + 0, 0.2, 0, 0, + 0, 0, 0.2, 0, + 0.3, 0.3, 0.3, 1)); + { + cs1.add(v1); + cs1.add(p1); + cs1.add(p2); + cs1.add(p3); + cs1.add(p4); + cs1.add(p5); + cs1.add(p6); + cs1.add(p7); + cs1.add(p8) + cs1.add(t1); + cs1.add(t2); + cs1.add(t3); + cs1.add(t4); + cs1.add(t5); + cs1.add(t6); + cs1.add(t7); + cs1.add(t8); + } + world.add(cs1); + const cs2 = new CoordSystem("cs2", vec3.fromValues(0, 0.5, 1), mat4.fromValues(0.3, 0, 0, 0, + 0, 0.3, 0, 0, + 0, 0, 0.3, 0, + -0.3, 0.3, 0.3, 1)); + { + cs2.add(v1); + cs2.add(t1); + cs2.add(t2); + cs2.add(t3); + cs2.add(t4); + cs2.add(t5); + cs2.add(t6); + cs2.add(t7); + cs2.add(t8); + const cs3 = new CoordSystem("cs3", vec3.fromValues(1, 0.5, 1), mat4.fromValues(0.5, 0, 0, 0, + 0, 0.5, 0, 0, + 0, 0, 0.5, 0, + 0, 0.3, 0, 1)); + { + cs3.add(v1); + cs3.add(t1); + cs3.add(t2); + cs3.add(t3); + cs3.add(t4); + cs3.add(t5); + cs3.add(t6); + cs3.add(t7); + cs3.add(t8); + } + cs2.add(cs3); + } + world.add(cs2); + } + scene.insert(world); scene.render(); } \ No newline at end of file