Flake

Members
  • Content Count

    23
  • Joined

  • Last visited


Reputation Activity

  1. Like
    Flake got a reaction from NoxBrutalis in Pausing and Resuming main loop unintuitive   
    tl;dr Pause,  sleep, resume and wake make for a confusing api initially. Also a master pause (logic and audio) would be handy ( I might have missed this though.)
    After a longish break of game dev I wanted to take a look at Phaser 3. Loving it so far, (Phaser has come such a long way) but I find the pausing/resuming the entire game(logic, animation, sounds) a little confusing. I'm making a master Pause/Play switch. After game.loop.pause() didn't have the desired effect I've switched to game.loop.sleep and awake(). But I'm unsure if this is the intended use for them.
    Looking forward to the release of this bad boy, continue doing awesome work. Cheers

  2. Like
    Flake got a reaction from qdrj in Pausing and Resuming main loop unintuitive   
    tl;dr Pause,  sleep, resume and wake make for a confusing api initially. Also a master pause (logic and audio) would be handy ( I might have missed this though.)
    After a longish break of game dev I wanted to take a look at Phaser 3. Loving it so far, (Phaser has come such a long way) but I find the pausing/resuming the entire game(logic, animation, sounds) a little confusing. I'm making a master Pause/Play switch. After game.loop.pause() didn't have the desired effect I've switched to game.loop.sleep and awake(). But I'm unsure if this is the intended use for them.
    Looking forward to the release of this bad boy, continue doing awesome work. Cheers

  3. Like
    Flake reacted to Sebavan in [Resolved] Seperate UVs for diffuse and opacity textures   
    You can use opacityTexture.coordinatesIndex = 1 to make it use the second set of uvs.
  4. Like
    Flake got a reaction from Deltakosh in Binding a ColorCurve to a Material/Shader   
    Thanks @Sebavan  & @Deltakosh , I'll think I'll use the official version and put my Frankenstein material to rest.
  5. Like
    Flake got a reaction from Sebavan in Binding a ColorCurve to a Material/Shader   
    Thanks @Sebavan  & @Deltakosh , I'll think I'll use the official version and put my Frankenstein material to rest.
  6. Like
    Flake got a reaction from Deltakosh in Globally adjusting Hue/Saturation   
    The cool but also slightly intimidating thing about programming is, that there are so many different approaches one can take to get to the goal.
    Thanks again Nabroski for the different starting points! In the end I created a shader that mimics Photoshop's Hue, Contrast, Brightness and Saturation settings. It works just the way I wanted.
    Most of the code was ported from Andrey Postelzhuk's Unity shader.
    // create the material with default/neutral values // this is then applied to you mesh var material = new BABYLON.ShaderMaterial("colorMatchMat", scene, "./assets/shaders/colorMatch", { attributes: ["position", "uv"], uniforms: ["worldViewProjection", "hue"] }); material.setTexture("textureSampler", new BABYLON.Texture("./assets/app/face.jpg", scene)); material.setFloat("hue", 0.0); material.setFloat("contrast", 0.5); material.setFloat("brightness", 0.5); material.setFloat("saturation", 1.0); // Vertex Shader (nothing happens here) precision highp float; attribute vec3 position; attribute vec2 uv; uniform mat4 worldViewProjection; varying vec2 vUV; void main(void) { gl_Position = worldViewProjection * vec4(position, 1.0); vUV = uv; } precision highp float; varying vec2 vUV; uniform sampler2D textureSampler; uniform float hue; uniform float contrast; uniform float brightness; uniform float saturation; vec3 applyHue(vec3 aColor, float aHue) { float angle = radians(aHue); float cosAngle = cos(angle); vec3 k = vec3(0.57735, 0.57735, 0.57735); return aColor * cosAngle + cross(k, aColor) * sin(angle) + k * dot(k, aColor) * (1.0 - cosAngle); } vec3 saturationLerp(float from, vec3 col, float t) { float r = (from + t * (col[0] - from)); float g = (from + t * (col[1] - from)); float b = (from + t * (col[2] - from)); return vec3(r, g, b); } vec4 applyHSBEffect(vec3 startColor) { float _Hue = hue * 360.0; float _Contrast = contrast * 2.0; float _Brightness = brightness * 2.0 - 1.0; float _Saturation = saturation; vec4 outputColor = vec4(startColor, 1.0); outputColor.rgb = applyHue(outputColor.rgb, _Hue); outputColor.rgb = (outputColor.rgb - 0.5) * (_Contrast) + 0.5; outputColor.rgb = outputColor.rgb + _Brightness; float intensity = dot(outputColor.rgb, vec3(0.299, 0.587, 0.114) ); outputColor.rgb = saturationLerp(intensity, outputColor.rgb, _Saturation); return outputColor; } void main(void) { vec3 textureColor = texture2D(textureSampler, vUV).rgb; gl_FragColor = applyHSBEffect(textureColor); }  
  7. Like
    Flake got a reaction from Nabroski in Globally adjusting Hue/Saturation   
    The cool but also slightly intimidating thing about programming is, that there are so many different approaches one can take to get to the goal.
    Thanks again Nabroski for the different starting points! In the end I created a shader that mimics Photoshop's Hue, Contrast, Brightness and Saturation settings. It works just the way I wanted.
    Most of the code was ported from Andrey Postelzhuk's Unity shader.
    // create the material with default/neutral values // this is then applied to you mesh var material = new BABYLON.ShaderMaterial("colorMatchMat", scene, "./assets/shaders/colorMatch", { attributes: ["position", "uv"], uniforms: ["worldViewProjection", "hue"] }); material.setTexture("textureSampler", new BABYLON.Texture("./assets/app/face.jpg", scene)); material.setFloat("hue", 0.0); material.setFloat("contrast", 0.5); material.setFloat("brightness", 0.5); material.setFloat("saturation", 1.0); // Vertex Shader (nothing happens here) precision highp float; attribute vec3 position; attribute vec2 uv; uniform mat4 worldViewProjection; varying vec2 vUV; void main(void) { gl_Position = worldViewProjection * vec4(position, 1.0); vUV = uv; } precision highp float; varying vec2 vUV; uniform sampler2D textureSampler; uniform float hue; uniform float contrast; uniform float brightness; uniform float saturation; vec3 applyHue(vec3 aColor, float aHue) { float angle = radians(aHue); float cosAngle = cos(angle); vec3 k = vec3(0.57735, 0.57735, 0.57735); return aColor * cosAngle + cross(k, aColor) * sin(angle) + k * dot(k, aColor) * (1.0 - cosAngle); } vec3 saturationLerp(float from, vec3 col, float t) { float r = (from + t * (col[0] - from)); float g = (from + t * (col[1] - from)); float b = (from + t * (col[2] - from)); return vec3(r, g, b); } vec4 applyHSBEffect(vec3 startColor) { float _Hue = hue * 360.0; float _Contrast = contrast * 2.0; float _Brightness = brightness * 2.0 - 1.0; float _Saturation = saturation; vec4 outputColor = vec4(startColor, 1.0); outputColor.rgb = applyHue(outputColor.rgb, _Hue); outputColor.rgb = (outputColor.rgb - 0.5) * (_Contrast) + 0.5; outputColor.rgb = outputColor.rgb + _Brightness; float intensity = dot(outputColor.rgb, vec3(0.299, 0.587, 0.114) ); outputColor.rgb = saturationLerp(intensity, outputColor.rgb, _Saturation); return outputColor; } void main(void) { vec3 textureColor = texture2D(textureSampler, vUV).rgb; gl_FragColor = applyHSBEffect(textureColor); }  
  8. Like
    Flake reacted to Nabroski in Globally adjusting Hue/Saturation   
    Hello
    i think what you are asking for is here
    https://doc.babylonjs.com/tutorials/How_to_use_PostProcesses

    or add some colors via lights
    https://doc.babylonjs.com/tutorials/Lights

    simpel and effective

    also:
    https://doc.babylonjs.com/extensions/Sky

    give this a try
    http://doc.babylonjs.com/overviews/Physically_Based_Rendering_Master#camera-controls-color-grading-and-color-curves
    if you not sure how to code something look up here
    http://doc.babylonjs.com/playground
    Good Luck