Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Using shaders created in Shade on a 2D mesh

in Shaders Posts: 56

I am still quite new to Codea and I just got Shade today. I was able to use the shaders made in Shade on 3D craft models in Codea. However, I can’t figure out a way to get them to work on 2D meshes. I only started learning about shaders recently, so I might have a misunderstanding on how they work. I can get normal shaders built in Codea to work on my meshes, but nothing made in Shade.

Is there something I am missing? Do I need to make the shaders in Shade in a special way or is it not possible?

Any help would be great! Thanks

Comments

  • SimeonSimeon Admin Mod
    edited May 20 Posts: 4,994

    @exomut at the moment you need to use the craft API to make use of shaders exported from Shade

    You can create simple boxes and planes in craft and apply materials made in Shade. In the attached project (zip) you can see the basic checker material applied to a cube in Codea

    We're working on universal support for Shade files throughout Codea, including on mesh

    CraftMesh.zip 324.7K
  • Posts: 56

    Thanks for the quick reply.

    I was able to import a model I made in the iOS app “Forge” and apply the checker material. Craft projects work perfectly. Since you recently added support for craft projects export to xcode, I feel excited to start working on some 3D projects. Making a 2D app using 3D might be a fun challenge too!

    I am not a professional programmer. I am an English teacher that makes apps to use in class to make classes more interesting, so I mainly focus on 2D. Shaders make the look of app more enjoyable for the students.

    I can’t wait for support for 2D meshes. I am also looking forward to the Universal iPhone and iPad support that is in beta, as well. Keep up the great work.

  • SimeonSimeon Admin Mod
    Posts: 4,994

    @exomut you can make a 2D app using craft, you'd basically have to set it up so you have an isometric camera pointing at a plane

    But definitely the mesh API is simpler and more direct, so we'll be unifying the rendering in the future

    That's really cool that you build apps for your students

  • Posts: 56

    Thanks for your suggestion. I spent the day setting up an isometric camera pointing at a plane. I found some other users on this forum who had already figured that out. In the end, I decided that it wasn’t going to be easy to make games for my class doing 2D in a 3D environment.

    On the plus side, I got over the fear of making an app in 3D and learned a ton. I might make some 3D apps for class now. It wasn’t as hard as I was expecting.

    Thanks again!

  • dave1707dave1707 Mod
    Posts: 7,657

    @exomut If you want, I have a program that will let you take any image created with Shade to be used as a texture for a mesh. The steps would be:

    1. Run Shade and create a shader.
    2. Drag the Shade image so its as large as it can be.
    3. Take a snapshot of the screen.
    4. Run my program and import the Shade image into the Codea Dropbox folder.
    5. From my program move/resize a square to select the image area to save.
    6. That image will be saved in the Codea Dropbox folder to use as a mesh texture.

    Below is an image I made using the Lave Flow shader and I used that image to create a cube. The cube was created using mesh code.

  • Posts: 56

    @dave1707 Thanks for the idea! I started working on a small alphabet learning app for my class of ESL elementary students. Having just a static “A” floating around the screen felt a little dull and non-engaging. So my thought was to add some visual shaders to make the letters have hologram effects or glitch effects using elapsedTime.

    Since I can’t use Shade yet for 2D meshes, I bought a book(s) about shaders. The humblebundle.com is having a sale right now on graphics books. (Amazing timing for me!) After reading a bit, I noticed it will be a while until I fully understand shaders.

    I like your idea about capturing the image from Shade. If I setup a 3D craft model and have it run with a shader. I could capture a few frames and export them. Then use those frames as an animation on a 2D mesh.

    I see you a lot on this forum. So I am guessing I will be needing your help again. Thanks for the help!

  • dave1707dave1707 Mod
    edited May 23 Posts: 7,657

    @exomut Here the program I threw together, so it's not that polished. After you do a Shader screen snapshot, load this code. Tap on the word Dropbox:lava to open the Assets list. Select Dropbox. When that opens, tap on +photos to import the shader image into Dropbox. Give it a name and tap Use. Then tap that image and the Dropbox:lava name will change to the name of the image you selected. Then run my code and there will be a yellow square over the image. Use 2 fingers to shrink or enlarge the square and move it around. Once you have what you want in the square, tap the screen anywhere at the top of the screen. An image of what you selected in the square will be the only image showing. You're done and that image will be in the Dropbox folder named tempImage. Exit my code and you can use or rename the image to what you want. If you have any questions, just ask.

    PS. Don't forget to enlarge the image in the Shade program before you do the screen snapshot. It sounds more complicated than it is. Once you do it, it's no problem.

    displayMode(FULLSCREEN)
    
    function setup()
        spriteMode(CORNER)
        img=readImage("Dropbox:lava")
        size=img.width/2
        dx,dy=size/2,size/2
        tab={}
        stroke(255, 236, 0, 255)
        strokeWidth(3)
        noFill()
    end
    
    function draw()
        background(0)
        if img2==nil then
            sprite(img,0,0)
            translate(dx,dy)
            rect(0,0,size,size)
        else
            sprite(img2,50,50)
        end
    end
    
    function touched(t)
        if t.state==BEGAN then
            if t.y>HEIGHT-50 then
                img2=img:copy(dx//1,dy//1,size//1,size//1)
                saveImage("Dropbox:tempImage",img2)
            end
            if #tab<2 then
                table.insert(tab,{id=t.id,x=t.x,y=t.y})
                if #tab==2 then
                    startDist=vec2(tab[1].x,tab[1].y):dist(vec2(tab[2].x,tab[2].y))
                    startSize=size
                end
            end
        elseif t.state==MOVING then
            for a,b in pairs(tab) do
                if b.id==t.id then
                    b.x=t.x
                    b.y=t.y
                end
            end
            if #tab==2 then
                d=vec2(tab[1].x,tab[1].y):dist(vec2(tab[2].x,tab[2].y))
                size=startSize*(d/startDist)
            end
            dx=dx+t.deltaX/#tab
            dy=dy+t.deltaY/#tab
        elseif t.state==ENDED then
            for a,b in pairs(tab) do
                if b.id==t.id then
                    table.remove(tab,a)
                end
            end
        end    
    end
    
  • SimeonSimeon Admin Mod
    Posts: 4,994

    @exomut you can use the legacy style shaders on mesh (i.e., the ones you can create in the Shader Lab tool in Codea). You do have to write the code for these shaders, but simple hologram-style effects are possible and there are included ones like swirl and ripple.

  • Posts: 56

    @Simeon Thanks for your reply. Like I said above, I bought some books on Shaders that were on sale. Since, I only program just for fun, shaders are still way over my head. I have been playing around in Shade for a couple weeks now, and I feel like I am starting to understand a lot more. Learning first visually with Shade makes the step to programming shaders by hand seem easier. Thanks for making a wonderful tool! I am also excited that the update to Shade came out today! Congratulations, that was a long app store wait.

    @dave1707 Like always, from what I have seen on these forums, you go above and beyond! Thanks for the code! I will tinker around with what you gave me and see what I can learn from it!

Sign In or Register to comment.