Export Ripple from Codea crashes in Shade

Shaders
1

I exported the built in Ripple.shader and when I try to open it in Shade it errors out. Attached screen shot.

2

@skar sorry for the confusion here, but those shaders in Codea (the Shader Lab-editable ones) are legacy shaders and are not compatible with Shade

Shade shaders are useable through the craft.material() system in Codea and will show up as materials, but they are not editable in Codea

3

Ok that’s strange, but I’m not too concerned about it since we can code shaders directly in Codea and pass them to shader(myVertexShader, myFragmentShader).

But it would be really great to be able to make 2D shaders in Shade and export them to Codea. Maybe that’s already possible, my attempt here was to use a 2D shader I already saw working and then modify it with Shade and bring the modified one to Codea.

4

@skar You can take a shader from Shade and use it. I’ll see if I can find my example.

This was using the Checkers shader. My version of Shade expired, so I have to reload it and try to get this working again. The asset.Checkers might need fixing.

viewer.mode=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(asset.Checkers)    
end
5

Idk if I’m ready to make my project jump from 2D to craft 3D. I really just want to spend more time working on 2D. It’s my dream to make a 2D side scroller, idk if I would want to fake it inside a 3D renderer.

6

I guess that’s OK if you’re not ready because I don’t remember how I managed to use the Shade Checker. If it wasn’t for the comment at the start of the program I wouldn’t think I did it. I’m still not sure, must have been some really strange way.

7

I found a Shade discussion on the forum and in there I see a discussion by me explaining the steps to take to use a shader from Shade in Codea. I also show the above program. It’s amazing what I forget. Here’s the link if anyone want to see it. The steps are on page 1 of the discussion.

https://codea.io/talk/discussion/9567/shade-pro-shader-editing-for-ios/p1
8

@skar If you still want to use Shade shader images, one thing you can do is use the full screen option in Shade and then take a screen shot. You can then edit the image to use in your 2D. I think that might work for you.

9

@skar You mentioned above that you wanted to make 2D shaders in Shade and use them in Codea. I created a mesh using the image from the Skull shader from Shade. There’s a few steps that you have to take, but it’s doable. If it’s something you want to do, I’ll give you the steps, if not then just ignore this. Here’s a picture of the mesh using the skull image.

10

@dave1707 that sounds interesting but is it actually a rasterized image? What about in the case of a shader that uses Time to make some kind of animation? Can I use the actual shader code or it has to be an image?

11

@skar What I’m talking about is a image from Shade. An image can be animated. Here’s an example.

function setup()
    viewer.mode=FULLSCREEN
    m = mesh()
    m.texture = readImage(asset.builtin.Cargo_Bot.Starry_Background)
    m:addRect(WIDTH/2,HEIGHT/2,WIDTH,HEIGHT)
end

function draw()
    m:setRectTex(1, ElapsedTime,0,10,10)
    m:draw()
end
12

@skar do you want to design Shaders in Shade then port them across for use in meshes in a 2D game? It sounds like something I was interested in a while back but at the time meshes in Codea weren’t supported. I’m still interested in this

https://codea.io/talk/discussion/comment/81632/#Comment_81632

Not sure if this has moved on @Simeon @John ?

13

@West the way forward on this would be to use a craft model (like subdivided plane) and apply the shader to that

So the way to do this would be to have a basic quad model in craft that is used for your sprites. And apply different materials for each sprite. This would allow the use of Shade shaders on the sprites

In Codea 4.0 mesh will be deprecated (probably with a compatibility layer that just uses the new renderer). And everything will behave more like craft — while still retaining immediate mode 2D graphics

14

@Simeon do you have a super simple example of this? Something like:


function setup()
    x=WIDTH/2
    y=HEIGHT/2
    size=100
end

function draw()
    background(40, 40, 50)
    sprite(asset.builtin.Blocks.Brick_Grey,x,y,size)
    --add hologram shader from Shade over top
end

With the shader from shade dropped over the top of the sprite as a quad(?) of the same size?

15

Ok based on @dave1707 example in the glow thread, I think I have a simple example


viewer.mode=FULLSCREEN

function setup()
    scene = craft.scene()
    scene.camera.position=vec3(0,0,-8)
    
    cameraComponent = scene.camera:get(craft.camera)
    cameraComponent.hdr = true
    cameraComponent.colorTextureEnabled = true
    
  material = craft.material(asset.Hologram)
    material2=craft.material(asset.Checkers)

    ground = scene:entity()
    ground.model = craft.model.cube(vec3(1,1,1))
    ground.position = vec3(0,0,0)
    ground.eulerAngles=vec3(90,0,0)
    ground.material = material
end

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

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

function touched(t)
    if t.state==BEGAN then
        gl=not gl
        if gl then
            ground.material = material
        else
            ground.material = material2
        end
    end
end

Split screen with shade and drag from shade into Codea to save the shader to the project asset directory.