Shade - Pro Shader Editing for iOS

John · March 2019

Shade is our latest app - a powerful node-based shader editor for iOS.

Shade is tightly integrated into both Codea and Unity. Any shaders you create can be directly used in Codea via drag and drop, sharing or iCloud.

We have been working closely with the Codea community throughout the development of Shade, including a private beta and subsequent public beta. Many of the improvements coming to Codea are from Shade's development. We would like to take this moment to thank everyone in the community for your support, suggestions and feedback.

Get Shade here: https://itunes.apple.com/app/id1402522815

More info at: https://shade.to

dave1707 · March 2019

Loaded the above version of Shade. So far so good.

dave1707 · March 2019

@John One thing I noticed with the above Shade code. Open one of the examples, then wait for the map in the lower left corner to disappear. Place your finger where the map was and move your finger. The map will reappear, but the highlighted square will move in the opposite direction that your finger is moving. If you lift your finger and put it back down, the highlighted square will then move in the same direction as your finger. No big deal, but just odd.

Simeon · March 2019

@dave1707 that's because when the map is not there you are dragging the canvas, and dragging the canvas makes the map re-appear, but you are not interacting with the minimap, it is still displaying how the canvas is moving. When you drag on the minimap directly it moves the canvas inversely because you are dragging the viewing region

distortum · March 2019

Shade’s marketing website is very slick. Looking forward to the same for Codea

Simeon · March 2019

@distortum thank you, I want to redo the Codea one now with the same sort of template

janalex · March 2019

I cant get the export of shaders to Codea working. When opening the exported shader in Codea it is just an empty file.

How can I get this to work? Anyone else having the same issue?

dave1707 · March 2019

@janalex Here’s how I do it.

From within the Files app, open the Shade folder.
Long press a shader. When the popup shows, select Copy.
Open the Codea folder.
Open the Dropbox Assets folder.
Long press a blank area. When the popup shows, press Paste.
Run Codea and the Shader should be in the Codea Dropbox folder.

Here’s an example to use. Replace Dropbox:Checkers with your shader.

function setup()
    -- uses a shader from Shade.
    scene = craft.scene()
    skyMaterial=scene.sky.material
    skyMaterial.sky=color(0, 62, 255, 255)
    skyMaterial.horizon=color(99, 255, 0, 255)
    v=scene.camera:add(OrbitViewer, vec3(0,0,0), 100, 0, 200)
    v.rx,v.ry=20,20
    createRect1()
end

function draw()
    update(DeltaTime)
    scene:draw()    
end

function update(dt)
    scene:update(dt)
end

function createRect1() 
    local c1=scene:entity()
    c1.position=vec3(0,0,0)
    c1.model = craft.model.cube(vec3(10,10,10))
    c1.material = craft.material("Dropbox:Checkers")    
end

brianolive · March 2019

To be sure, is the only difference between Standard and Pro pricing the ability to also export to Unity? Does the Standard version have everything for use with Codea?

John · March 2019

@brianolive I know I've answered this on twitter but for anyone else interested in this question: Shade Standard works fine with Codea but lacks both zip and Unity export. The zip option is useful for exporting to other devices but isn't necessary if you just want to use it with Codea.

Simeon · April 2019

@brianolive also it doesn't matter if you purchase Standard, you can always upgrade to Pro for the price difference later

brianolive · April 2019

Thanks @John and @Simeon - I purchased Standard the same day I asked the question. I’ll be getting to work in Shade soon - can’ pull myself away from projects in good ol’ Codea...

piinthesky · April 2019

@John, may i cheekly request that one of your future shade shaders examples could be an implementation of the @yojimbo2000 @LoopSpace disintegration shader (with gravity), as discussed here: https://codea.io/talk/discussion/6659/explosion-shader-code-video

I would love to have it available in Shade, if that is even possible.

Simeon · May 2019

@piinthesky John actually made something like this a while back

https://twitter.com/johntwolives/status/1085081157031452678

piinthesky · May 2019

@John, @Simeon is that shade graph available somewhere? Could it be generalised to 'explode' an arbitrary 3D model? (I want to explode my submarine if it crashes into a sphere).

dave1707 · May 2019

@Simeon I was playing with the latest Shade version and I ran into the below error on 2 different occasions when I selected Close Shader. I couldn't make it happen trying to retrace what I was doing each time. When I would press Try Again, it worked OK.

John · May 2019

@piinthesky This particular effect relies of special information baked into multiple uv channels (I used Houdini to do this).

The original explosion effect that you're referencing uses custom vertex buffers for storing each triangle origin and trajectory. Craft models don't support that but we could potentially bake in the origins in Codea when the model is loaded.

I'll see if I can come up with a working example soon.

piinthesky · May 2019

@John thanks for considering it

Bri_G · May 2019

@dave1707 - the demo you published in this thread, regarding loading a shader from Shade, doesn’t work on my system. Do you really load a shader as a craft.material ?

Also I have transferred the Ocean shader, which works fine on Shade into my Dropbox asset folder within the Codea folder and it is there but not visible in Documents accessed through Codea - and there is no sync on the top of the Documents folder window. How do you get the system to recognise the shader does it need renaming, unzipping?

piinthesky · May 2019

@Bri_G yes use craft.material(). i copied to the codea folder, so it is accessed via “documents:xxx”. No unzipping/renaming necessary. Try exiting codea and restarting, i think it didn’t show up first time for me.

dave1707 · May 2019

@Bri_G I loaded my demo and followed my directions and when I ran the demo, it drew a cube with the shader covering it. The shader didn't show in the Codea Dropbox folder until I exited Codea and came back in. Even though it didn't show at first, the demo still worked.

Bri_G · May 2019

@dave1707, @piinthesky - thanks guys it did work after restarting Codea. Funny though the icon used for the shader in Dropbox assets was the old text one rather than the usual shader image which was also used for other shaders. Odd.

In the other shader thread, for the Ocean shader they managed to animate it by using a line like

material.time =ElapsedTime

In the update(). Function. any ideas on that?

Bri_G · May 2019

@John - tried to run advanced examples Fractal Raymarch and Rain wouldn’t run on my pad. Updated Shade, still wouldn’t run, loaded 14 day trial, still wouldn’t run. Both came back with a screen error and blue text code in the reference window.

dave1707 · May 2019

@Bri_G I have no problems with those two shaders. I'm running an iPad Air with the latest iOS and Shade.

dave1707 · May 2019

@Bri_G Have you tried restoring the examples.

Bri_G · May 2019

@dave1707 - how do you restore in Shade? Delete then load from where?

dave1707 · May 2019

@Bri_G @John I’m getting the same error when I try to load Toon Fire. Toon Fire just shows a generic icon instead of an image icon for the shader like the others do.

dave1707 · May 2019

@Bri_G @John I deleted Toon Fire and restored the shaders. Toon Fire worked OK.

dave1707 · May 2019

@Bri_G Open Shade and tap the folder icon at the top right of the screen. There's an option to restore examples.

Bri_G · May 2019

@John, @dave1707 - tried the restore and no joy still came back with the error. Ran it several times and still no joy. Tried the delete option an crashed out of Shade. Also managed to crash Shade by running several shaders but haven’t been able to duplicate that.

Is this a feature of the 14 day Trial version?

John · May 2019

@Bri_G, no this is just a new node that is required by that particular example. This might indicate that the app bundle itself has not been correctly updated for some reason (i.e. corrupted). The node itself is actually defined in a file within the app. If for some reason that file is not up to date it won't be able to load any shader graphs that use it.

Do all of the other examples work as expected? Does the SD Octahedron appear within the library? How about Switch by Face, Blur or Texture Size?

If all else fails maybe try deleting the app (don't forgot to make copies of any shaders inside the app folder first), restarting your device and then reinstall from TestFlight.

Bri_G · May 2019

@John - all examples except the two mentioned above work fine. None of the library options you mentioned can be found by searching. Hope that helps.

Bri_G · May 2019

All - anyway I can see the shader generated in Shade? I downloaded the Ocean shader into the a project using the code from @dave1707 above and it ran OK, I could load the shader in , but - when I tried to view the shader code in text format I couldn’t use the shader editor in Codea, soI am struggling to get the shader in Codea to animate seems like you need to link the shader into the os timeline.

Bri_G · May 2019

@dave1707, (@John if your not busy) - just re-installed Shade and found that all the demos work. I did manage to crash out again after testing all the demos, I ran Rain again then tried to close the shader and it crashed to Pad top.

Also, this may just my misunderstanding (as I am a little behind with Shade - awsome updates) I went through the 14 day trial again and got to the editor screen - loaded up one of my recent play shades (very simple adding a texture directly to Diffuse on the sphere). Loads up great but seems to retain a colour that I had deleted so it's not the texture colour. It doesn't allow me to disconnect the texture, just scrolls around the screen, and every time I touch the texture node I get the Buy Shade prompt flashing up. Touching the Texture needs occasionally generates a yellow border with an eye symbol top right. Any new documentation - is it all in the Reference?

By the way - do you display Shade version number and status anywhere - like trial x days, V1.02(19) which may help in future. Top of the reference list would be a good place.

Simeon · May 2019

@Bri_G are you on the Shade beta (1.0.2) or release version? I think the features @John mentioned are in the beta but I'm not aware who is on it

John · May 2019

@Bri_G if you go Library -> Reference -> Build Notes it should have the latest version number near the top.

Bri_G · May 2019

@Simeon @John - thanks for the feedback, not sure what version I was on when I started catching up, but - I am now on 1.0.2 (19) and slowly going through the reference and forums.

Noted with interest that you can develop shaders on a browser with JavaScript. Looking into that as a possible way to get deeper into this technology - now very much on the surface.

piinthesky · May 2019

@John i notice an interesting 'feature' of the dissolve shader- even with material.time=0 the shader will animate if the 3d object is moving! Is this because you use the node position(world) rather than position(object)?

dave1707 · May 2019

@John I'm on the latest version of Shade and on 2 occasions when I was looking around in the reference, my iPad crashed. I would end up with the spinning indicator for about 7 seconds before the message Press Home Button to Start or something like that. After it happened the first time I tried to recreate it but couldn't. That was a few days ago. It just happened again today when I was in the reference again. I'm on a 16GB iPad Air with the latest iOS.

PS. Make that 3 times. I went back into the reference again to look around and my iPad crashed again. I get a black screen with the spinning indicator then the message Press Home to Open. I'll try to see if I can force it to happen.

PS. That didn't take long. I opened a shader, then the library. I selected Browse Reference then tapped on Build Notes. Crash.

PS. Tried it again and nothing happened. Tried tapping on Build Notes again and I couldn't get it to do anything. It's like it was ignoring what I was doing. Tried tapping on other things without it doing anything.

John · May 2019

@dave1707 Thanks for the feedback. I'll see if I can reproduce that.

@piinthesky That would be correct. If you switch to object space position it will remain consistent when moving around.

Bri_G · May 2019

@dave1707 - the crashes I experienced were just with the demos. I played with setting up my own shader so there may be issues there. The crash occured twice when I was closing a shader demo.

Did you see the flashing buy Shade button at the top?

Bri_G · May 2019

@John - something that may be a feature but had me confused. I had a texture node connected up with texture present. I tried opening the node to change texture but all I succeeded in doing was getting a yellow border round the node with a yellow eye at top right of node.

Later I found that a link to change the texture was in the library window.

Bri_G · May 2019

@John - just ran through your hologram tutorial on youtube - excellent. Couple of things I found difficult

sometimes you mentioned changing a property e.g. transparency but without knowing what feature you touched I didn't initially know where to find it - did get there in the end.
On the remap there are two numeric properties R1 and R2. Initially I touched R2 and didn't notice, obviously didn't get the right effect. On rezeroing R2 and setting R1 up properly I still didn't get the right effect (interference from R2 no doubt).Didn't know how to reset R2 so in the end had to delete remap and start again - is that the only way to reset properties of nodes?
Finally on the split node - the node has 4 outputs w,x,y and z which yours didn't r,g,b,a - is there any way of specifying this - I know that in this case it didn't really matter as they are interchaneable, but it can confuse in a tutorial.

Great work - any more in the pipeline?

Bri_G · May 2019

@John - back again, just tried to load the hologram code into the code provided by @dave1707. Ran into a couple of problems, the colours didn’t reflect those used in the shader - until I deleted the scene sky definitions. Also the barring effect in the hologram looked diminished, probably due to the relative size of the objects between Shade and Codea. Finally I could only really use the cube model as that is the only one common to both applications (I think).

Can we use obj models common to both apps? Are the icosphere and shaderball models available and loadable?

Simeon · May 2019

@Bri_G the diminished hologram effect in Codea could be due to Shade supporting an "additive" blend path which would not be part of the shader when bringing it into Codea (but is enabled in Shade as part of the tutorial)

Bri_G · May 2019

@John - trying to read the pixel in a height map and was trying to use Scene color node couple to a texture, accessing the reference section on that node when it came out with an error - see image below.

Bri_G · May 2019

@John @Simeon - I know I’m distracting you from your development but I ran into a problem that you can probably easily resolve. I tried to copy a group from one shader to a blank new one by selecting the group and then pasting it into the blank shader. It only copied the blank group. Do you need to select multiple nodes and group to achieve this? Could be another tutorial vid there.

Bri_G · May 2019

@John - not sure if it's present in Shade but an FPS display or routine to genetate one and display in output window could come in handy.

Also, would it be better to rename this thread as a forum thread and add another for the Shade anouncements?

Bri_G · May 2019

@Simeon - you could be right, not sure so two images below to show effect.

John · May 2019

@Bri_G the colours are lighter because you are adding gray/white to them when combined in diffuse. It's also an unlit shader so it'll appear flat.

Groups currently don't copy their members at the moment and there isn't any form of multiple selection right now. These are going to be added in an update though.

Bri_G · May 2019

@Jphn - thanks for the feedback.

Howdy, Stranger!

Categories

In this Discussion

Shade - Pro Shader Editing for iOS

Comments