claygl-next - npm Package Compare versions

Comparing version 2.0.0-alpha.17 to 2.0.0-alpha.19

lib/App3D.d.ts

@@ -59,2 +59,7 @@ import Renderer from './Renderer';
     /**
+     * If do auto gc on the gpu resources.
+     * Otherwise needs to call gc() manually
+     */
+    autoGC?: boolean;
+    /**
      * If not init immediately. Should call init method manually.
@@ -109,17 +114,14 @@ *
 ```js
-const app = clay.application.create('#viewport', {
-    init: function (app) {
-        // Create a perspective camera.
-        // First parameter is the camera position. Which is in front of the cube.
-        // Second parameter is the camera lookAt target. Which is the origin of the world, and where the cube puts.
-        this._camera = app.createCamera([0, 2, 5], [0, 0, 0]);
-        // Create a sample cube
-        this._cube = app.createCube();
-        // Create a directional light. The direction is from top right to left bottom, away from camera.
-        this._mainLight = app.createDirectionalLight([-1, -1, -1]);
-    },
-    loop: function (app) {
-        // Simply rotating the cube every frame.
-        this._cube.rotation.rotateY(app.frameTime / 1000);
-    }
+const app = new App3D('#viewport');
+// Create a perspective camera.
+// First parameter is the camera position. Which is in front of the cube.
+// Second parameter is the camera lookAt target. Which is the origin of the world, and where the cube puts.
+const camera = app.createCamera([0, 2, 5], [0, 0, 0]);
+// Create a sample cube
+const cube = app.createCube();
+// Create a directional light. The direction is from top right to left bottom, away from camera.
+const mainLight = app.createDirectionalLight([-1, -1, -1]);
+app.loop((app) => {
+  // Simply rotating the cube every frame.
+  this._cube.rotation.rotateY(app.frameTime / 1000);
 });
@@ -144,2 +146,3 @@ ```
     private _autoRender;
+    private _autoGC;
     private _inited;
@@ -178,2 +181,6 @@ private _frameTime;
     /**
+     * Collect resources.
+     */
+    gc(): void;
+    /**
      * Load a texture from image or string.
@@ -429,3 +436,3 @@ * @example
      */
-    resize(width?: number, height?: number): void;
+    resize(width?: number, height?: number, pixelRatio?: number): void;
     /**
@@ -432,0 +439,0 @@ * Dispose the application

lib/App3D.js

@@ -55,17 +55,14 @@ // TODO createCompositor
 ```js
-const app = clay.application.create('#viewport', {
-    init: function (app) {
-        // Create a perspective camera.
-        // First parameter is the camera position. Which is in front of the cube.
-        // Second parameter is the camera lookAt target. Which is the origin of the world, and where the cube puts.
-        this._camera = app.createCamera([0, 2, 5], [0, 0, 0]);
-        // Create a sample cube
-        this._cube = app.createCube();
-        // Create a directional light. The direction is from top right to left bottom, away from camera.
-        this._mainLight = app.createDirectionalLight([-1, -1, -1]);
-    },
-    loop: function (app) {
-        // Simply rotating the cube every frame.
-        this._cube.rotation.rotateY(app.frameTime / 1000);
-    }
+const app = new App3D('#viewport');
+// Create a perspective camera.
+// First parameter is the camera position. Which is in front of the cube.
+// Second parameter is the camera lookAt target. Which is the origin of the world, and where the cube puts.
+const camera = app.createCamera([0, 2, 5], [0, 0, 0]);
+// Create a sample cube
+const cube = app.createCube();
+// Create a directional light. The direction is from top right to left bottom, away from camera.
+const mainLight = app.createDirectionalLight([-1, -1, -1]);
+app.loop((app) => {
+  // Simply rotating the cube every frame.
+  this._cube.rotation.rotateY(app.frameTime / 1000);
 });
@@ -89,2 +86,3 @@ ```
         this._autoRender = util.optional(opts.autoRender, true);
+        this._autoGC = util.optional(opts.autoGC, true);
         const graphicOpts = (this._graphicOpts = opts.graphic || {});
@@ -212,3 +210,5 @@ const glAttributes = opts.glAttributes || {};
             }
-            this._gpuResourceManager.collect(this._scene);
+            if (this._autoGC) {
+                this._gpuResourceManager.collect(this._scene);
+            }
         });
@@ -267,2 +267,8 @@ }
     /**
+     * Collect resources.
+     */
+    gc() {
+        this._gpuResourceManager.collect(this._scene);
+    }
+    /**
      * Load a texture from image or string.
@@ -882,5 +888,5 @@ * @example
      */
-    resize(width, height) {
+    resize(width, height, pixelRatio) {
         const container = this._container;
-        this._renderer.resize(width || container.clientWidth, height || container.clientHeight);
+        this._renderer.resize(width || container.clientWidth, height || container.clientHeight, pixelRatio);
     }
@@ -887,0 +893,0 @@ /**

lib/claygl.d.ts

@@ -34,2 +34,3 @@ import { setCanvasSize } from './core/util';
 export { Ambient as AmbientLight, AmbientCubemap as AmbientCubemapLight, AmbientSH as AmbientSHLight, Directional as DirectionalLight, Point as PointLight, Sphere as SphereLight, Spot as SpotLight, Tube as TubeLight } from './light/index';
+export { default as Light } from './Light';
 export { Cone as ConeGeometry, Cube as CubeGeometry, Cylinder as CylinderGeometry, ParametricSurface as ParametricSurfaceGeometry, Plane as PlaneGeometry, Sphere as SphereGeometry } from './geometry/index';
@@ -36,0 +37,0 @@ export * from './math';

lib/claygl.js

@@ -42,2 +42,3 @@ import { setCanvasSize } from './core/util';
 export { Ambient as AmbientLight, AmbientCubemap as AmbientCubemapLight, AmbientSH as AmbientSHLight, Directional as DirectionalLight, Point as PointLight, Sphere as SphereLight, Spot as SpotLight, Tube as TubeLight } from './light/index';
+export { default as Light } from './Light';
 // Procedural Geometry
@@ -44,0 +45,0 @@ export { Cone as ConeGeometry, Cube as CubeGeometry, Cylinder as CylinderGeometry, ParametricSurface as ParametricSurfaceGeometry, Plane as PlaneGeometry, Sphere as SphereGeometry } from './geometry/index';

lib/core/util.js

@@ -148,4 +148,2 @@ let guid = 0;
     const style = canvas.style;
-    // http://www.khronos.org/webgl/wiki/HandlingHighDPI
-    // set the display size of the canvas.
     if (style) {
@@ -152,0 +150,0 @@ style.width = width + 'px';

lib/deferred/GBuffer.js

@@ -238,3 +238,8 @@ import Texture2D from '../Texture2D';
         if (enableTargetTexture2) {
-            frameBuffer.attach(opts.targetTexture2 || this._gBufferTex2, renderer.gl.DEPTH_STENCIL_ATTACHMENT);
+            const targetTexture2 = opts.targetTexture2 || this._gBufferTex2;
+            frameBuffer.attach(targetTexture2, 
+            // TODO can specify attachment
+            targetTexture2.format === constants.DEPTH_STENCIL
+                ? renderer.gl.DEPTH_STENCIL_ATTACHMENT
+                : renderer.gl.DEPTH_ATTACHMENT);
         }
@@ -241,0 +246,0 @@ function clearViewport() {

lib/deferred/Renderer.d.ts

 import Material from '../Material';
-import FrameBuffer from '../FrameBuffer';
 import Texture2D from '../Texture2D';
-import Mesh from '../Mesh';
 import GBuffer from './GBuffer';
@@ -10,10 +8,3 @@ import type ShadowMapPass from '../prePass/ShadowMap';
 import Renderer, { RendererViewport } from '../Renderer';
-import type PointLight from '../light/Point';
-import SphereLight from '../light/Sphere';
-import type SpotLight from '../light/Spot';
-import type TubeLight from '../light/Tube';
-import type DirectionalLight from '../light/Directional';
-import PerspectiveCamera from '../camera/Perspective';
-import OrthographicCamera from '../camera/Orthographic';
-type DeferredLight = PointLight | SphereLight | SpotLight | TubeLight | DirectionalLight;
+import type Light from '../Light';
 /**
@@ -53,3 +44,8 @@ * Deferred renderer
     private _lightShadowInfosMap;
+    private _extraLightTypes;
     constructor();
+    extendLightType<T extends Light>(lightType: T['type'], opts?: {
+        fullQuad?: boolean;
+        getLightMaterial?: (light: T) => Material;
+    }): void;
     /**
@@ -95,14 +91,11 @@ * Do render
     resize(width: number, height: number): void;
-    _renderOthers(renderer: Renderer, scene: Scene, camera: Camera, gBufferTexture2: Texture2D, frameBuffer: FrameBuffer): void;
-    _accumulateLightBuffer(renderer: Renderer, scene: Scene, camera: Camera, updateShadow?: boolean, gBufferTextures?: {
-        gBufferTexture1: Texture2D;
-        gBufferTexture2: Texture2D;
-        gBufferTexture3: Texture2D;
-    }): void;
-    _prepareLightShadow(renderer: Renderer, scene: Scene, camera: PerspectiveCamera | OrthographicCamera): void;
-    _prepareSingleLightShadow(renderer: Renderer, scene: Scene, camera: PerspectiveCamera | OrthographicCamera, light: DeferredLight, material?: Material): void;
-    _updateLightProxy(light: DeferredLight): void;
-    _renderVolumeMeshList(renderer: Renderer, scene: Scene, camera: Camera, lightAccumFrameBuffer: FrameBuffer, volumeMeshList: Mesh[]): void;
+    private _renderOthers;
+    private _accumulateLightBuffer;
+    private _updatePCFKernel;
+    private _prepareLightShadow;
+    private _prepareSingleLightShadow;
+    private _updateLightProxy;
+    private _renderVolumeMeshList;
     dispose(renderer: Renderer): void;
 }
 export default DeferredRenderer;

lib/deferred/Renderer.js

@@ -31,2 +31,6 @@ // Light-pre pass deferred rendering
 const preZMaterial = new Material(new Shader(preZVertex, preZFragment));
+function lightAccumulateBlendFunc(gl) {
+    gl.blendEquation(constants.FUNC_ADD);
+    gl.blendFuncSeparate(constants.ONE, constants.ONE, constants.ONE, constants.ZERO);
+}
 /**
@@ -60,13 +64,6 @@ * Deferred renderer
         this._lightShadowInfosMap = new WeakMap();
+        this._extraLightTypes = {};
         const directionalLightShader = new Shader(fullscreenQuadPassVertex, deferredDirectionalLightFragment);
-        const lightAccumulateBlendFunc = function (gl) {
-            gl.blendEquation(gl.FUNC_ADD);
-            gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
-        };
         const createLightPassMat = function (shader) {
-            return new Material(shader, {
-                blend: lightAccumulateBlendFunc,
-                transparent: true,
-                depthMask: false
-            });
+            return new Material(shader);
         };
@@ -100,2 +97,10 @@ this._createLightPassMat = createLightPassMat;
     }
+    extendLightType(lightType, opts) {
+        opts = opts || {};
+        // TODO light using full quad not supported yet.
+        this._extraLightTypes[lightType] = {
+            fullQuad: opts.fullQuad || false,
+            getLightMaterial: opts.getLightMaterial
+        };
+    }
     /**
@@ -115,5 +120,6 @@ * Do render
         scene.updateLights();
+        const lightAccumTex = opts.targetTexture || this._lightAccumTex;
         // Render list will be updated in gbuffer.
+        camera.updateOffset && camera.updateOffset(lightAccumTex.width, lightAccumTex.height, 1);
         camera.update();
-        const lightAccumTex = opts.targetTexture || this._lightAccumTex;
         const dpr = renderer.getPixelRatio();
@@ -182,2 +188,4 @@ const isInputGBuffer = opts.gBufferTexture1 && opts.gBufferTexture2 && opts.gBufferTexture3;
         }, (gl) => {
+            // Clear after render.
+            gl.clear(gl.DEPTH_BUFFER_BIT);
             gl.colorMask(true, true, true, true);
@@ -193,2 +201,3 @@ });
         const lightAccumFrameBuffer = this._lightAccumFrameBuffer;
+        const fullQuadPass = this._fullQuadPass;
         const eyePosition = camera.getWorldPosition().array;
@@ -203,3 +212,2 @@ // Update volume meshes
         if (shadowMapPass && updateShadow) {
-            gl.clearColor(1, 1, 1, 1);
             this._prepareLightShadow(renderer, scene, camera);
@@ -243,2 +251,3 @@ }
         });
+        let hasLight = false;
         for (let i = 0; i < scene.lights.length; i++) {
@@ -249,4 +258,6 @@ const light = scene.lights[i];
             }
+            hasLight = true;
             const uTpl = light.uniformTemplates;
             const volumeMesh = light.volumeMesh || this._volumeMeshMap.get(light);
+            const extraLightTypes = this._extraLightTypes;
             if (volumeMesh) {
@@ -286,3 +297,5 @@ const material = volumeMesh.material;
                     default:
-                        unknownLightType = true;
+                        if (!(!extraLightTypes[light.type].fullQuad && light.volumeMesh)) {
+                            unknownLightType = true;
+                        }
                 }
@@ -297,2 +310,6 @@ if (unknownLightType) {
                 material.set('gBufferTexture3', gBufferTexture3);
+                material.transparent = true;
+                material.depthMask = false;
+                material.blend = lightAccumulateBlendFunc;
+                this._updatePCFKernel(material);
                 volumeMeshList.push(volumeMesh);
@@ -332,4 +349,12 @@ }
                     default:
-                        // Unkonw light type
-                        unknownLightType = true;
+                        const extraLightConfig = extraLightTypes[light.type];
+                        if (extraLightConfig &&
+                            extraLightConfig.fullQuad &&
+                            extraLightConfig.getLightMaterial) {
+                            passMaterial = extraLightConfig.getLightMaterial(light);
+                        }
+                        else {
+                            // Unkonw light type
+                            unknownLightType = true;
+                        }
                 }
@@ -347,15 +372,39 @@ if (unknownLightType) {
                     const lightShadowInfo = this._lightShadowInfosMap.get(light);
-                    passMaterial.set('lightShadowMap', lightShadowInfo.shadowMap);
-                    passMaterial.set('lightMatrices', lightShadowInfo.lightMatrices);
-                    passMaterial.set('shadowCascadeClipsNear', lightShadowInfo.cascadeClipsNear);
-                    passMaterial.set('shadowCascadeClipsFar', lightShadowInfo.cascadeClipsFar);
-                    passMaterial.set('lightShadowMapSize', light.shadowResolution);
+                    if (lightShadowInfo) {
+                        passMaterial.set('lightShadowMap', lightShadowInfo.shadowMap);
+                        passMaterial.set('lightMatrices', lightShadowInfo.lightMatrices);
+                        passMaterial.set('shadowCascadeClipsNear', lightShadowInfo.cascadeClipsNear);
+                        passMaterial.set('shadowCascadeClipsFar', lightShadowInfo.cascadeClipsFar);
+                        passMaterial.set('lightShadowMapSize', light.shadowResolution);
+                    }
+                    this._updatePCFKernel(passMaterial);
                 }
-                const pass = this._fullQuadPass;
-                pass.material = passMaterial;
-                pass.renderQuad(renderer, lightAccumFrameBuffer);
+                fullQuadPass.material = passMaterial;
+                passMaterial.transparent = true;
+                passMaterial.depthMask = false;
+                passMaterial.blend = lightAccumulateBlendFunc;
+                fullQuadPass.renderQuad(renderer, lightAccumFrameBuffer);
             }
         }
         this._renderVolumeMeshList(renderer, scene, camera, lightAccumFrameBuffer, volumeMeshList);
+        if (!hasLight) {
+            // Show pure black with ambient light.
+            const passMaterial = this._ambientMat;
+            // No need to set transparent and blend
+            passMaterial.set('lightColor', [0, 0, 0]);
+            passMaterial.set('gBufferTexture1', gBufferTexture1);
+            passMaterial.set('gBufferTexture3', gBufferTexture3);
+            passMaterial.depthMask = false;
+            fullQuadPass.material = passMaterial;
+            fullQuadPass.renderQuad(renderer, lightAccumFrameBuffer);
+        }
     }
+    _updatePCFKernel(material) {
+        const shadowMapPass = this.shadowMapPass;
+        if (shadowMapPass) {
+            material.define('fragment', 'PCF_KERNEL_SIZE', shadowMapPass.kernelPCF.length / 2);
+            material[shadowMapPass.PCSSLightSize > 0 ? 'define' : 'undefine']('fragment', 'PCSS_LIGHT_SIZE', shadowMapPass.PCSSLightSize.toFixed(2));
+            material.set('pcfKernel', shadowMapPass.kernelPCF);
+        }
+    }
     _prepareLightShadow(renderer, scene, camera) {
@@ -385,2 +434,5 @@ for (let i = 0; i < scene.lights.length; i++) {
         const shadowMapPass = this.shadowMapPass;
+        if (material) {
+            this._updatePCFKernel(material);
+        }
         if (light.type === 'POINT_LIGHT') {
@@ -387,0 +439,0 @@ const shadowMaps = [];

lib/light/AmbientSH.d.ts

 import Light, { LightOpts } from '../Light';
+import Renderer from '../Renderer';
+import TextureCube from '../TextureCube';
+import { ProjectEnvironmentMapOpts } from '../util/sh';
 export interface AmbientSHLightOpts extends LightOpts {
@@ -10,4 +13,5 @@ coefficients: ArrayLike<number>;
     constructor(opts?: Partial<AmbientSHLightOpts>);
+    calculateFromEnvironmentMap(renderer: Renderer, cubemap: TextureCube, opts?: ProjectEnvironmentMapOpts): void;
     clone(): any;
 }
 export default AmbientSHLight;

lib/light/AmbientSH.js

 import Light from '../Light';
+import { projectEnvironmentMap } from '../util/sh';
 class AmbientSHLight extends Light {
@@ -9,2 +10,5 @@ constructor(opts) {
     }
+    calculateFromEnvironmentMap(renderer, cubemap, opts) {
+        this.coefficients = projectEnvironmentMap(renderer, cubemap, opts);
+    }
     clone() {
@@ -11,0 +15,0 @@ const light = super.clone();

lib/prePass/ShadowMap.d.ts

@@ -38,2 +38,3 @@ import Renderer from '../Renderer';
     precision: ShaderPrecision;
+    intersectCameraBoundingBox: boolean;
     private _frameBuffer;
@@ -40,0 +41,0 @@ private _textures;

lib/prePass/ShadowMap.js

@@ -80,2 +80,4 @@ import * as constants from '../core/constants';
         this.precision = 'highp';
+        // If intersect with view bounding box to keep the frustum in directional light.
+        this.intersectCameraBoundingBox = true;
         this._frameBuffer = new FrameBuffer();
@@ -316,2 +318,4 @@ this._textures = {};
             prepare(gl) {
+                // Needs white background.
+                gl.clearColor(1, 1, 1, 1);
                 gl.clear(constants.COLOR_BUFFER_BIT | constants.DEPTH_BUFFER_BIT);
@@ -388,3 +392,6 @@ },
                     // Only clear on the first pass.
-                    i === 0 && gl.clear(constants.COLOR_BUFFER_BIT | constants.DEPTH_BUFFER_BIT);
+                    if (i === 0) {
+                        gl.clearColor(1, 1, 1, 1);
+                        gl.clear(constants.COLOR_BUFFER_BIT | constants.DEPTH_BUFFER_BIT);
+                    }
                 }
@@ -432,2 +439,3 @@ }));
             prepare(gl) {
+                gl.clearColor(1, 1, 1, 1);
                 gl.clear(constants.COLOR_BUFFER_BIT | constants.DEPTH_BUFFER_BIT);
@@ -606,3 +614,5 @@ },
         sceneViewBoundingBox.copy(scene.viewBoundingBoxLastFrame);
-        sceneViewBoundingBox.intersection(sceneCamera.frustum.boundingBox);
+        if (this.intersectCameraBoundingBox) {
+            sceneViewBoundingBox.intersection(sceneCamera.frustum.boundingBox);
+        }
         // Move to the center of frustum(in world space)
@@ -609,0 +619,0 @@ camera.position

lib/Renderer.d.ts

@@ -138,3 +138,3 @@ import Notifier from './core/Notifier';
      */
-    resize(width?: number, height?: number): void;
+    resize(width?: number, height?: number, pixelRatio?: number): void;
     /**
@@ -141,0 +141,0 @@ * Get renderer width

lib/Renderer.js

@@ -72,5 +72,6 @@ // TODO Resources like shader, texture, geometry reference management
      */
-    resize(width, height) {
+    resize(width, height, pixelRatio) {
         const canvas = this.canvas;
-        const dpr = this._pixelRatio;
+        const dpr = pixelRatio || this._pixelRatio;
+        this._pixelRatio = dpr;
         if (width != null) {
@@ -225,4 +226,4 @@ setCanvasSize(canvas, width, height, dpr);
         }
+        camera.updateOffset && camera.updateOffset(viewport.width, viewport.height, viewportDpr);
         camera.update();
-        camera.updateOffset && camera.updateOffset(viewport.width, viewport.height, viewportDpr);
         const renderList = scene.updateRenderList(camera, true);
@@ -229,0 +230,0 @@ const opaqueList = renderList.opaque;

lib/shader/source/deferred/chunk.glsl.js

@@ -38,3 +38,3 @@ import { createSemanticUniform as semanticUniform, createShaderMixin, createShaderFunction, createUniform as uniform, glsl } from '../../../Shader';
 // N = normalize(N);
-vec3 N = texel1.rgb * 2.0 - 1.0;
+vec3 N = normalize(texel1.rgb * 2.0 - 1.0);
 
@@ -82,5 +82,5 @@ // Depth buffer range is 0.0 - 1.0
   return ndl * lightColor
-    * (diffuseColor + D_Phong(g, ndh) * F_Schlick(ndv, specularColor));
+    * (diffuseColor + D_GGX(g, ndh) * F_Schlick(ndv, specularColor));
 }
 `);
 //# sourceMappingURL=chunk.glsl.js.map

lib/shader/source/deferred/gbuffer.glsl.js

@@ -211,7 +211,9 @@ import { createArrayUniform, createUniform as uniform, createVarying as varying, FragmentShader, glsl, VertexShader } from '../../../Shader';
   vec4 texel = texture(diffuseMap, v_Texcoord);
+  vec3 albedo = color;
   if (linear) {
     texel = sRGBToLinear(texel);
+    albedo = sRGBToLinear(vec4(albedo, 1.0)).rgb;
   }
 
-  out_color1 = vec4(texel.rgb * color, m + 0.005);
+  out_color1 = vec4(texel.rgb * albedo, m + 0.005);
 #endif
@@ -218,0 +220,0 @@

lib/util/cubemap.js

@@ -24,5 +24,7 @@ // Cubemap prefilter utility
     // PENDING preserveDrawingBuffer?
+    let newCreatedNormalDistribution = false;
     if (!brdfLookup || !normalDistribution) {
         normalDistribution = generateNormalDistribution();
         brdfLookup = integrateBRDF(renderer, normalDistribution);
+        newCreatedNormalDistribution = true;
     }
@@ -108,4 +110,5 @@ textureOpts = textureOpts || {};
     }
-    // Remove gpu resource allucated in renderer
-    renderer.disposeTexture(normalDistribution);
+    if (newCreatedNormalDistribution) {
+        renderer.disposeTexture(normalDistribution);
+    }
     return {
@@ -112,0 +115,0 @@ environmentMap: prefilteredCubeMap,

lib/util/sh.d.ts

 import Texture2D from '../Texture2D';
 import type Renderer from '../Renderer';
 import TextureCube from '../TextureCube';
-export declare function projectEnvironmentMap(renderer: Renderer, envMap: Texture2D | TextureCube, opts?: {
+export interface ProjectEnvironmentMapOpts {
     decodeRGBM?: boolean;
     lod?: number;
-}): Float32Array;
+}
+export declare function projectEnvironmentMap(renderer: Renderer, envMap: Texture2D | TextureCube, opts?: ProjectEnvironmentMapOpts): Float32Array;

package.json

 {
   "name": "claygl-next",
-  "version": "2.0.0-alpha.17",
+  "version": "2.0.0-alpha.19",
   "description": "A 3D graphic library",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6997467

increased by0.31%

Lines of code

105591

increased by0.24%

No dependency changes