Shade to Codea

Questions
1

Looking to understand the shade to Codea relationship a bit better.

I have a very simple mesh which I can map the built in procedural shader to. This works as expected.


--Very basic demonstration of a shader
--uses in built shader and has the minimum elements to get things upand running
displayMode(FULLSCREEN)

function setup()
    
    m = mesh() --create the mesh
    m.shader = shader(asset.builtin.Patterns.Bricks) --assign the shader to the mesh
    
    verts={vec2(300,300),vec2(600,300),vec2(800,800),vec2(300,600)} --define the perimeter of the mesh shape
    m.vertices=triangulate(verts) --use the triangulate command to ensure the correct mesh triangles are generated.  A rectangle is represented by a path of six points: bl,tl,br,tl,br,tr in this order -->bl is bottom left
    
  --  m.texCoords = {vec2(0,0),vec2(0,1),vec2(1,0),vec2(0,1),vec2(1,0),vec2(1,1)} --for texture based shaders the texCoords will also need to be generated and this is done relative to the TEXTURE image, not the projected mesh shape
    
    m:setColors(255,255,255,255) --assign colors to all vertices 
    
    --shader specific inputs mappings to the uniforms/bindings for built in brick shader
    m.shader.mortarColor=vec4(0.8,0.8,0.8,1.0)
    m.shader.brickSize=vec3(35,15,35)
    m.shader.brickPct=vec3(0.9,0.85,0.85)
    m.shader.brickColor=vec4(1.0,0.3,0.2,1.0)
    
end

-- This function gets called once every frame
function draw()
    -- This sets a dark background color
    background(40, 40, 50)
    m:draw()
end

What I want to do is drag across a shader from shade. If I try to drag across the checkers shader from shade (split screen and drag from shade into the shader function it gives me a warning, doesn’t update properly, but the shader is now in the assets for the project. When I select it from the picker and run it crashes out. I’m wondering if there are additional bindings required? (I’ve see this approach successfully with the AR Face demo, but the code is way more complex)

2

@West I tried a split screen with this code and the Shader app. I was able to drag the Checkers shade into this code. When I dragged the Checkers shade over, I put the Checkers cursor between the () of the c1.material=craft.material() line. The Checkers shader then shows in the Project folder. I don’t get any errors and the program runs with the Checkers image on a cube. I left the () blank in the code below, but when you drag it over, it shows as
c1.material = craft.material(asset.Checkers)

displayMode(FULLSCREEN)

-- uses a shader from Shade.

function setup()
    fill(255)
    assert(OrbitViewer, "Please include Cameras (not Camera) as a dependency")
    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()    
end
3

@dave1707 - tried this myself, I set up the split list (had to be in landscape mode). Then I dragged the checkers shader from the Shade split, into the Codea split - then it started to get interesting. You can’t drags the icon over the () parentheses to paste it in - but a thick green line higher and to the left appears - so I placed that int the parentheses and it pasted the code in. Unfortunately it was in the line above. An error fired up the inserted code disappeared and the error bar then disappeared.

How did you get this to work.

P.s. dragged the checkers shader icon from the Shade folder into the parentheses to Get this result.

4

@Bri_G When you drag the shader over, there’s a thick green cursor to the left of the shader. You can put the cursor inside the () if you want, but it doesn’t matter where it is because the asset line of code disappears after a few seconds. If you tap inside the (), it brings up the asset list. If you go into Project, you should see the shader name there. Tap on that and it will insert the name inside the ().

PS. Actually it’s easier to just drag the shader anywhere within the code. An asset line for the shader will show and then disappear after a second or so. Tap within the () where you want the shader. The shader should be in the project asset folder.

5

@dave1707 - thanks for the explanation, got that to work perfectly now.

@Simeon - just a little bit of confusion, whilst playing with this transfer of shader an issue popped up which initially confused me. I had an error where a definition of a variable seemed to throw up an error ‘= expected near local’. It was on the first line of code in the _function createRect1() _ after the function definition from this example. But the error wasn’t due to that line but in the first line of the function definition itself - I had inadvertently placed a character there like


function createRect1() f
    local c1=scene:entity()

Deleting the character resolved the issue but the error text had me confused for a while. The error line indicator pointed to the local definition line. Is there any way of trapping this - I have seen this before?

6

@dave1707 thanks, but I’m really after the 2D equivalent in my code. I have a polygon which I want to fill with a repeating texture, and it would be nice if I could design these textures in shade

7

Also tried saving the checkers shader to codea documents and opening it in shader lab but it contains nothing

8

Aha a little more digging and it seems that mesh is not yet supported :frowning: Though this was a year ago.

https://codea.io/talk/discussion/9668/using-shaders-created-in-shade-on-a-2d-mesh

@Simeon any time horizon on this integration?

9

@West In the link you show above, I showed a way to use an image created from Shader. Using your original program above, (with a few changes), and the Checker shader, I was able to create the mesh image below.

10

Just to clear things up, shaders created with Shade only work with craft.material which itself only works with scenes and models. There does appear to be some issues with drag and drop, which hopefully can be resolved soon.

In the meantime I’ve created this Material Previewer project to show how you can use materials from shade properly: https://www.dropbox.com/s/zncoquugbci6vjn/Material%20Previewer.zip?dl=0

In the new runtime I’m currently working on, which is moving us to Metal, all redundant types are being merged so that mesh/shader will replace model/material and all work in a unified and consistent manner.

So in future you will be able to use Shade more easily with the simple mesh/shader workflow, as well as scenes.

11

@John - I take it with metal, all object types will still be accessible - .obj, .ply etc? Or, do you need to load these into mesh?

12

@Bri_G the mesh loading will be the same but instead of using craft.model(asset.myModel) you can just use mesh(asset.myModel), and we will probably have a mesh:save() method too.

13

@John - thanks for the feedback the mesh:save() sounds useful - I’m assuming it will be as a .mesh object.

14

@John thanks for the info - sounds awesome. Do you have an approximate timescale on this?

15

@West @John has been doing a lot of work on the new renderer. My plan is to put it into Codea in early-access style. So you can toggle it on per-project to mess around with