@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.
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!
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
@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.
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.
@John @dave1707 - thanks guys, I figured it was some 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!!!
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?
@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?
@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 ?
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
@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!!
@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
@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.
Playing around with it some more, there is definitely some horizontal flipping going on. Will look into it.
@John I used the picture you show above with the code 3 posts above that has the line of code you showed.
@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.