ogl - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

examples/shaders/BasePrimitivesShader.js

@@ -5,3 +5,2 @@ const vertex = `
 
-attribute vec2 uv;
 attribute vec3 position;
@@ -18,3 +17,2 @@ attribute vec3 normal;
     vNormal = normalize(normalMatrix * normal);
-    
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
@@ -28,4 +26,2 @@ }
 
-uniform float uTime;
-
 varying vec3 vNormal;
@@ -32,0 +28,0 @@

examples/shaders/FogShader.js

@@ -7,3 +7,2 @@ const vertex = `
 attribute vec3 position;
-attribute vec3 normal;
 attribute vec3 offset;
@@ -10,0 +9,0 @@ attribute vec3 random;

examples/shaders/TexturesShader.js

@@ -28,3 +28,2 @@ const vertex = `
 
-uniform float uTime;
 uniform sampler2D tMap;
@@ -31,0 +30,0 @@

package.json

 {
     "name": "ogl",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "description": "WebGL Framework",
@@ -5,0 +5,0 @@ "main": "src/OGL.js",

README.md

@@ -180,4 +180,4 @@ <p align="center">
 ### Scene
- - [ ] Scene Graph hierarchy
- - [ ] Render Hierarchy With Transparency
+ - [x] Scene Graph hierarchy
+ - [x] Render Hierarchy With Transparency
 
@@ -198,5 +198,6 @@ ### Interaction
  - [ ] PBR (Physically Based Rendering)
+ - [ ] Compressed Textures
 
 ### Frame Buffer
- - [ ] Render to texture
+ - [x] Render to texture
  - [ ] MRT (Multiple Render Targets)
@@ -203,0 +204,0 @@ - [ ] Reflections

src/core/Mesh.js

 import {Transform} from './Transform.js';
+import {Mat3} from '../math/Mat3.js';
+import {Mat4} from '../math/Mat4.js';
 
@@ -16,2 +18,5 @@ export class Mesh extends Transform {
 
+        this.modelViewMatrix = new Mat4();
+        this.normalMatrix = new Mat3();
+
         // Add empty matrix uniforms to program if unset
@@ -18,0 +23,0 @@ if (!this.program.uniforms.modelMatrix) {

src/core/Renderer.js

@@ -1,7 +0,8 @@
-// TODO: render lists - opaque and transparent
-// TODO: sort opaque list in order of program
-// TODO: culling
-// TODO: cnv.addEventListener('webglcontextlost', contextLost, false);
-// TODO: cnv.addEventListener('webglcontextrestored', contextRestore, false);
+import {Mat4} from '../math/Mat4.js';
+import {Vec3} from '../math/Vec3.js';
 
+// TODO: frustum culling
+// TODO: gl.canvas.addEventListener('webglcontextlost', contextLost, false);
+// TODO: gl.canvas.addEventListener('webglcontextrestored', contextRestore, false);
+
 // Not automatic - devs to use these methods manually
@@ -15,2 +16,5 @@ // gl.colorMask( colorMask, colorMask, colorMask, colorMask );
 
+const projMat4 = new Mat4();
+const tempVec3 = new Vec3();
+
 export class Renderer {
@@ -30,2 +34,3 @@ constructor({
         autoClear = true,
+        sort = true,
     } = {}) {
@@ -40,2 +45,3 @@ const attributes = {alpha, depth, stencil, antialias, premultipliedAlpha, preserveDrawingBuffer, powerPreference};
         this.autoClear = autoClear;
+        this.sort = sort;
 
@@ -191,2 +197,57 @@ // Attempt WebGL2, otherwise fallback to WebGL1
 
+    drawOpaque(scene, camera) {
+        const opaque = [];
+        scene.traverse(node => {
+            if (!node.program || node.program.transparent) return;
+            opaque.splice(getRenderOrder(node), 0, node);
+        });
+
+        function getRenderOrder(node) {
+            node.worldMatrix.getTranslation(tempVec3);
+            tempVec3.applyMatrix4(projMat4);
+
+            node.zDepth = tempVec3.z;
+            for (let i = 0; i < opaque.length; i++) {
+                if (node.zDepth <= opaque[i].zDepth) return i;
+            }
+            return opaque.length;
+        }
+
+        for (let i = 0; i < opaque.length; i++) {
+            opaque[i].draw({camera});
+        }
+    }
+
+    drawTransparent(scene, camera) {
+        const transparent = [];
+        const custom = [];
+        scene.traverse(node => {
+            if (!node.program || !node.program.transparent) return;
+
+            // If manual order set, add to queue last
+            if (node.renderOrder !== undefined) return custom.push(node);
+            transparent.splice(getRenderOrder(node), 0, node);
+        });
+
+        function getRenderOrder(node) {
+            node.worldMatrix.getTranslation(tempVec3);
+            tempVec3.applyMatrix4(projMat4);
+
+            node.zDepth = tempVec3.z;
+            for (let i = 0; i < transparent.length; i++) {
+                if (node.zDepth >= transparent[i].zDepth) return i;
+            }
+            return transparent.length;
+        }
+
+        // Add manually ordered nodes
+        for (let i = 0; i < custom.length; i++) {
+            transparent.splice(custom[i].renderOrder, 0, custom[i]);
+        }
+
+        for (let i = 0; i < transparent.length; i++) {
+            transparent[i].draw({camera});
+        }
+    }
+
     render({
@@ -196,2 +257,3 @@ scene,
         target = null,
+        update = true,
     }) {
@@ -222,3 +284,3 @@
         // updates all scene graph matrices
-        scene.updateMatrixWorld();
+        if (update) scene.updateMatrixWorld();
 
@@ -228,6 +290,13 @@ // Update camera separately if not in scene graph
 
-        scene.traverse(node => {
-            if (!node.draw) return;
-            node.draw({camera});
-        });
+        // can only sort if camera available
+        if (this.sort && camera) {
+            projMat4.multiply(camera.projectionMatrix, camera.viewMatrix);
+            this.drawOpaque(scene, camera);
+            this.drawTransparent(scene, camera);
+        } else {
+            scene.traverse(node => {
+                if (!node.draw) return;
+                node.draw({camera});
+            });
+        }
 
@@ -237,15 +306,4 @@ // SORTING using a proj matrix to get distance from cam
         // _frustum.setFromMatrix( _projScreenMatrix );
-        // if ( _this.sortObjects === true ) {
-        //     opaqueObjects.sort( painterSortStable );
-        //     transparentObjects.sort( reversePainterSortStable );
-        // }
         // culling
-
-        // state.setBlending( NoBlending );
-        // renderObjects( opaqueObjects, scene, camera );
-        // // transparent pass (back-to-front order)
-        // renderObjects( transparentObjects, scene, camera );
-
-        // never call gl.get anything during render
     }
 }

src/core/RenderTarget.js

@@ -0,1 +1,3 @@
+// TODO: multi target rendering
+// TODO: test stencil and depth
 import {Texture} from './Texture.js';
@@ -2,0 +4,0 @@

src/core/Texture.js

@@ -1,3 +0,3 @@
-// TODO: Video
 // TODO: Compressed Texture
+// TODO: data texture
 
@@ -100,3 +100,2 @@ const emptyPixel = new Uint8Array(4);
 
-                // TODO: is there always width/height?
                 if (this.image.width) {
@@ -103,0 +102,0 @@ this.width = this.image.width;

src/core/Transform.js

 import {Vec3} from '../math/Vec3.js';
 import {Quat} from '../math/Quat.js';
-import {Mat3} from '../math/Mat3.js';
 import {Mat4} from '../math/Mat4.js';
@@ -8,4 +7,3 @@ import {Euler} from '../math/Euler.js';
 export class Transform {
-    constructor(gl, {
-    } = {}) {
+    constructor() {
         this.parent = null;
@@ -16,4 +14,2 @@ this.children = [];
         this.worldMatrix = new Mat4();
-        this.modelViewMatrix = new Mat4();
-        this.normalMatrix = new Mat3();
         this.matrixAutoUpdate = true;
@@ -20,0 +16,0 @@

src/extras/Orbit.js

@@ -13,4 +13,3 @@ // Based from ThreeJS' OrbitControls class, rewritten using es6 with some additions and subtractions.
 
-export function Orbit({
-    object,
+export function Orbit(object, {
     element = document,
@@ -33,3 +32,3 @@ enabled = true,
     maxDistance = Infinity,
-}) {
+} = {}) {
     this.enabled = enabled;
@@ -36,0 +35,0 @@ this.target = target;

src/math/Color.js

@@ -0,1 +1,3 @@
+// TODO : support more color formats - e.g 0xffffff, '#fff'
+
 export class Color extends Float32Array {
@@ -2,0 +4,0 @@ constructor(array = [0, 0, 0]) {

src/math/Vec2.js

@@ -5,2 +5,3 @@ import * as Vec2Func from './functions/Vec2Func.js';
     constructor(array = [0, 0]) {
+        if (!array.length) array = [array, array];
         super(array);
@@ -7,0 +8,0 @@ return this;

src/math/Vec3.js

@@ -5,2 +5,3 @@ import * as Vec3Func from './functions/Vec3Func.js';
     constructor(array = [0, 0, 0]) {
+        if (!array.length) array = [array, array, array];
         super(array);
@@ -7,0 +8,0 @@ return this;

src/math/Vec4.js

@@ -5,2 +5,3 @@ import * as Vec4Func from './functions/Vec4Func.js';
     constructor(array = [0, 0, 0, 0]) {
+        if (!array.length) array = [array, array, array];
         super(array);
@@ -7,0 +8,0 @@ return this;

No alert changes

Improved metrics

Total package byte prevSize

5131539

increased by3.81%

Number of package files

105

increased by11.7%

Lines of code

11736

increased by1.38%

Number of lines in readme file

212

increased by0.47%

No dependency changes