Difference between revisions of "Libs3D Library"

From GiderosMobile
(wip)
Line 15: Line 15:
 
*'''luashader'''
 
*'''luashader'''
  
Create a '''models''' folder, and in this folder an '''objs''' folder. Your file structure should look something like this:
+
Create a '''models''' folder, and in this folder an '''objs''' folder. I also add a '''textures''' folder. Your file structure should look something like this:
 
*'''YourProjectName'''
 
*'''YourProjectName'''
 
**Plugins
 
**Plugins
Line 23: Line 23:
 
***models
 
***models
 
****objs
 
****objs
 +
****textures
 
***''main''.lua
 
***''main''.lua
  
Line 30: Line 31:
 
When you work with 3D, you need to follow some "engine" rulez. In Gideros, for the '''.obj''' file format, those are:
 
When you work with 3D, you need to follow some "engine" rulez. In Gideros, for the '''.obj''' file format, those are:
 
*'''currently Gideros supports ''Base Color'', ''Texture map'' and ''Normal Map'''''
 
*'''currently Gideros supports ''Base Color'', ''Texture map'' and ''Normal Map'''''
 +
*'''currently Gideros supports ''.png'' and ''.jpg'' image formats'''
 
*'''the textures shouldn't be embedded in the models. In Blender, use ''unpack resources''''':
 
*'''the textures shouldn't be embedded in the models. In Blender, use ''unpack resources''''':
 
[[File:Blender_unpack_resources.png|414px]]
 
[[File:Blender_unpack_resources.png|414px]]
Line 54: Line 56:
 
*****roadtovostok
 
*****roadtovostok
  
== The Ground ==
+
== A shape for the Ground ==
As we are more learning than making a game, we won't really care if the 3D assets don't match 🤷‍♂️!
+
The asset pack doesn't come with some kind of ground, so let's build our own.
 +
 
 +
For the ground, we are going to use the Plane shape available in the helper file ''3DShapes.lua''.
 +
<syntaxhighlight lang="lua">
 +
-- a shape
 +
local ground = D3.Plane.new(0.6*8, nil, 0.6*8) -- (w,h,d)
 +
</syntaxhighlight>
 +
 
 +
'''By definition a plane is flat, that's why we can set the height (h) as nil'''
 +
 
 +
We add some image texture to it. Please pick any ground texture you like from any site (eg. https://polyhaven.com/textures) and put it in the '''textures''' folder. I picked this one: https://polyhaven.com/a/forrest_ground_01 '''1K JPG'''.
 +
 
 +
[[File:3d_plane_polyhaven_forrest_ground.png|480px]]
 +
 
 +
<syntaxhighlight lang="lua">
 +
-- a shape
 +
local ground = D3.Plane.new(0.6*8, nil, 0.6*8) -- (w,h,d)
 +
-- and its texture
 +
local tex = Texture.new("models/textures/forrest_ground_01_diff_4k.jpg", nil, { wrap=Texture.REPEAT, } )
 +
local texsx, texsy = 0.17*8, 0.17*8 -- texture scaling
 +
ground:mapTexture(tex, texsx, texsy)
 +
</syntaxhighlight>
 +
 
 +
'''Scale the texture according to your texture size using texture scale x (tessx) and texture scale y (texsy)'''
 +
 
 +
We tell the shape to receive light and shadows.
 
<syntaxhighlight lang="lua">
 
<syntaxhighlight lang="lua">
 +
-- we tell the shape to receive light and shadows
 +
ground:updateMode(D3.Mesh.MODE_LIGHTING + D3.Mesh.MODE_SHADOW)
 +
</syntaxhighlight>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
<syntaxhighlight lang="lua">
 +
application:setBackgroundColor(0x454545)
 +
 +
-- we set up a fullscreen 3D viewport (fov: consoles 60, pc 90)
 +
local sw, sh = application:getContentWidth(), application:getContentHeight()
 +
local view = D3.View.new(sw,sh, 90, 0.1,1*1024) -- (sw,sh, fov, near,far)
 +
 +
-- we will add 3D shapes and models to a scene
 +
local scene = view:getScene()
 +
 +
-- a shape
 +
local ground = D3.Plane.new(0.6*8, nil, 0.6*8) -- (w,h,d)
 +
-- and its texture
 +
local tex = Texture.new("models/textures/forrest_ground_01_diff_4k.jpg", nil, { wrap=Texture.REPEAT, } )
 +
local texsx, texsy = 0.17*8, 0.17*8 -- texture scaling
 +
ground:mapTexture(tex, texsx, texsy)
 +
-- we tell the shape to receive light and shadows
 +
ground:updateMode(D3.Mesh.MODE_LIGHTING + D3.Mesh.MODE_SHADOW)
 +
 +
-- we add the shape to the scene
 +
scene:addChild(ground)
 +
-- and the scene to stage
 +
stage:addChild(view)
 +
 +
-- we position the view and its target
 +
view:lookAt(0*8,0.5*8,1*8, 0*8,0*8,0*8) -- (eyex,eyey,eyez, targetx,targety,targetz, upx,upy,upz)
 +
 +
-- light helper
 +
local ls = Pixel.new(0xffff00, 2, 0.5, 0.5) -- light source helper
 +
ls:setAnchorPoint(0.5, 0.5, 0.5)
 +
scene:addChild(ls)
 +
local lt = Pixel.new(0xff00ff, 2, 0.2, 0.2) -- light target helper
 +
lt:setAnchorPoint(0.5, 0.5, 0.5)
 +
scene:addChild(lt)
 +
-- light setup
 +
local lsx, lsy, lsz = 0*8, 0.5*8, 0*8 -- light source position
 +
local ltx, lty, ltz = 0.5*8, 0*8, 0.5*8 -- light target position
 +
ls:setPosition(lsx, lsy, lsz) -- our light helper
 +
lt:setPosition(ltx, lty, ltz) -- our light helper
 +
Lighting.setLight(lsx,lsy,lsz, 0.5) -- (x,y,z, ambient)
 +
Lighting.setLightTarget(ltx,lty,ltz, 5*8,6*8) -- (x,y,z, projection distance,fov)
 +
 +
-- game loop
 +
stage:addEventListener(Event.ENTER_FRAME, function(e)
 +
ground:setRotationY(ground:getRotationY()+5*e.deltaTime)
 +
Lighting.computeShadows(scene)
 +
end)
 
</syntaxhighlight>
 
</syntaxhighlight>
  

Revision as of 12:26, 29 January 2026

I am ready

As we have seen, to make more advanced 3D, Gideros has a bunch of helper files packed in the Library folder.

I will try to impress you with 3D Gideros ✨.

Here is the plan:

  • start with shapes
  • add some .obj models
  • add some .fbx animations

Please create a new Gideros project and copy the two following Library folders in the assets folder:

  • 3dbase
  • luashader

Create a models folder, and in this folder an objs folder. I also add a textures folder. Your file structure should look something like this:

  • YourProjectName
    • Plugins
    • Files
      • 3dbase
      • luashader
      • models
        • objs
        • textures
      • main.lua

You can run your project, you should have a blank screen.

.obj Rulez

When you work with 3D, you need to follow some "engine" rulez. In Gideros, for the .obj file format, those are:

  • currently Gideros supports Base Color, Texture map and Normal Map
  • currently Gideros supports .png and .jpg image formats
  • the textures shouldn't be embedded in the models. In Blender, use unpack resources:

Blender unpack resources.png

  • your Blender BSDF shaders should look something like:

Blender shading tab.png

  • Gideros will import the position of the models, so make sure your models are at location 0, 0, 0
  • I believe Gideros also imports the origin of the models, so place the origins accordingly
I personally use this Blender add-on: https://extensions.blender.org/add-ons/act-game-asset-creation-toolset/

Please note, you can still have the Metallic, Roughness and other textures attached in your Blender BSDF shaders, Gideros will just ignore them.

The assets: .obj

I have chosen this cc0 asset pack: https://roadtovostok.itch.io/road-to-vostok-assets-vol1.

In 3D, the assets you download from the internet, often need some adjustement to follow your "engine" rulez 🤷‍♂️. I already made those adjustements and you can find the adjusted asset pack here: https://mokatunprod.itch.io/3dpixel-obj-packs.

Please copy the roadtovostok asset pack (or your own models) in the objs folder:

      • models
        • objs
          • roadtovostok

A shape for the Ground

The asset pack doesn't come with some kind of ground, so let's build our own.

For the ground, we are going to use the Plane shape available in the helper file 3DShapes.lua.

-- a shape
local ground = D3.Plane.new(0.6*8, nil, 0.6*8) -- (w,h,d)
By definition a plane is flat, that's why we can set the height (h) as nil

We add some image texture to it. Please pick any ground texture you like from any site (eg. https://polyhaven.com/textures) and put it in the textures folder. I picked this one: https://polyhaven.com/a/forrest_ground_01 1K JPG.

3d plane polyhaven forrest ground.png

-- a shape
local ground = D3.Plane.new(0.6*8, nil, 0.6*8) -- (w,h,d)
-- and its texture
local tex = Texture.new("models/textures/forrest_ground_01_diff_4k.jpg", nil, { wrap=Texture.REPEAT, } )
local texsx, texsy = 0.17*8, 0.17*8 -- texture scaling
ground:mapTexture(tex, texsx, texsy)
Scale the texture according to your texture size using texture scale x (tessx) and texture scale y (texsy)

We tell the shape to receive light and shadows.

-- we tell the shape to receive light and shadows
ground:updateMode(D3.Mesh.MODE_LIGHTING + D3.Mesh.MODE_SHADOW)








application:setBackgroundColor(0x454545)

-- we set up a fullscreen 3D viewport (fov: consoles 60, pc 90)
local sw, sh = application:getContentWidth(), application:getContentHeight()
local view = D3.View.new(sw,sh, 90, 0.1,1*1024) -- (sw,sh, fov, near,far)

-- we will add 3D shapes and models to a scene
local scene = view:getScene()

-- a shape
local ground = D3.Plane.new(0.6*8, nil, 0.6*8) -- (w,h,d)
-- and its texture
local tex = Texture.new("models/textures/forrest_ground_01_diff_4k.jpg", nil, { wrap=Texture.REPEAT, } )
local texsx, texsy = 0.17*8, 0.17*8 -- texture scaling
ground:mapTexture(tex, texsx, texsy)
-- we tell the shape to receive light and shadows
ground:updateMode(D3.Mesh.MODE_LIGHTING + D3.Mesh.MODE_SHADOW)

-- we add the shape to the scene
scene:addChild(ground)
-- and the scene to stage
stage:addChild(view)

-- we position the view and its target
view:lookAt(0*8,0.5*8,1*8, 0*8,0*8,0*8) -- (eyex,eyey,eyez, targetx,targety,targetz, upx,upy,upz)

-- light helper
local ls = Pixel.new(0xffff00, 2, 0.5, 0.5) -- light source helper
ls:setAnchorPoint(0.5, 0.5, 0.5)
scene:addChild(ls)
local lt = Pixel.new(0xff00ff, 2, 0.2, 0.2) -- light target helper
lt:setAnchorPoint(0.5, 0.5, 0.5)
scene:addChild(lt)
-- light setup
local lsx, lsy, lsz = 0*8, 0.5*8, 0*8 -- light source position
local ltx, lty, ltz = 0.5*8, 0*8, 0.5*8 -- light target position
ls:setPosition(lsx, lsy, lsz) -- our light helper
lt:setPosition(ltx, lty, ltz) -- our light helper
Lighting.setLight(lsx,lsy,lsz, 0.5) -- (x,y,z, ambient)
Lighting.setLightTarget(ltx,lty,ltz, 5*8,6*8) -- (x,y,z, projection distance,fov)

-- game loop
stage:addEventListener(Event.ENTER_FRAME, function(e)
	ground:setRotationY(ground:getRotationY()+5*e.deltaTime)
	Lighting.computeShadows(scene)
end)

I am out 2

To do.

You are strongly encouraged to mess with the code.

Bye for now!


Libs3D