Shade to Codea

I may have posted about this before, or on some variation of the theme…

The recent update to Shade is amazing. That is not an exaggeration. Congrats @Simeon and @John for what you’ve produced.

I am not immersed in shaders, game dev, etc., though I am slowly coding my way up that mountain.

I would love to see gold standard examples of full game development in Codea that heavily leverages shaders developed in Shade. In isolation, the shader examples there are excellent. I am excited to dig in and learn to do what @John has been doing there. But there, the shaders are always just applied to stock geometry objects. I would love to see someone take that and apply it in a game environment, to actual game assets.

Obviously what I am asking for is exactly what is all over well-developed games. But I’d like to see it in Codea. Even taken all the way to the app store. Cargo-Bot is the gen-1 example of this. Now there’s a gap to fill - gen 2, so to speak: a game showcasing shaders developed in Shade. (I should also mention Craft - another excellent addition that deserves more attention)

I always come back to Codea. Its a very enjoyable coding environment. I just think that the potential of Codea + Shade is much more than has been leveraged by anyone yet. I’ll prob need to be part of the answer to my own question, but thought I’d put this out there.

Instead of flooding the main forum page with multiple posts, I’ll just post a related question here. I’ve posted a screenshot. The code on the left is from @dave1707 for some months ago, here in the forum. Instead of using Shade’s Checkers shader as Dave did, and does work, I switched it out for the Keyboard shader…and I just get a black cube. Is there something else I need to do? Are there certain Shade features that don’t carry over into Codea? Thanks!

@brianolive I also tried the Keyboard shader and got the same thing. It seems some shaders work with that code and some don’t. I didn’t look into what was wrong because I probably won’t use Shade for anything in Codea.

Thanks @dave1707. I appreciate your straight talk. Let’s see if any others have input on this issue. I’m looking a little deeper now. We’ll see if I can come up with anything.

Here’s one more (admittedly minor) issue: Trying to set an icon and it does not capture the cube material in the icon pic (see screenshot).

Okay, a theme is forming here: how can I guarantee equivalent behavior for shaders in Shade and in Codea? I thought the Hologram shader was looking okay in Codea, but then I just loaded it up in Shade and saw that it moves! It doesn’t do that in Codea. I’ll get real excited if I know that all the hard work that I may potentially put into learning Shade will pay off because I can take those shaders and use them, with equivalent results in Codea. I may not get excited if the shaders only show all their glory inside the lab of Shade. Please help (@John)! (screenshot is from Shade)

Got the “Fake Volume” shader to show in an icon pic. (Again, no shader movement/animation)

Just to end my evening rants and wishes on a positive note, happy that many of the example shaders, even the large ones like Forest Floor, do display nicely in Codea. That is motivating!

@brianolive - intriguing, tried the odd shader from Shade in Codea but without success so stuck to the environment I know - just Codea. If you get Shade shaders to work, and want others to follow your example - post some of your code. Once forum members try it I’m sure they will follow with more examples.

@brianolive Shade and Codea have the same renderer, so the shaders should work (though good catch on the screenshot icon bug)

What you might be seeing is different for each case:

1: The keyboard shader may require high resolution geometry to look good, and also the right UV coordinates

2: The hologram one uses “time” as an input to the shader, you can do the same in Codea by writing in the draw() function:

myMaterial.time = ElapsedTime

This means you can control the hologram effect with anything you can think of in Codea. Note in my code above the input to the shader from Shade may not be called time — you’ll need to open the shader in Shade and check, then you can reference those inputs in Codea

3: Same goes for the fake volume, you’ll need to set its time property

Note that Time nodes in Shade automatically expose a .time property on the resulting material. But you can make custom properties. Just create a number node in Shade, set its type to “property” then give it a name. You can then do myMaterial.myCustomPropertyName = value in Codea to set it.

So for a more complete example:

function setup()
    hologram = craft.material(asset.Hologram)

    -- Use hologram material on your craft models...


function draw()
    hologram.time = ElapsedTime   


Hey @brianolive . I’m working on a simplified example that will demonstrate how to use of the example shaders.

The animation is an issue that Simeon stated. I might as well make Codea automatically set the time property so that it works without any additional code. The white material in the icon is possibly related to transparency, although I’m not sure why for that material. The keyboard shader is as Simeon said, you need a very high res sphere for it and the default primitive sphere has different UVs which can look worse.

I’m also greatly simplifying how environment maps / image based lighting (IBL) works by making it just a few lines of code and having the properties set automatically on all materials.

@John, yeah the codea icosphere texturing needs to be fixed!

@Simeon and @John Thanks very much for the replies! Super glad to know that it should all work, given some time (literally!) and new knowledge on my end, and some tweaks and simplifications on your end. Motivation remains high, then. Cheers.

@John - I mentioned the icosphere in another thread, we covered the groundwork on that in an older thread. Also @Loopspace mentioned in a recent post that the icosphere is based on some of his code - should only be a small addition for the next version.

Thanks guys I’ll look into the issues with isosphere.

Here is the current progress on making Shade and Codea play nice:

There will be a new example project that is purely designed to preview Shade shaders with ease, including automatically populating the parameter panel with any shader properties (aside from textures since we don’t have an asset picker yet).

I made a simple helper method called parameter.material() which should come in handy.