Threejs Cannon Virtual Experience Engine

[Umbawa_Sarosong]

This is a THREEjs+Cannon-ES virtual city.

Gameplay:

Threeverse Testing

This source codes allows threejs designers and coders to build browser and mobile/android 3d virtual experience (metaverse) games quickly and easily.

Features:

This source code uses threejs and cannon library, the engine\assets\js*engine.js* is written to efficiently handle and manage city scale environment.

Preview project

Download source code

Download building assets

Download model components

Download game level

Download vehicle

Download avatar

Download buildings

Custom Avatar

To add characters, you can use your own Ready Player Me avatar url or create your own custom character, rig character at Mixamo, copy at engine/assets/models/players, and then register the character in the engine/assets/js/avatars.js JSON.

[{name:'avatarName', height: 1.8, weight: 97, offset: .12}]

avatar name: name of your avatar in fbx or glb file

avatar height: the avatar model height in meters

avatar weight: the avatar mass in kilograms

avatar offset: adjust the avatar offset from the floor, ensure the avatar feet touches the floor just right not floating and not sinking.

Custom Environment (City & Objects)

To replace city, you can use your own custom model in fbx or gltf format (texture embedded), copy the models to the engine/assets/models/objects folder and add the model file names in the engine/assets/js/levels.js JSON.

{name: 'modelName', type: 'modelType', loader: 'fileExtension', x: [0, 1], y: [0, 0], z: [0, 1], o:[{x:0,y:0,z:0},{x:0,y:90,z:0}], s:[1, 1], si:0, kg:[5, 5], sl:null, sh:'metalimpact', pc:'.5-1', px:1.2, ds:40}

model name: name of the fbx or glb file

model type: objectmesh, trimesh etc…

file extension: GLTF, GLB or FBX only

model positions: x:[0,1],y:[0,0],z:[0,1]

the model can clone in multiple positions for example x:[0,1] is placed in x axis 0 and x axis 1 or x:[0,1,2,3,4,5] is place in axis 0, 1, … and 5

model orientation: o:[{x:0,y:0,z:0},{x:0,y:90,z:0}]

model scale: s:[1, .5]

the model can cloned in different scale for instance a tree model example s:[1, .5] the first tree model clone is full scale (1) and the second tree model clone is half scale (.5)

model mass (kg): kg:[5,5]

the model can be of different mass in kilo grams for example kg:[0,1] the zero (0) is static and one (1) kilo gram is a kilogram or kg:[10,0,40,30,2] has different masses.

model proximity (meters): ds:40

Download source code

What is 3D Browser Game [The Island City]?

The Island City

Download

Threejs release r155 updated

Threejs Cannon Virtucities Release r155 Test

Checking release r155 updates if there will be bugs, error or conflicts?

[Umbawa_Sarosong]

Is there a THREEjs interior example that allows shadows in an interior scene, I made some interior in some of the buildings but the lack of shadows ruins the quality?

[Antonio]

If you are targeting ‘city scale environment’ and just need to depict interior of buildings from outside, you should consider integrating an ‘interior mapping’ shader, which renders rooms very efficiently without adding extra geometry

[Umbawa_Sarosong]

is there a THREEjs sample that can do interior similar to that reverse cube projection applied on as texture on the mesh?

[Antonio]

Well, the technique has been widely adopted, there are implementations for Unreal, Unity, OpenShadingLanguage, etc. For reference here there is a three.js implementation targeting .dds cubemap format for max. texture compactness, meaning they can be authored using dedicated tools like [NVIDIA Texture Tools Exporter].(NVIDIA Texture Tools Exporter | NVIDIA Developer), the discontinued ATI Cubemap Generator, or other similar.

Side note: while at my master thesis I wrote a full implementation of a box projected cubemap environment mapping shader in three.js, and I saw an opportunity to solve some of the limitations of the ‘interior mapping’ technique by applying same core principles. It was never intended to be published, but this approach ended up with nice feature additions, like individual room size definition, different cubemap formats support, occluders (windows, blinds) attributes, and shadows projected inside of the rooms. I am afraid it is kind of dated now (three rev.100 aprox), but updating it could be an interesting challenge

[Umbawa_Sarosong]

I want to change the images on the cube map in the cube.dds but when I save it using Photoshop or NVIDIA Texture Tools Exporter, the plane texture in the THREEjs scene turn black.

Is there a specific way to save the DDS cube map?

NVIDIA Texture Tools Exporter

THREEjs Interior Mapping Demo

[Antonio]

Hum… not in a windows machine here so I cannot tell much for NVidia standalone tool, but you have to be very picky with dds settings. From what I remember:

• Compression DX5 is kind of a standard so try with this first from the list (please see this table for details)
• You don’t need alpha for this, so unticking storing alpha would make the file smaller
• You also don’t need mipmaps (unless with this library), so untick it also (top corner of the settings panel on the left hand side of your snapshot)
• Look for a box that ensure cubeMap packing and tick it (double check)

For other issues I recomend asking to the library author

Update: Just briefly, I (still) use Developer’s Image Library (DevIL) on ubuntu for this kind of things, I was unsure if it would export cubeMap .dds, just tried and it turns out it does

[Umbawa_Sarosong]

I tried all settings, the images always turns black when saved in dds

[Antonio]

Sorry to hear that. At 3/4 length of the nvidia site there is a video (direct link) explaning the option you should select from the ‘texture type’ drop-down list, from default ‘2D Texture’ to ‘Cube Map’, here I grabed an image (too small, it is a video snapshot )

Also consider that .dds format is particularly technical, so special attention should be given to otherwise trivial things, being compression and cubeMap formats . The first one is pretty tricky, I suggested you trying with DX5 because it has broad support yet, but from time to time yet-another-better-compression-format pops-up so the final decision is up tho the target hardware. But then again dds is only the container for a texture compression schema, so it would be interesting to try exporting without any compression.

The other thing that may be causing issues is cubemap format. In the nvidia video, it is mentioned the ‘unfolded’ format (horizontal-cross layout), the same in this youtube video (at min 8:28), but I specifically remember from a blog entry (don’t remember, sorry) that depending on the decoding side, chosing the wrong layout could end up in a fliped texture or not showing at all (for instance, some engines only decode dds packed starting with a vertical-cross).

Finally, keep in mind that html spec doesn’t define image formats that should be supported, so it is up to the browser vendor. That means you will have this matrix of hardware-browser format support nightmare and bottom-line is you only can rely on png, jpg and gif to be supported on mobile devices (the demo I put toghether shows a black plane on my 3-years old samsung galaxy). I think this is what motivated me to have support for multiple layout formats in my own alternative solution.

[Umbawa_Sarosong]

I doesn’t work, there must be another software used to saved the dds for the three-interior-mapping, i did all settings one by one, the result is the same, the texture turn black

[Antonio]

That’s a pitty. For the remaining technical aspects, do inspect further the current files that are actually working. For instance, the official dds texture example in three.js respository states the intended compression profiles for each case:

mrdoob/three.js/blob/68daccedef9c9c325cc5f4c929fcaf05229aa1b3/examples/webgl_loader_texture_dds.html#L50-L56

As you can see in that file, 3 dds textures are treated as cubemaps: Mountains.dds, Mountains_argb_mip.dds, and Mountains_argb_nomip.dds. I would suggest to inspect those files (i.e. exif viewer) to find out how they were authored. As I said, combining all the aspects is not trivial with this format (mipmaps, compression, alpha, layout), but reviewing a working case should give insights.

Now regarding authoring tools, the web refers mainly to using nvidia, here there is a tutorial using the photoshop plugin. AMD CubemapGen was excellent at this back in the days, maybe you can give it a try. I found also this very simple explanation of using gimp, without using a forced layout, just stacking and naming cube sides in an specific order (remember to select “cubemap file”).

As I said in a previous post, you should test every dds file generated against this specific running environment, considering both software (dds loader, browser) and hardware (device, gpu, etc)

Hope this makes sense. Good luck!

[Umbawa_Sarosong]

it would really make the virtual city better, i will keep digging find ways to make it work

[Umbawa_Sarosong]

I have just copied the three.module.js release 145 to the Threejs Cannon Virtual Experience Engine
and suddenly the rendering jerking (when assets are loading) and crashing disappears, the THREEjs Cannon still crashes after I abused the game, bumping driving so fast to abuse the loading and unloading of the assets, but the release 145 prolonged the occurrence of the browser memory allocation error.

[Ranao]

its too slow on mobile, stay frozen, loading takes forever.

is there a reason why it’s upside down?

[Umbawa_Sarosong]

The THREEjs release 146 looks better, threejs is keep getting better and better.

The interior looks very clear, both exterior and interior is seamless as you come in and out the buildings.

I wish I have more free time to further develop this game.

[Umbawa_Sarosong]

Any one can download continue developing this project from itch.io

[Umbawa_Sarosong]

I changed all the characters of this to low poly random avatars, the Ready Player Me can also be loaded using the url.

I will soon be making a character editor on my next free time.

[Umbawa_Sarosong]

there is a minor bug in r148, the gltfloader doesn’t load gltf with instances

[Umbawa_Sarosong]

I have noticed the r149 is rendering faster than r148 (glitch and lags are minimized on low specs mobiles) and the gltfloader bugs doesn’t appear, also the shadows and lighting are much smother (csm are better) than it was too sharp on the previous versions.

the improvement on the renderings has allowed three browser game to be playable on low spec mobiles, I look forward to chrome increaaing its browser memory so we could develop even further to load a larger map on mobile devices

[Umbawa_Sarosong]

DevLog

The THREEjs + CANNON has been updated to the release 150, few changes and corrections on the basis of the players comments and requests to add or remove features.

Please leave a comment to continue developing the THREEjs + CANNON virtual experience app for mobile.