Flake

Members
  • Content Count

    23
  • Joined

  • Last visited

About Flake

  • Rank
    Member

Profile Information

  • Location
    Melbourne, Oz

Recent Profile Visitors

642 profile views
  1. 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. Sweet! Once again Babylon makes it look easy. Thanks @Sebavan
  3. Hi friends, I searched for a while, but because of the fairly common search terms I might have missed the info I'm looking for in which case I apologies. I want to use seperate/different UVs for diffuse and opacity textures in the StandardMaterial. Is this a thing that is possible, or would I have to modify the source? As always, thanks for using you're precious time to help a pleb like me. let mesh = new BABYLON.Mesh("face", scene); let vertexData = new BABYLON.VertexData(); mesh.material = mat; //set positions, indices, normals vertexData.uvs = normalTextureUVs; vertexData.uvs2 = alphaTexUVs; vertexData.applyToMesh(mesh, 1); let mat = new BABYLON.StandardMaterial('blup', scene); mat.diffuseTexture = new BABYLON.Texture('./thing.png', scene); mat.opacityTexture = new BABYLON.Texture('./alpha.png', scene); mat.uv = vertexData.uvs2; // <<<< This is what I'm looking for :)
  4. Thanks @Sebavan & @Deltakosh , I'll think I'll use the official version and put my Frankenstein material to rest.
  5. It worked ^^ I'm not particularly proud of, nor do I fully understand it.. By I copied the relevant ColourCurve code lines out of PBRMaterial and spliced them into the ShaderMaterial. The result is functional, but not elegant. I'll add the .js file. Maybe It's a useful starting point for someone or it can be used of an example of how NOT to do it Thanks again Sebavan ShaderMatWithCC.js
  6. Thank you for you're detailed explanation Sebavan hehe.. I have no 'material code'. I'm using a vanilla BABYLON.ShaderMaterial. I guess I'll try grab the class off github and add a colour curve into it..
  7. Me again.. still messing around with colour correction. Is it possible to bind a Colour Curve to a non-PBM Material? When I attempt the following I get errors: let mat = new BABYLON.ShaderMaterial("mat", scene, "./assets/shaders/blub", { attributes: ["position", "uv"], uniforms: ["worldViewProjection", "globalScale", "globalOffset", "vCameraColorCurvePositive", "vCameraColorCurveNeutral", "vCameraColorCurveNegative"], needAlphaBlending: true }); var curve = new BABYLON.ColorCurves(); curve.GlobalHue = 200; curve.GlobalDensity = 100; BABYLON.ColorCurves.Bind(curve, mat._effect); // throws Uncaught TypeError: Cannot read property 'setFloat4' of undefined
  8. Flake

    Chaining or Merging Shaders

    Thanks for the reply guys. Not a direct mix; rather I want to run shaderA and feed the output into shaderB, and render the result of that. I have to take a closer look at your code, but the helperMaterial" looks promising! I'll post an update, once I've gone through the code.. Also the sphere in the third example looks amazing! Edit 1: I could not get the BABYLONX.ShaderBuilder to behave how I wanted. // avrage m1 and m2 .InLine('result = vec4( m2.xyz*0.5 +m1.xyz*0.5 ,0.0);') // when the alpha was zero, the entire mesh was talk transparent and ghostlike .InLine('result = vec4( m2.xyz*0.5 +m1.xyz*0.5 ,q.0);') // and when the alpha was one, the mesh was fine, but the entire scene was completely back (the alpha component of the clear colour was ignored) Any help is still appreciated, i'll get back to trying around
  9. Shaders are still new to me, so this might be a silly question: Is it possible to chain, or merge shaders? I've got a PBRMaterial which uses the ColorCurves, and a custom shader that generates a texture. I'd love to be able to be able to combine or chain them, so I can have both effects. My initial thought was: 'grab the PBRMaterial and Shader from github, and hack in the properties/functions from my custom shader'. But those files have ~2000 lines of code in them, so if anyone knows an easier approach I'd be grateful. Pseudo code, because one can never be too clear What I've got: ... var mesh = new Mesh(); var materialA = new BABYLON.PBRMaterial("pbrMat", scene); var curve = new BABYLON.ColorCurves(); curve.GlobalHue = 250; materialA.cameraColorCurves = curve; var materialB = new BABYLON.ShaderMaterial("otherMat", scene, "./assets/shaders/otherMat", { attributes: ["position", "uv"], uniforms: ["worldViewProjection", "attribute"] }); materialB.setFloat("attribute", someVar); mesh.material = materialA; // or materialB.. but not both ... What I'd want: var mesh = new Mesh(); var materialA = new BABYLON.PBRMaterial("pbrMat", scene); var materialB = new BABYLON.ShaderMaterial("otherMath", scene, "./assets/shaders/specialMat"); mesh.material.Add([materialA, materialB]); // or mesh.material = materialA.chain(materialB); Thanks for your time!
  10. Flake

    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); }
  11. Flake

    Globally adjusting Hue/Saturation

    Heya Nabroski, thanks for the multifaceted response! Unfortunalty lights don't give me the amount of controll I need ( I don't think I can unsaturate mesh with a light) and color curves only apear to work with PBRMaterials I'll look into the Post Processing and post the any results.
  12. Hey everyone, I'm trying to 'color-correct' my scene, and want to adjust the global Hue and Saturation. I came across ColorCurves, but am not sure how to use them. Does this mean I can apply them to the scene, or is this the wrong tool for what I'm trying to accomplish?
  13. Flake

    Drawing Images onto a PIXI.Graphics obj

    Feared as much. And yup, it changes basically every frame. I guess I'll stick to the native vanilla canvas for this project. Thanks again @pongstylin @xerver!
  14. Flake

    Drawing Images onto a PIXI.Graphics obj

    Hi @pongstylin, thx for the reply. Your way works if you want to draw over(or under) the sprite. I'm trying to mix my render order like this. function render (){ graphics.clear(); draw poly draw rect draw image dra line draw rect draw image *about 300 more...}The list chnages dynamically in length, and the positions shift too. That's why I'd like to render the spirte/texture to canvas, instead of adding it as a child.
  15. Hey guys! I've got one main question, with a few follow ups.. here goes I was wondering if there was a way draw an image onto the PIXI.Graphics (object thingy)? I'm aware I can add sprites to the stage and other containers. But I'm currently drawing polygons, and images (with a dynamic render order), So this seems like a good way to do that. Is there a way of doing this, similar to the plain/vanilla canvas way: var canvas = Dom.get('canvas');var context = canvas.getContext('2d');context.drawImage(source, x, y, w, h, ...); I've tried: var context = pixiRenderer.context;.. but this only returns the following: CanvasRenderingContext2D {} And now for the follow ups: Is the context (2d), unique to the Canvas? Would drawing imaged to the graphics object limit me to the CanvasRenderer, or could I still use PIXI.autoDetectRenderer and PIXI.WebGLRenderer ? Thanks in advance!