Jump to content

What is the largest texture size of BabylonJS supported ?

Kemal UÇAR

Recommended Posts

Hi All ;

I m wondering "What is the largest texture size of BabylonJS supported ?"

jpg or png texture file type,

As a result of my experiments I think 16384 x16384 pixel its right?

I m trying to make slideshow like carousel on mesh ;

I made it with uScale and UOffset method its workin good but,

Is there another way or Idea for that ?

Which is the best route ?

I look forward to your precious thoughts ,

Thank you All with my respects.


Link to comment
Share on other sites

I think you would be better with separate materials for each slide.  Reason is you would not care what the biggest is, so it would in more places.  Also means your # of slides is not limited by max texture size.

Also, by default mipmaps are built for a texture.  These are all the powers of 2 version less than the texture down to 20, or 1.  This can really slow down the speed which your scene loads.  If you are using a .babylon, you cannot turn mipmaps off, AFAIK.

Link to comment
Share on other sites

@KemalUCAR -

@JCPalmer  is providing you with invaluable info. As you apparently wish to load a single texture for many models and applying specific pixel areas to specific UVs - this in my opinion is a very inefficient method for memory management, GPU performance, and scene optimization - not to mention that unless you are developing for a single known hardware device, might easily over burden the GPU(s) of many devices. And I would be afraid to look at garbage collection for a scene with such overhead.

You'll lose considerable versatility in using this approach, as it's always good to dipose of assets such as bitmaps once you are finished using them in your scene. It appears you're familiar with power of 2 images, however, I can only imagine that you'll take a big performance hit in trying to load and parse through such a single large texture for many meshes in your scene. I've seen so many developers use such methods, and it appears to be a legacy issue from their past experience. However, I've never seen any improvement in performance or ease of use with such methods - quite the opposite. So I highly advise following @JCPalmer's advice and heeding his specific concerns.

Link to comment
Share on other sites

Thanks tips4designDeltakosh , JCPalmer , dbawel ;

for yours precious thoughts , tricks 

Which is the best method for performance deactivate meshes, materials and textures etc. to outside of scene ?

dispose ?

isvisible = false ? 

setEnabled = false ?

remove ?

Thank you All with my respects.

Link to comment
Share on other sites

Thank You Deltakosh ;

How about help performance with deactivate unused materials in scene ? ( i want reuse them later :) )

which file format for best texturing  ? base64 encoding? dds? png? jpg? tga ? or another ?

i tried dispose in this PG http://playground.babylonjs.com/#1HQF7R#2 

Disposed sphere2 material ithen  debuglayer saying total material 1  but in scene using 2 material

its weird ? 

Link to comment
Share on other sites

First take base64 out.  It is not a format.  If there was a "best", then there would only be one.  In WebGL 2, it gets even more muddy with compressed textures, ETC1, in addition to compressed images.

You defaulted on the arguments for dispose.  That does not do anything.  You can sometime freeze materials for performance, but that is not directly related to whether the material is assigned to an active mesh.

Link to comment
Share on other sites

As a Khronos lurker, I recently saw that some are starting to declare ASTC format the winner (or future winner).

DDS is also a compressed texture format.  For the average Babylonian both are kind of useless unless there is a kind of fall back built into the constructor of BABYLON.Texture.

Maybe for 2.6, change the url parameter to  string | Array<string> .  If an array, take the example ['texture.DDS', 'texture.JPG'] to try to load DDS first, then JPG if that does not work.

Implementation wise, I am not good enough to know if it can be determined by the time the constructor ends what is going to work.  If not, then could the async loading process adjust?

I am also thinking that the exporters would have to partially support this.  For Blender, I would probably implement this on the scene custom properties, since using could not be combined with Texture inlining.  Would probably change that from a checkbox to a dropdown.  This would leave the developer with the outside export step of ensuring a format that does not go through Blender exists.  Could the loading process tolerate a file missing situation (just complain about it)?  I could see someone picking an option, but wanting to delay actually running images through a converter later.


Any thoughts?  JSON problems?

Link to comment
Share on other sites

Ok. I think it better to not hardwire to DDS for future proofing purposes, so I am not sure about the DDS defaulting.  Unless you mean only if a string used, not an array.

I could modify this fairly quickly, if all I was going was the python side.  If I just left the default to passing a single filename.  If someone picks options not yet implemented in JS, so what?

Link to comment
Share on other sites

How does this look for UI?  Since tooltips do not show easily on screenshots, I also include the definition stuff too:


bpy.types.Scene.textureMethod = bpy.props.EnumProperty(
    description='How are textures to be implemented',
    items = (
             (LEGACY     , 'Legacy'     , 'Just the single Blender texture'),
             (INLINE     , 'Inline'     , 'Place a base64 version of texture directly in the output'),
             (PRIORITIZED, 'Prioritized', 'Allow various compressed texture formats to be tried first')
    default = LEGACY
bpy.types.Scene.texturePriority = bpy.props.StringProperty(
    description='Space delimited list of extensions to try\nnot including format supplied by Blender\nwhich will be last.',
    default = '.ASTC .DDS .ETC'

Order field is only enabled when 'Prioritized' method.

sub-directory field is only enabled when NOT 'Inline' method.

Link to comment
Share on other sites

17 minutes ago, Deltakosh said:

I'll give a try (Adding the array of string)

Yeah, I could not implement that. 

@Pryme8, not sure what that is in reference to.  I do not disagree for a single texture.  But whatever the size of texture, taking less ram in mobile devices always go, especially if RAM shared with CPU.

Link to comment
Share on other sites

its in reference to ""What is the largest texture size of BabylonJS supported ?", it does not really matter what size it supports... its kinda like do things right and unless you like absolutely need 4k textures (which how many clients could even really handle that) its just a waste of server head, client head, and time... what are you needing such a large texture for?  I mean a megaTexture of 4k would be cool and all but you can prolly get away with a 2048 and still have it quite detailed. I mean why not just go procedural if your gonna need something that big?

Link to comment
Share on other sites

Thanks All Guys ;

some mobile GPU's not support bigger than 2048 textures,

I m going to divide meshes to submeshes and use multimaterial and texture matrices,

I will try that.


What factors are affecting FPS performance ?

( My experiences and questions )


1. Meshes 

Which options are good ?

a ) 1 piece big meshes many vertices indexed multimaterials or,

b ) few piece seperated meshes with standart meterialing ?

I think option a ) cause more pieces increasing DrawCalls more  right ?


2. Materials and textures

as less as possible  material number and low size textures 

( dds best format but not supported everywhere .png best quality for now? )


3. Number of Lights 

ofcourse less light best performance :)


4. Post processing 

Can have fatal consequences for performance  ( I'm trying not to use but very good for visualisation :) )


5. Render Targets ( mirror materials etc. )

It greatly reduces performance :(





Factors you might think ?


Maybe need a performance GearBox modes for engine ?


Link to comment
Share on other sites

@Pryme8: ah, you were responding to the original thread.  Forgot about that, my bad.  As this thread so recently mentioned 2 compressed texture formats (.dds & .etc), I just put my texture constructor refactoring / exporter proposal here when I heard of .astc.

I am about 90% done on changes to ToB.  JSON exporter will take about an hour after that.  @Deltakosh, now that we are using a zip file with the major version as part of the name, should I add a new file Blender2Babylon-5.1.zip?  Should Blender2Babylon-5.0.zip be deleted?  What do you do for 3ds Max?

Link to comment
Share on other sites

Well, ToB is done & tested from my perspective.  I just took one of my blend files, and ran 3 different ways.  Legacy method works completely.  Inline is also fine.

For Prioritized method, I believe I generated correct code.  It got no syntax error, but did not actually "work", but I am not sure what I did was supposed to.  First, what I did.  My priority order was the current default: ".ASTC .DDS .ETC".  The code section generated was:

var matLoaded = false;
function defineMaterials(scene, materialsRootDir) {
    if (!materialsRootDir) { materialsRootDir = "./"; }
    if (Number(B.Engine.Version.substr(0, B.Engine.Version.lastIndexOf("."))) < 2.4) throw "Babylon version too old";
    if (matLoaded) return;
    if (materialsRootDir.lastIndexOf("/") + 1  !== materialsRootDir.length) { materialsRootDir  += "/"; }
    var material;
    var texture;

    if (!scene.getMaterialByID("gus.Gus")){
        material = new B.StandardMaterial("gus.Gus", scene);
        material.ambientColor  = new B.Color3(0,0,0);
        material.diffuseColor  = new B.Color3(.8,.8,.8);
        material.emissiveColor = new B.Color3(0,0,0);
        material.specularColor = new B.Color3(1,1,1);
        material.specularPower = 64;
        material.alpha =  1;
        material.backFaceCulling = true;
        material.checkReadyOnlyOnce = false;
        material.maxSimultaneousLights = 2;
        texture = new B.Texture([materialsRootDir + "gus_Gus_TEXTURE.ASTC",materialsRootDir + "gus_Gus_TEXTURE.DDS",materialsRootDir + "gus_Gus_TEXTURE.ETC",materialsRootDir + "gus_Gus_TEXTURE.jpg"], scene, false, true, B.Texture.TRILINEAR_SAMPLINGMODE, onTexturesLoaded);

I have none of files except the .jpg.  I do not even the hardware / browser to test, though Chrome can turn on .ASTC via --enable-webgl-draft-extensions.  Now it may be just too much to expect it to work with missing files, but needed to know what happens.

Doing a commit for ToB, and starting JSON exporter.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...