Howdy, Stranger!

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

Skybox

in Codea Craft Posts: 1,232

@John - been looking at skyboxes again and downloaded a few examples. Had a problem in that I couldn’t get all of the texture edges to match up. Managed to sort the odd one out by inverting the odd image to make the edges invisible. Can you describe the format used within Codea Craft for the image map, I know you put one on the planet example but it would help me sort out the rest if I knew what the format is and if any particular textures require rotation or inversion.

Comments

  • JohnJohn Admin Mod
    Posts: 573

    Hi @Bri_G, Craft uses the OpenGL format for cube textures - https://www.khronos.org/opengl/wiki/Cubemap_Texture.

    The ordering is:

    POSITIVE_X
    NEGATIVE_X
    POSITIVE_Y
    NEGATIVE_Y
    POSITIVE_Z
    NEGATIVE_Z
    

    Some of the example projects use the images in the Environments asset pack, which contains the 6 images for each one. To simplify this I created some json files that have a list the image assets to use, such as this:

    [
        "Environments:Night Right",
        "Environments:Night Left",
        "Environments:Night Down",
        "Environments:Night Up",
        "Environments:Night Back",
        "Environments:Night Front"
    ]
    

    The textures themselves get flipped when loaded due to the way OpenGL addresses textures (bottom to top) vs how image file formats work. Which means that positive y ends up being down instead of up. So technically you should be able to provide the sky textures without flipping them, but you may need to adjust your ordering to fit this.

    You can either give craft.cubeTexture a table of 6 images or 6 asset strings.

    I'm thinking of adding support for the cross format, which allows you to just supply a single image (with some wasted empty space).

    https://learnopengl.com/img/advanced/cubemaps_skybox.png

    Hopefully this clears things up!

    image.png 275.5K
  • JohnJohn Admin Mod
    Posts: 573

    Ok so I quickly put together some code so that you'll be able to do something like: scene.sky.material.envMap = craft.cubeTexture("Documents:SomeSkyTexture") and it works!

    I tried it on this image and it worked first time: http://paulbourke.net/miscellaneous/cubemaps/canyon2.jpg

    IMG_0088.jpg 177.6K
  • dave1707dave1707 Mod
    Posts: 7,610

    @John Is the code small enough to post an example.

  • JohnJohn Admin Mod
    Posts: 573

    @dave1707 I should have clarified that the code I wrote was part of Codea itself. This will be in the next beta for sure though and I'll provide an example project as well.

  • dave1707dave1707 Mod
    Posts: 7,610

    @John OK, thanks.

  • dave1707dave1707 Mod
    edited December 2018 Posts: 7,610

    I hacked up one of my programs for this. To create Dropbox:sky, long press the image @John has above and do a save image. That will put it in photos. From the Codea Dropbox folder, tap on photos, select the image and name it sky. Then run the code below. If you have questions, I’ll answer them in the morning.

    PS. The bottom isn’t right, it needs to be rotated, I’ll look at it in the morning.

    Code removed, see updated version below.
    
  • JohnJohn Admin Mod
    Posts: 573

    @dave1707 Nice, that works too!

  • Posts: 1,232

    @John @dave1707 - thanks guys, I figured it was som convention within OpenGL and have seen the diagrams describing placement etc but couldn’t figure out which texture was modified and to what extent. By trial and error have got several working OK but consumed a lot of time messing around and needed to use my Mac to view all the images to match. This will speed up my efforts.

    But, major turmoil now downloaded the image and ran the above code but couldn’t get the image loaded. Tried reading it from Documents and Dropbox and Dropbox subfolders - which all seem to work for my other projects. Got a funny error by trying to load the image in another project - error said it was a table not an image, yet image viewable in photo in file app etc. Weird!!!!

  • edited December 2018 Posts: 1,232

    All - think I may have found the problem, the files were downloaded as PNG or JPG on my iPad, not recognised by Codea. Will have to change these on Mac, let you know how I get on with it. New Codea version to load now, presumably with your loader in @John.

    Edit: definitely an image naming problem, using code above I can load some of my older images and produce a skybox fine. Thanks. Does anyone know why the image downloads I am getting are capitalised in the file type - is it related to the browser as no-one else seems to get the same problem. Maybe a setting in iOS?

  • SimeonSimeon Admin Mod
    Posts: 4,958

    @Bri_G if you are able to, could you send one of those images to me so I can see why it's not loading?

  • Posts: 1,232

    @Simeon - just noticed a reference to a plist for handling file types in an iOS application. I assume you have a plist that does this for Codea. I have encountered this with Textastic, which allows you to handle and add different types. I am assuming that this just defines the types so that a standard “Not supported by this app” error gets fired up and you need the backup code to deal with any file type. If that is so, you have the code you just need a pointer to identify it to the file type .PNG, That’s probably an oversimplification. Are there any other instances of this like .MTL, .OBJ and .WAV etc ?

  • dave1707dave1707 Mod
    edited December 2018 Posts: 7,610

    Here’s an updated version, I corrected the bottom image. It’s still not perfect, but close. Add Craft and Cameras as dependencies. See original post above for Dropbox:sky instructions.

    displayMode(FULLSCREEN)
    
    function setup()
        img=readImage("Dropbox:sky")
        front=img:copy(257,257,256,256)
        top=img:copy(257,513,256,256)
        left=img:copy(1,257,256,256)
        right=img:copy(513,257,256,256)
        back=img:copy(769,257,256,256)    
        bottom=image(256,256)
        xx=0
        for x=512,256,-.5 do
            yy=0
            xx=xx+1
            for y=256,1,-.5 do
                yy=yy+1
                r,g,b,a=img:rawGet(x*2,y*2)
                bottom:rawSet(xx,yy,r,g,b,a)
            end
        end    
        scene = craft.scene()
        v=scene.camera:add(OrbitViewer, vec3(0,0,0), 0, 0, 200)
        env={left,right,top,bottom,front,back}    
        createObjects()
    end
    
    function createObjects()
        size=50
        createWall(vec3(-size/2,0,0),vec3(.1,size,size),env[1])   --left
        createWall(vec3(size/2,0,0),vec3(.1,size,size),env[2])    --right 
        createWall(vec3(0,size/2,0),vec3(size,.1,size),env[3])    --top
        createWall(vec3(0,-size/2,0),vec3(size,.1,size),env[4])   --bottom   
        createWall(vec3(0,0,-size/2),vec3(size,size,.1),env[5])   --front   
        createWall(vec3(0,0,size/2),vec3(size,size,.1),env[6])    --back
    end
    
    function createWall(pos,a,map)
        local ww=scene:entity()
        ww.position=pos
        ww.model = craft.model.cube(a)
        ww.material = craft.material("Materials:Basic")
        ww.material.map = map
    end
    
    function draw()
        fill(255)
        update(DeltaTime)
        scene:draw()    
    end
    
    function update(dt)
        scene:update(dt)
    end
    
  • edited December 2018 Posts: 1,232

    @John - thanks for the cubemap loader in 2.6.3 (136). Best fit so far but I am still having problems with one side of the image. The Bottom textur - only one side seems to knit in with the rest. I have built a cubemap from seamless images, that may be causing the problem. @dave1707 - having trouble with your interpretation there are several side joints that show up prominently. Also, I thought img:get and set numbered from zero in line with OpenGL.

    Have a good Christmas guys ‘n gals iPad shelved until day after Boxing Day, by order of da Boss!!

  • dave1707dave1707 Mod
    edited December 2018 Posts: 7,610

    @Bri_G I’m not having any trouble with the bottom texture. In my code above, I had to flip the bottom image so it matches the sides. I’m having a little trouble with some of the seems. I’ve been playing with my code trying to eliminate them. I don’t know if it’s my code or Codea because John has the same problem when I use his line of code in the code below.

    @John I’m not sure how the image is supposed to look, but using the line of code you show that I put in my code below, the image is reversed. In the image above, the Sun is to the left of the group of trees. In the Skybox, the Sun is to the right of the trees. I was trying to find a Skybox image that had some text in the picture to see which way is correct. Also, I noticed that the seems don’t come together exactly. It shows in the blue sky easily, but somewhat where the bottom and the edges connect. I have the same problem in my code above. I like your update where one line of code replaces a whole bunch of lines in mine.

    displayMode(FULLSCREEN)
    
    function setup()
        assert(OrbitViewer, "Please include Cameras (not Camera) as a dependency")
        scene = craft.scene()
        v=scene.camera:add(OrbitViewer, vec3(0,0,0), 0, 0, 200)
        scene.sky.material.envMap = craft.cubeTexture("Dropbox:sky")
    end
    
    function draw()
        update(DeltaTime)
        scene:draw()    
    end
    
    function update(dt)
        scene:update(dt)
    end
    
  • JohnJohn Admin Mod
    Posts: 573

    @dave1707 are you talking about the skybox texture that I attached earlier in the thread? I can’t find any seams when I run it: https://www.dropbox.com/s/getorne1xjlmtwu/EnvMapTest.mp4?dl=0

    If you have a different one that doesn’t work, please post it so I can have a look.

  • JohnJohn Admin Mod
    Posts: 573

    Playing around with it some more, there is definitely some horizontal flipping going on. Will look into it.

  • dave1707dave1707 Mod
    Posts: 7,610

    @John I used the picture you show above with the code 3 posts above that has the line of code you showed.

  • dave1707dave1707 Mod
    Posts: 7,610

    @John I sent you a picture with email. It wouldn’t let me post it here, too big.

  • dave1707dave1707 Mod
    Posts: 7,610

    @John I wonder if the way I’m copying the Skybox picture is causing a problem. Maybe the image is off a little getting copied and some of the white is getting picked up.

  • edited December 2018 Posts: 1,232

    @dave1707, @John - the images are reversed in John's skybox, and matched - see my crude tester image attached, the seams are only recognizably different with texture differences (my seamless tiles are great horizontally but poor vertically) . John have you specified all image inversions in your code instead of one?

  • JohnJohn Admin Mod
    Posts: 573

    @Bri_G I think the cubemap is correctly loaded into OpenGL but the shader is incorrectly sampling things, causing the mirroring issue.

  • Posts: 1,232
    @John - is that sampling wrong face texture or sampling in wrong direction.
Sign In or Register to comment.