• FuzzyWuzzie


    I'm a dummy and forgot that drawing a rect and drawing an image are two different things and will need two different pipelines with their own shaders.

    Unless there's any objections I'll leave this here in case anyone finds the contents useful.


    I'm currently setting a custom pipeline for a Graphics2 instance (on HTML5) so that I can mask a filled rectangle (to draw some health bars with rounded corners without resorting to 9-slice images).

    I copied the default g2 image shaders:

    #version 450
    in vec3 vertexPosition;
    in vec2 texPosition;
    in vec4 vertexColor;
    uniform mat4 projectionMatrix;
    out vec2 texCoord;
    out vec4 color;
    void main() {
        gl_Position = projectionMatrix * vec4(vertexPosition, 1.0);
        texCoord = texPosition;
        color = vertexColor;

    (modifying the fragment shader to apply the mask):

    #version 450
    uniform sampler2D tex;
    uniform sampler2D texMask;
    uniform vec2 maskResolution;
    in vec2 texCoord;
    in vec4 color;
    out vec4 FragColor;
    void main() {
        vec4 texcolor = texture(tex, texCoord) * color;
        texcolor.rgb *= color.a;
        vec2 maskCoord = gl_FragCoord.xy / maskResolution;
        maskCoord.y = 1.0 - maskCoord.y;
        vec4 mask = texture(texMask, maskCoord);
        if(mask.r < 0.5) {
        FragColor = texcolor;

    I created a custom pipeline as follows:

    var structure = new VertexStructure();
    structure.add("vertexPosition", VertexData.Float3);
    structure.add("texPosition", VertexData.Float2);
    structure.add("vertexColor", VertexData.Float4);
    maskPipeline = new PipelineState();
    maskPipeline.fragmentShader = Shaders.mask_frag;
    maskPipeline.vertexShader = Shaders.mask_vert;
    maskPipeline.inputLayout = [structure];
    maskPipeline.blendSource = BlendingFactor.BlendOne;
    maskPipeline.blendDestination = BlendingFactor.InverseSourceAlpha;
    maskPipeline.alphaBlendSource = BlendingFactor.BlendOne;
    maskPipeline.alphaBlendDestination = BlendingFactor.InverseSourceAlpha;
    maskLocation = maskPipeline.getTextureUnit("texMask");
    maskResolutionLocation = maskPipeline.getConstantLocation("maskResolution");

    Then try to draw as so:

    g = // ... Graphics2
    g.pipeline = maskPipeline;
    // I added the `get_g4()` function to `Graphics2` to get access to the underlying Graphics4 in order to do these calls
    g.get_g4().setTexture(maskLocation, mask);
    g.get_g4().setFloat2(maskResolutionLocation, mask.width, mask.height);
    g.color =;

    When I do this, the mask works perfectly. Also, any images I draw are masked and drawn in proper colour. However, whenever I try to fill a rect with a given colour (g.color =; g.fillRect(/*...*/);), it is drawn in pure black—i.e. that implies that the vertexColor attribute in the vertex shader either isn't being set or is being set to black. I've dug through the Graphics2 implementation and figure out why this would be happening. The same behaviour is seen if I completely rip out any of the masking and just straight copy the shaders and set the pipeline as above.

    Any ideas?


    posted in Kode read more
  • FuzzyWuzzie

    ok, thanks!

    What's involved with "wiring it up in Kha"? I've just tried to compile empty applications build with:

    node kha/make -g vulkan
    node kha/make -g metal
    node kha/make -g direct3d12

    And all failed to compile (metal on XCode, vulkan and direct3d12 on visual studio 2017).

    For direct3d12 (on windows target), I get:

    Cannot open include file: 'd3dx12.h': No such file or directory
    Cannot open include file: 'WinError.h`: No such file or directory

    For vulkan, I get a runtime exception on line 361 of PipelineState5Impl.cpp:

    Exception thrown at 0x000000005337A203 (nvoglv64.dll) in g5.exe: 0xC0000005: Access violation reading location 0x000001D0DA6C48C0.

    For metal, I get:

    'Kore/ConstantBuffer5impl.h' file not found

    It seems like the vulkan and metal errors fall into the "Metal and Vulkan need some updates", but do the direct3d12 errors fall under the "wiring it up in kha"?

    Is there any way I can help sort it out?


    posted in Kode read more
  • FuzzyWuzzie

    What's the state of the graphics5 api today? Is it fully functional across all platforms?

    I can't seem to find any information about it, including any code showing the steps required to get something on screen. If there aren't any tutorials available, I'd love to start working on one but I don't even know where to begin myself 😛

    posted in Kode read more
  • FuzzyWuzzie

    Hey, I just finished a game I made with kha for the xoxo game jam (you can check it out here:
    There were a few pain points but overall I think using Kha in an actual project went quite well!

    posted in Kode read more
  • FuzzyWuzzie

    I'm trying to get some g4 stuff working on iOS, however all the textures are black. When I loaded png textures in a g2 context in a previous demo, the textures loaded fine; but now in g4 they're all black. I've tested with my sample ( as well as Lubos Lenco's examples.

    Any idea what's wrong?


    posted in Kode read more
  • FuzzyWuzzie

    @FuzzyWuzzie turns out I just had a massive brain fart earlier. I should have been using the Less compare function, and clearing the depth buffer to 1 (I was using GreaterEqual and clearing to 0). Sorry to bother you!

    posted in Kode read more
  • FuzzyWuzzie

    I'm trying to test my glTF library ( for loading glTF models. Basically, right now, I just want to load the mesh data and display it. And what I have right now kind-of works: (source code is at:

    If you can't run the demo, here's a screenshot:

    ducky with depth issues?

    As far as I can tell, the glTF data is being loaded correctly (I've manually checked things on smaller triangle and quad models), but it clearly isn't rendering correctly; and it seems like a depth issue (the colours are coming from the mesh normal).

    I think I'm doing something wrong in Kha, but I can't seem to figure out what exactly, other than that it seems like a depth issue. The pipeline looks like it should be writing to the depth buffer and comparing against it:

    pipeline = new PipelineState();
    pipeline.inputLayout = [structure];
    pipeline.fragmentShader = Shaders.simple_frag;
    pipeline.vertexShader = Shaders.simple_vert;
    pipeline.cullMode = CullMode.Clockwise;
    pipeline.depthMode = CompareMode.GreaterEqual;
    pipeline.depthWrite = true;

    And my render function clears the depth buffer:

    var g = frame.g4;
    g.clear(Color.fromFloats(0.33, 0.33, 0.33), 0);
    g.setMatrix(mvpID, mvp);
    g.setMatrix(mID, model);

    But it seems like perhaps the depth buffer isn't being used? Or is there something else wrong with the model data? I could really use another pair of eyes on this if you're available.

    Thanks so much!

    posted in Kode read more
  • FuzzyWuzzie

    @Robert Not that I'm aware of; I didn't stick around with KodeStudio long enough to find anything when I realized I couldn't use extensions.

    posted in Kode read more
  • FuzzyWuzzie

    I prefer to do all my development in Visual Studio Code these days. I know KodeStudio is a fork of Code, but it disables a bunch of things I'd rather it not. Thankfully, I just discovered how to easily debug my projects within Visual Studio Code (I used to just debug in the browser), and figured I'd share in case anyone here is in the same boat.

    Here's how I got things working:

    1. Install the Debugger for Chrome extension
    2. In your project root, create (or edit) the two files: .vscode/launch.json and .vscode/tasks.json according to this gist:
    3. Make sure to enable debug (sourcemaps) in your khafile.js: project.addParameter('-debug');
    4. Click the debug tab, select the 'Kha/HTML5' configuration, and launch!

    You can set breakpoints, inspect variables, etc.

    Hope that helps!

    posted in Kode read more