Shade - Pro Shader Editing on your iOS Device - Now Available

John · March 15

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 16

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

dave1707 · March 17

@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 17

@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 21

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

Simeon · March 24

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

janalex · March 26

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 26

@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 31

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 31

@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 12

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

brianolive · April 13

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 30

@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 2

@piinthesky John actually made something like this a while back

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

piinthesky · May 2

@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 2

@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 3

@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 3

@John thanks for considering it

Bri_G · May 4

@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 4

@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 4

@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 4

@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 5

@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 5

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

dave1707 · May 5

@Bri_G Have you tried restoring the examples.

Bri_G · May 5

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

dave1707 · May 5

@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 5

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

dave1707 · May 5

@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 6

@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 6

@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 6

@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 6

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 6

@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 6

@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 7

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

Bri_G · May 7

@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 7

@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 7

@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 8

@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 8

@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 8

@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 8

@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 8

@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 9

@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 9

@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 9

@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 9

@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 9

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

John · May 10

@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 10

@Jphn - thanks for the feedback.

Howdy, Stranger!

Categories

In this Discussion

Shade - Pro Shader Editing on your iOS Device - Now Available

Comments