Difference between revisions of "Libs3D Library"

From GiderosMobile
(wip)
 
(12 intermediate revisions by the same user not shown)
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 29: Line 30:
 
== .obj Rulez ==
 
== .obj Rulez ==
 
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 ''.png'' and ''.jpg'' image formats'''
 
*'''currently Gideros supports ''Base Color'', ''Texture map'' and ''Normal Map'''''
 
*'''currently Gideros supports ''Base Color'', ''Texture map'' and ''Normal Map'''''
 
*'''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''''':
Line 42: Line 44:
 
  '''I personally use this Blender add-on: https://extensions.blender.org/add-ons/act-game-asset-creation-toolset/'''
 
  '''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 in your Blender BSDF shaders, Gideros will just ignore them.
+
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''' ==
 
== The assets: '''.obj''' ==
I have chosen this asset pack: https://roadtovostok.itch.io/road-to-vostok-assets-vol1.
+
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 🤷‍♂️. I made those adjustements and I will use the pack I uploaded here: '''https://mokatunprod.itch.io/3dpixel-obj-packs''' (or you can use your own models).
+
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:
 
Please copy the '''roadtovostok''' asset pack (or your own models) in the ''objs'' folder:
Line 54: Line 56:
 
*****roadtovostok
 
*****roadtovostok
  
== The Ground ==
+
== Gideros 3D ==
As we are more learning than making a game, we won't really care if the 3D assets don't match 🤷‍♂️!
+
For 3D, we use a Viewport with a 3D perspective projection Matrix. Everything is already setup and ready to use in the helper file ''3DView.lua''.
 +
 
 +
We set up a fullscreen 3D Viewport. For the perspective projection Matrix, we need a field of view (fov), a clipping near plane distance and a clipping far plane distance.
 
<syntaxhighlight lang="lua">
 
<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)
 +
</syntaxhighlight>
 +
 +
'''For consoles a good fov angle should be around 60 and for pc around 90'''
 +
 +
<youtube>blZUao2jTGA</youtube>
 +
 +
The view is a Viewport with a perspective projection. You can see it as a "camera" you can position and set a target to look at.
 +
 +
Finally, we will add all our 3D models to a scene. The scene is a simple Sprite.
 +
<syntaxhighlight lang="lua">
 +
-- we will add 3D shapes and models to a scene
 +
local scene = view:getScene()
 +
</syntaxhighlight>
 +
 +
== 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''.
 +
<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_1k.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">
 +
-- we tell the shape to receive light and shadows
 +
ground:updateMode(D3.Mesh.MODE_LIGHTING + D3.Mesh.MODE_SHADOW)
 +
</syntaxhighlight>
 +
 +
Finally, we add the ground to the scene and the view to Gideros '''stage'''. The view (camera) has a position and a target to look at.
 +
<syntaxhighlight lang="lua">
 +
-- we add the shape to the scene
 +
scene:addChild(ground)
 +
-- and the scene to stage
 +
stage:addChild(view)
 +
 +
-- we position the view (camera) 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)
 
</syntaxhighlight>
 
</syntaxhighlight>
  

Latest revision as of 03:10, 30 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 .png and .jpg image formats
  • currently Gideros supports Base Color, Texture map and Normal Map
  • 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

Gideros 3D

For 3D, we use a Viewport with a 3D perspective projection Matrix. Everything is already setup and ready to use in the helper file 3DView.lua.

We set up a fullscreen 3D Viewport. For the perspective projection Matrix, we need a field of view (fov), a clipping near plane distance and a clipping far plane distance.

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)
For consoles a good fov angle should be around 60 and for pc around 90

The view is a Viewport with a perspective projection. You can see it as a "camera" you can position and set a target to look at.

Finally, we will add all our 3D models to a scene. The scene is a simple Sprite.

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

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_1k.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)

Finally, we add the ground to the scene and the view to Gideros stage. The view (camera) has a position and a target to look at.

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

-- we position the view (camera) 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)

I am out 2

To do.

You are strongly encouraged to mess with the code.

Bye for now!


Libs3D