diff --git a/src/libs/cgl/light/index.js b/src/libs/cgl/light/index.js index 65d15daee..10d2ec9aa 100644 --- a/src/libs/cgl/light/index.js +++ b/src/libs/cgl/light/index.js @@ -10,441 +10,447 @@ import { * @param cgl * @param {Object} config config for light */ -function Light(cgl, config) +// function Light(cgl, config) +class Light { + constructor(cgl, config) + { // * common settings for each light - this.type = config.type || "point"; - this.color = config.color || [1, 1, 1]; - this.specular = config.specular || [0, 0, 0]; - this.position = config.position || null; - this.intensity = config.intensity || 1; - this.radius = config.radius || 1; - this.falloff = config.falloff || 1; - - // * spot light specific config - this.spotExponent = config.spotExponent || 1; - this.cosConeAngleInner = config.cosConeAngleInner || 0; // spot light - this.cosConeAngle = config.cosConeAngle || 0; - this.conePointAt = config.conePointAt || [0, 0, 0]; - - // * shadow specific config - this.castShadow = config.castShadow || false; - this.nearFar = config.nearFar || [0, 0]; - this.normalOffset = config.normalOffset || 0; - this.shadowBias = config.shadowBias || 0; - this.shadowStrength = config.shadowStrength || 0; - this.lightMatrix = null; - - this.shadowMap = null; - this.shadowMapDepth = null; - this.shadowCubeMap = null; - - // * internal config - this._cgl = cgl; - this.state = { - "isUpdating": false - }; - this._framebuffer = null; - this._shaderShadowMap = { - "shader": null, - "uniforms": { - "lightPosition": null, - "nearFar": null, - }, - "matrices": { - "modelMatrix": mat4.create(), - "viewMatrix": mat4.create(), - "projMatrix": mat4.create(), - "biasMatrix": mat4.fromValues(0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 0.0, 0.5, 0.5, 0.5, 1.0), - }, - "vectors": { - "lookAt": vec3.create(), - "camPos": vec3.create(), - "up": vec3.fromValues(0, 1, 0), - }, - }; - this._effectBlur = null; - this._shaderBlur = { - "shader": null, - "uniforms": { - "XY": null, - }, - }; - this._cubemap = null; - - return this; -} - -Light.prototype.getModifiableParameters = function () -{ - return [ - "color", - "specular", - "position", - "intensity", - "radius", - "falloff", + this.type = config.type || "point"; + this.color = config.color || [1, 1, 1]; + this.specular = config.specular || [0, 0, 0]; + this.position = config.position || null; + this.intensity = config.intensity || 1; + this.radius = config.radius || 1; + this.falloff = config.falloff || 1; // * spot light specific config - "spotExponent", - "cosConeAngleInner", - "cosConeAngle", - "conePointAt", - ]; -}; - -Light.prototype.createProjectionMatrix = Light.prototype.updateProjectionMatrix = function (lrBottomTop, near, far, angle) -{ - if (this.type === "spot") - { - mat4.perspective(this._shaderShadowMap.matrices.projMatrix, -2 * CGL.DEG2RAD * angle, 1, near, far); // * angle in degrees + this.spotExponent = config.spotExponent || 1; + this.cosConeAngleInner = config.cosConeAngleInner || 0; // spot light + this.cosConeAngle = config.cosConeAngle || 0; + this.conePointAt = config.conePointAt || [0, 0, 0]; + + // * shadow specific config + this.castShadow = config.castShadow || false; + this.nearFar = config.nearFar || [0, 0]; + this.normalOffset = config.normalOffset || 0; + this.shadowBias = config.shadowBias || 0; + this.shadowStrength = config.shadowStrength || 0; + this.lightMatrix = null; + + this.shadowMap = null; + this.shadowMapDepth = null; + this.shadowCubeMap = null; + + // * internal config + this._cgl = cgl; + this.state = { + "isUpdating": false + }; + this._framebuffer = null; + this._shaderShadowMap = { + "shader": null, + "uniforms": { + "lightPosition": null, + "nearFar": null, + }, + "matrices": { + "modelMatrix": mat4.create(), + "viewMatrix": mat4.create(), + "projMatrix": mat4.create(), + "biasMatrix": mat4.fromValues(0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 0.0, 0.5, 0.5, 0.5, 1.0), + }, + "vectors": { + "lookAt": vec3.create(), + "camPos": vec3.create(), + "up": vec3.fromValues(0, 1, 0), + }, + }; + this._effectBlur = null; + this._shaderBlur = { + "shader": null, + "uniforms": { + "XY": null, + }, + }; + this._cubemap = null; + } - else if (this.type === "directional") + + getModifiableParameters() { - mat4.ortho(this._shaderShadowMap.matrices.projMatrix, -1 * lrBottomTop, lrBottomTop, -1 * lrBottomTop, lrBottomTop, near, far); + return [ + "color", + "specular", + "position", + "intensity", + "radius", + "falloff", + + // * spot light specific config + "spotExponent", + "cosConeAngleInner", + "cosConeAngle", + "conePointAt", + ]; } - else if (this.type === "point") + + createProjectionMatrix(lrBottomTop, near, far, angle) { - mat4.perspective(this._shaderShadowMap.matrices.projMatrix, CGL.DEG2RAD * 90, 1, near, far); - this.nearFar = [near, far]; + this.updateProjectionMatrix(lrBottomTop, near, far, angle); } -}; -Light.prototype.hasFramebuffer = function () -{ - return !!this._framebuffer; -}; -Light.prototype.hasShadowMapShader = function () -{ - return !!this._shaderShadowMap.shader; -}; + updateProjectionMatrix(lrBottomTop, near, far, angle) + { + if (this.type === "spot") + { + mat4.perspective(this._shaderShadowMap.matrices.projMatrix, -2 * CGL.DEG2RAD * angle, 1, near, far); // * angle in degrees + } + else if (this.type === "directional") + { + mat4.ortho(this._shaderShadowMap.matrices.projMatrix, -1 * lrBottomTop, lrBottomTop, -1 * lrBottomTop, lrBottomTop, near, far); + } + else if (this.type === "point") + { + mat4.perspective(this._shaderShadowMap.matrices.projMatrix, CGL.DEG2RAD * 90, 1, near, far); + this.nearFar = [near, far]; + } + } -Light.prototype.hasBlurShader = function () -{ - return !!this._shaderBlur.shader; -}; -Light.prototype.hasBlurEffect = function () -{ - return !!this._effectBlur; -}; + hasFramebuffer() + { + return !!this._framebuffer; + } -Light.prototype.getShadowMap = function () -{ - if (this.type === "point") return null; // TODO: replace - return this._framebuffer.getTextureColor(); -}; + hasShadowMapShader() + { + return !!this._shaderShadowMap.shader; + } -Light.prototype.getShadowMapDepth = function () -{ - if (this.type === "point") return null; - return this._framebuffer.getTextureDepth(); -}; + hasBlurShader() + { + return !!this._shaderBlur.shader; + } -Light.prototype.createFramebuffer = function (width, height, options) -{ - this.state.isUpdating = true; + hasBlurEffect() + { + return !!this._effectBlur; + } + getShadowMap() + { + if (this.type === "point") return null; // TODO: replace + return this._framebuffer.getTextureColor(); + } - const fbWidth = width || 512; - const fbHeight = height || 512; + getShadowMapDepth() + { + if (this.type === "point") return null; + return this._framebuffer.getTextureDepth(); + } - if (this.type === "point") + createFramebuffer(width, height, options) { - if (!this.hasCubemap()) + this.state.isUpdating = true; + + const fbWidth = width || 512; + const fbHeight = height || 512; + + if (this.type === "point") { - this._cubemap = new CGL.CubemapFramebuffer(this._cgl, fbWidth, fbHeight, { - "name": "point light shadowmap" - }); + if (!this.hasCubemap()) + { + this._cubemap = new CGL.CubemapFramebuffer(this._cgl, fbWidth, fbHeight, { + "name": "point light shadowmap" + }); + } + else + { + this._cubemap.setSize(fbWidth, fbHeight); + } + + this._cubemap.setCamPos(this.position); + this._cubemap.setMatrices( + this._shaderShadowMap.matrices.modelMatrix, + this._shaderShadowMap.matrices.viewMatrix, + this._shaderShadowMap.matrices.projMatrix + ); + + this.state.isUpdating = false; + return; } - else + + if (this.hasFramebuffer()) this._framebuffer.delete(); + + if (options) { - this._cubemap.setSize(fbWidth, fbHeight); + if (options.filter) + { + // * set FP to false if mipmap filtering is selected + options.isFloatingPointTexture = options.filter !== CGL.Texture.FILTER_MIPMAP; + } } - this._cubemap.setCamPos(this.position); - this._cubemap.setMatrices( - this._shaderShadowMap.matrices.modelMatrix, - this._shaderShadowMap.matrices.viewMatrix, - this._shaderShadowMap.matrices.projMatrix - ); + if (this._cgl.glVersion == 1) + { + this._framebuffer = new CGL.Framebuffer( + this._cgl, + fbWidth, + fbHeight, + ({ + "isFloatingPointTexture": true, + "filter": CGL.Texture.FILTER_LINEAR, + "wrap": CGL.Texture.WRAP_CLAMP_TO_EDGE, + ...options, + }), + ); + } + else + { + this._framebuffer = new CGL.Framebuffer2( + this._cgl, + fbWidth, + fbHeight, + ({ + "isFloatingPointTexture": true, + "filter": CGL.Texture.FILTER_LINEAR, + "wrap": CGL.Texture.WRAP_CLAMP_TO_EDGE, + ...options, + }), + ); + } this.state.isUpdating = false; - return; } - if (this.hasFramebuffer()) this._framebuffer.delete(); - - - if (options) + hasCubemap() { - if (options.filter) - { - // * set FP to false if mipmap filtering is selected - options.isFloatingPointTexture = options.filter !== CGL.Texture.FILTER_MIPMAP; - } + return !!this._cubemap; } - if (this._cgl.glVersion == 1) + setFramebufferSize(size) { - this._framebuffer = new CGL.Framebuffer( - this._cgl, - fbWidth, - fbHeight, - ({ - "isFloatingPointTexture": true, - "filter": CGL.Texture.FILTER_LINEAR, - "wrap": CGL.Texture.WRAP_CLAMP_TO_EDGE, - ...options, - }), - ); - } - else - { - this._framebuffer = new CGL.Framebuffer2( - this._cgl, - fbWidth, - fbHeight, - ({ - "isFloatingPointTexture": true, - "filter": CGL.Texture.FILTER_LINEAR, - "wrap": CGL.Texture.WRAP_CLAMP_TO_EDGE, - ...options, - }), - ); + if (this.hasFramebuffer()) this._framebuffer.setSize(size, size); } - this.state.isUpdating = false; -}; - -Light.prototype.hasCubemap = function () -{ - return !!this._cubemap; -}; + createShadowMapShader(vertexShader, fragmentShader) + { + if (this.hasShadowMapShader()) return; -Light.prototype.setFramebufferSize = function (size) -{ - if (this.hasFramebuffer()) this._framebuffer.setSize(size, size); -}; + this.state.isUpdating = true; -Light.prototype.createShadowMapShader = function (vertexShader, fragmentShader) -{ - if (this.hasShadowMapShader()) return; + this._shaderShadowMap.shader = new CGL.Shader(this._cgl, "shadowPass" + this.type.charAt(0).toUpperCase() + this.type.slice(1)); + this._shaderShadowMap.shader.setModules(["MODULE_VERTEX_POSITION", "MODULE_COLOR", "MODULE_BEGIN_FRAG"]); - this.state.isUpdating = true; + const vShader = vertexShader || this.getShadowPassVertexShader(); + const fShader = fragmentShader || this.getShadowPassFragmentShader(); - this._shaderShadowMap.shader = new CGL.Shader(this._cgl, "shadowPass" + this.type.charAt(0).toUpperCase() + this.type.slice(1)); - this._shaderShadowMap.shader.setModules(["MODULE_VERTEX_POSITION", "MODULE_COLOR", "MODULE_BEGIN_FRAG"]); + this._shaderShadowMap.shader.setSource(vShader, fShader); + this._shaderShadowMap.shader.offScreenPass = true; - const vShader = vertexShader || this.getShadowPassVertexShader(); - const fShader = fragmentShader || this.getShadowPassFragmentShader(); + if (this.type === "point") + { + this._shaderShadowMap.uniforms.lightPosition = new CGL.Uniform(this._shaderShadowMap.shader, "3f", "inLightPosition", vec3.create()); - this._shaderShadowMap.shader.setSource(vShader, fShader); - this._shaderShadowMap.shader.offScreenPass = true; + this._shaderShadowMap.uniforms.nearFar = new CGL.Uniform(this._shaderShadowMap.shader, "2f", "inNearFar", vec2.create()); + } - if (this.type === "point") - { - this._shaderShadowMap.uniforms.lightPosition = new CGL.Uniform(this._shaderShadowMap.shader, "3f", "inLightPosition", vec3.create()); + if (this._cgl.glVersion == 1) + { + this._cgl.enableExtension("OES_texture_float"); + this._cgl.enableExtension("OES_texture_float_linear"); + this._cgl.enableExtension("OES_texture_half_float"); + this._cgl.enableExtension("OES_texture_half_float_linear"); + + this._shaderShadowMap.shader.enableExtension("GL_OES_standard_derivatives"); + this._shaderShadowMap.shader.enableExtension("GL_OES_texture_float"); + this._shaderShadowMap.shader.enableExtension("GL_OES_texture_float_linear"); + this._shaderShadowMap.shader.enableExtension("GL_OES_texture_half_float"); + this._shaderShadowMap.shader.enableExtension("GL_OES_texture_half_float_linear"); + } - this._shaderShadowMap.uniforms.nearFar = new CGL.Uniform(this._shaderShadowMap.shader, "2f", "inNearFar", vec2.create()); + this.state.isUpdating = false; } - if (this._cgl.glVersion == 1) + createBlurEffect(options) { - this._cgl.enableExtension("OES_texture_float"); - this._cgl.enableExtension("OES_texture_float_linear"); - this._cgl.enableExtension("OES_texture_half_float"); - this._cgl.enableExtension("OES_texture_half_float_linear"); - - this._shaderShadowMap.shader.enableExtension("GL_OES_standard_derivatives"); - this._shaderShadowMap.shader.enableExtension("GL_OES_texture_float"); - this._shaderShadowMap.shader.enableExtension("GL_OES_texture_float_linear"); - this._shaderShadowMap.shader.enableExtension("GL_OES_texture_half_float"); - this._shaderShadowMap.shader.enableExtension("GL_OES_texture_half_float_linear"); - } + if (this.type === "point") return; + this.state.isUpdating = true; + if (this.hasBlurEffect()) this._effectBlur.delete(); - this.state.isUpdating = false; -}; + this._effectBlur = new CGL.TextureEffect( + this._cgl, + ({ + "isFloatingPointTexture": true, + "filter": CGL.Texture.FILTER_LINEAR, + "wrap": CGL.Texture.WRAP_CLAMP_TO_EDGE, + ...options, + }), + ); + this.state.isUpdating = false; + } -Light.prototype.createBlurEffect = function (options) -{ - if (this.type === "point") return; - this.state.isUpdating = true; - if (this.hasBlurEffect()) this._effectBlur.delete(); - - this._effectBlur = new CGL.TextureEffect( - this._cgl, - ({ - "isFloatingPointTexture": true, - "filter": CGL.Texture.FILTER_LINEAR, - "wrap": CGL.Texture.WRAP_CLAMP_TO_EDGE, - ...options, - }), - ); - this.state.isUpdating = false; -}; - -Light.prototype.createBlurShader = function (vertexShader, fragmentShader) -{ - if (this.hasBlurShader()) + createBlurShader(vertexShader, fragmentShader) { - return; - } - if (this.type === "point") return; // TODO: add cubemap convolution + if (this.hasBlurShader()) + { + return; + } + if (this.type === "point") return; // TODO: add cubemap convolution - this.state.isUpdating = true; + this.state.isUpdating = true; - const vShader = vertexShader || this.getBlurPassVertexShader(); - const fShader = fragmentShader || this.getBlurPassFragmentShader(); + const vShader = vertexShader || this.getBlurPassVertexShader(); + const fShader = fragmentShader || this.getBlurPassFragmentShader(); - this._shaderBlur.shader = new CGL.Shader(this._cgl, "blurPass" + this.type.charAt(0).toUpperCase() + this.type.slice(1)); - this._shaderBlur.shader.setModules(["MODULE_VERTEX_POSITION", "MODULE_COLOR", "MODULE_BEGIN_FRAG"]); - this._shaderBlur.shader.setSource(vShader, fShader); + this._shaderBlur.shader = new CGL.Shader(this._cgl, "blurPass" + this.type.charAt(0).toUpperCase() + this.type.slice(1)); + this._shaderBlur.shader.setModules(["MODULE_VERTEX_POSITION", "MODULE_COLOR", "MODULE_BEGIN_FRAG"]); + this._shaderBlur.shader.setSource(vShader, fShader); - this._shaderBlur.uniforms.XY = new CGL.Uniform(this._shaderBlur.shader, "2f", "inXY", vec2.create()); - this._shaderBlur.shader.offScreenPass = true; - this.state.isUpdating = false; -}; + this._shaderBlur.uniforms.XY = new CGL.Uniform(this._shaderBlur.shader, "2f", "inXY", vec2.create()); + this._shaderBlur.shader.offScreenPass = true; + this.state.isUpdating = false; + } -Light.prototype.renderPasses = function (polygonOffset, blurAmount, renderFunction) -{ - if (this.state.isUpdating) return; - if (this._cgl.tempData.shadowPass) return; + renderPasses(polygonOffset, blurAmount, renderFunction) + { + if (this.state.isUpdating) return; + if (this._cgl.tempData.shadowPass) return; - this._cgl.pushCullFace(true); - this._cgl.pushCullFaceFacing(this._cgl.gl.FRONT); - this._cgl.gl.enable(this._cgl.gl.POLYGON_OFFSET_FILL); - this._cgl.gl.polygonOffset(polygonOffset, polygonOffset); + this._cgl.pushCullFace(true); + this._cgl.pushCullFaceFacing(this._cgl.gl.FRONT); + this._cgl.gl.enable(this._cgl.gl.POLYGON_OFFSET_FILL); + this._cgl.gl.polygonOffset(polygonOffset, polygonOffset); - this._cgl.tempData.renderOffscreen = true; - this._cgl.tempData.shadowPass = true; + this._cgl.tempData.renderOffscreen = true; + this._cgl.tempData.shadowPass = true; - this._cgl.pushBlend(false); - this._cgl.gl.colorMask(true, true, this.type === "point", this.type === "point"); // * for now just 2 channels, with MSM we need 4 + this._cgl.pushBlend(false); + this._cgl.gl.colorMask(true, true, this.type === "point", this.type === "point"); // * for now just 2 channels, with MSM we need 4 - this.renderShadowPass(renderFunction); + this.renderShadowPass(renderFunction); - this._cgl.gl.cullFace(this._cgl.gl.BACK); - this._cgl.gl.disable(this._cgl.gl.CULL_FACE); - this._cgl.gl.disable(this._cgl.gl.POLYGON_OFFSET_FILL); + this._cgl.gl.cullFace(this._cgl.gl.BACK); + this._cgl.gl.disable(this._cgl.gl.CULL_FACE); + this._cgl.gl.disable(this._cgl.gl.POLYGON_OFFSET_FILL); - if (this.type !== "point") this.renderBlurPass(blurAmount); + if (this.type !== "point") this.renderBlurPass(blurAmount); - this._cgl.gl.colorMask(true, true, true, true); + this._cgl.gl.colorMask(true, true, true, true); - this._cgl.popBlend(); - this._cgl.popCullFaceFacing(); - this._cgl.popCullFace(); + this._cgl.popBlend(); + this._cgl.popCullFaceFacing(); + this._cgl.popCullFace(); - this._cgl.tempData.shadowPass = false; - this._cgl.tempData.renderOffscreen = false; + this._cgl.tempData.shadowPass = false; + this._cgl.tempData.renderOffscreen = false; - if (this.type !== "point") - { - this.shadowMap = this._framebuffer.getTextureColor(); - this.shadowMapDepth = this._framebuffer.getTextureDepth(); - } - else - { - this.shadowMap = null; - this.shadowMapDepth = null; + if (this.type !== "point") + { + this.shadowMap = this._framebuffer.getTextureColor(); + this.shadowMapDepth = this._framebuffer.getTextureDepth(); + } + else + { + this.shadowMap = null; + this.shadowMapDepth = null; + } } -}; -Light.prototype.renderShadowPass = function (renderFunction) -{ - if (this.state.isUpdating) return; - if (this.type === "point") + renderShadowPass(renderFunction) { - this._shaderShadowMap.uniforms.nearFar.setValue(this.nearFar); - this._shaderShadowMap.uniforms.lightPosition.setValue(this.position); - - this._cubemap.setCamPos(this.position); - this._cubemap.setMatrices(this._shaderShadowMap.matrices.modelMatrix, this._shaderShadowMap.matrices.viewMatrix, this._shaderShadowMap.matrices.projMatrix); - - this._cgl.pushShader(this._shaderShadowMap.shader); + if (this.state.isUpdating) return; + if (this.type === "point") + { + this._shaderShadowMap.uniforms.nearFar.setValue(this.nearFar); + this._shaderShadowMap.uniforms.lightPosition.setValue(this.position); - // this._cubemap.renderCubemap(renderFunction); + this._cubemap.setCamPos(this.position); + this._cubemap.setMatrices(this._shaderShadowMap.matrices.modelMatrix, this._shaderShadowMap.matrices.viewMatrix, this._shaderShadowMap.matrices.projMatrix); - this._cubemap.renderStart(); + this._cgl.pushShader(this._shaderShadowMap.shader); - for (let i = 0; i < 6; i += 1) - { - this._cubemap.renderStartCubemapFace(i); - if (renderFunction) renderFunction(); - this._cubemap.renderEndCubemapFace(); - } + // this._cubemap.renderCubemap(renderFunction); - this._cubemap.renderEnd(); + this._cubemap.renderStart(); + for (let i = 0; i < 6; i += 1) + { + this._cubemap.renderStartCubemapFace(i); + if (renderFunction) renderFunction(); + this._cubemap.renderEndCubemapFace(); + } - this._cgl.popShader(); - this.shadowCubeMap = this._cubemap.getTextureColor(); // getCubemap(); - return; - } + this._cubemap.renderEnd(); - this._cgl.pushShader(this._shaderShadowMap.shader); + this._cgl.popShader(); + this.shadowCubeMap = this._cubemap.getTextureColor(); // getCubemap(); + return; + } - this._cgl.pushModelMatrix(); - this._cgl.pushViewMatrix(); - this._cgl.pushPMatrix(); + this._cgl.pushShader(this._shaderShadowMap.shader); - this._framebuffer.renderStart(this._cgl); + this._cgl.pushModelMatrix(); + this._cgl.pushViewMatrix(); + this._cgl.pushPMatrix(); - // * create MVP matrices - mat4.copy(this._cgl.mMatrix, this._shaderShadowMap.matrices.modelMatrix); + this._framebuffer.renderStart(this._cgl); - vec3.set(this._shaderShadowMap.vectors.camPos, this.position[0], this.position[1], this.position[2]); + // * create MVP matrices + mat4.copy(this._cgl.mMatrix, this._shaderShadowMap.matrices.modelMatrix); - if (this.type === "spot") vec3.set(this._shaderShadowMap.vectors.lookAt, this.conePointAt[0], this.conePointAt[1], this.conePointAt[2]); + vec3.set(this._shaderShadowMap.vectors.camPos, this.position[0], this.position[1], this.position[2]); - mat4.lookAt(this._cgl.vMatrix, this._shaderShadowMap.vectors.camPos, this._shaderShadowMap.vectors.lookAt, this._shaderShadowMap.vectors.up); + if (this.type === "spot") vec3.set(this._shaderShadowMap.vectors.lookAt, this.conePointAt[0], this.conePointAt[1], this.conePointAt[2]); - mat4.copy(this._cgl.pMatrix, this._shaderShadowMap.matrices.projMatrix); + mat4.lookAt(this._cgl.vMatrix, this._shaderShadowMap.vectors.camPos, this._shaderShadowMap.vectors.lookAt, this._shaderShadowMap.vectors.up); - if (!this.lightMatrix) this.lightMatrix = mat4.create(); + mat4.copy(this._cgl.pMatrix, this._shaderShadowMap.matrices.projMatrix); - // * create light mvp bias matrix - mat4.mul(this.lightMatrix, this._cgl.pMatrix, this._cgl.vMatrix); - mat4.mul(this.lightMatrix, this._cgl.mMatrix, this.lightMatrix); - mat4.mul(this.lightMatrix, this._shaderShadowMap.matrices.biasMatrix, this.lightMatrix); + if (!this.lightMatrix) this.lightMatrix = mat4.create(); - this._cgl.gl.clearColor(1, 1, 1, 1); - this._cgl.gl.clear(this._cgl.gl.DEPTH_BUFFER_BIT | this._cgl.gl.COLOR_BUFFER_BIT); + // * create light mvp bias matrix + mat4.mul(this.lightMatrix, this._cgl.pMatrix, this._cgl.vMatrix); + mat4.mul(this.lightMatrix, this._cgl.mMatrix, this.lightMatrix); + mat4.mul(this.lightMatrix, this._shaderShadowMap.matrices.biasMatrix, this.lightMatrix); - if (renderFunction) renderFunction(); // * e.g. op.trigger(); - this._framebuffer.renderEnd(this._cgl); - this._cgl.popPMatrix(); - this._cgl.popModelMatrix(); - this._cgl.popViewMatrix(); + this._cgl.gl.clearColor(1, 1, 1, 1); + this._cgl.gl.clear(this._cgl.gl.DEPTH_BUFFER_BIT | this._cgl.gl.COLOR_BUFFER_BIT); - this._cgl.popShader(); -}; + if (renderFunction) renderFunction(); // * e.g. op.trigger(); + this._framebuffer.renderEnd(this._cgl); + this._cgl.popPMatrix(); + this._cgl.popModelMatrix(); + this._cgl.popViewMatrix(); -Light.prototype.renderBlurPass = function (blurAmount) -{ - if (this.state.isUpdating) return; - this._cgl.pushShader(this._shaderBlur.shader); + this._cgl.popShader(); + } - this._effectBlur.setSourceTexture(this._framebuffer.getTextureColor()); // take shadow map as source - this._effectBlur.startEffect(); + renderBlurPass(blurAmount) + { + if (this.state.isUpdating) return; + this._cgl.pushShader(this._shaderBlur.shader); - this._effectBlur.bind(); + this._effectBlur.setSourceTexture(this._framebuffer.getTextureColor()); // take shadow map as source + this._effectBlur.startEffect(); - this._cgl.setTexture(0, this._effectBlur.getCurrentSourceTexture().tex); - this._shaderBlur.uniforms.XY.setValue([blurAmount, 0]); - this._effectBlur.finish(); + this._effectBlur.bind(); - this._effectBlur.bind(); - this._cgl.setTexture(0, this._effectBlur.getCurrentSourceTexture().tex); - this._shaderBlur.uniforms.XY.setValue([0, blurAmount]); + this._cgl.setTexture(0, this._effectBlur.getCurrentSourceTexture().tex); + this._shaderBlur.uniforms.XY.setValue([blurAmount, 0]); + this._effectBlur.finish(); - this._effectBlur.finish(); + this._effectBlur.bind(); + this._cgl.setTexture(0, this._effectBlur.getCurrentSourceTexture().tex); + this._shaderBlur.uniforms.XY.setValue([0, blurAmount]); - this._effectBlur.endEffect(); + this._effectBlur.finish(); - this._cgl.popShader(); -}; + this._effectBlur.endEffect(); + this._cgl.popShader(); + } +} Light.prototype.getShadowPassVertexShader = getShadowPassVertexShader; Light.prototype.getShadowPassFragmentShader = getShadowPassFragmentShader; Light.prototype.getBlurPassVertexShader = getBlurPassVertexShader; diff --git a/src/ops/base/Ops.Trigger.TriggerOnChangeString_v2/Ops.Trigger.TriggerOnChangeString_v2.js b/src/ops/base/Ops.Trigger.TriggerOnChangeString_v2/Ops.Trigger.TriggerOnChangeString_v2.js index e6f8ead81..d626d6632 100644 --- a/src/ops/base/Ops.Trigger.TriggerOnChangeString_v2/Ops.Trigger.TriggerOnChangeString_v2.js +++ b/src/ops/base/Ops.Trigger.TriggerOnChangeString_v2/Ops.Trigger.TriggerOnChangeString_v2.js @@ -10,6 +10,7 @@ inval.onChange = function () outStr.set(inval.get()); next.trigger(); }; + op.init = () => { if (inval.get() != "")next.trigger();