Search the Community

Showing results for tags 'textures'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 55 results

  1. Super exciting developments for me. @Des3Dteam have finished my first 3D asset I have an obj file, height-maps, textures, and everything. I'm linking a gif of said object below. Now - what information do I need, and how do I go about changing the texture/image in the circle that says "Des3DTeam"? I need to be able to change it on the fly in the JS code. Thanks
  2. I read in another thread that BabylonJS intelligently handles multiple uses of the one texture for optimal performance i.e. internally if the texture path is the same then no extra vram is used for subsequent new textures with the same path. I suspect I've been overcomplicating things up until now but here's some related questions. Question 1 If I load my textures with AssetsManager like so: var textureTask = assetsManager.addTextureTask("my-texture", "./path/to/my-texture.jpg"); Are the following methods of applying the textures equivalent behind the scenes (i.e. neither uses more VRAM)? // Method 1 textureTask.onSuccess = function(task) { material.diffuseTexture = task.texture; } // Method 2 - elsewhere in application after assetsManager.onFinish() has been called. material.diffuseTexture = new BABYLON.Texture("./path/to/my-texture.jpg", scene); Question 2 What I've been doing up until now is assigning loaded assets to an assets array which I then pass around to various objects to use what they need like so: textureTask.onSuccess = function(task) { assets[] = task.texture; } // Stuff ... var myCustomObject = new CustomObject(assets); // In CustomObject ... material.diffuseTexture = assets["my-texture"].clone(); The reason for the .clone() is when I need different uv scale and offset per instance. If my method 1 and 2 are functionally equivalent and don't result in any additional vram usage or performance hit then I'm wasting my time passing around an array of loaded assets when I could simply instantiate a new texture with the same path that I know has already been loaded by AssetsManager. Can anyone shed some light on this? How do other people manage this efficiently?
  3. Hello! I looked through the documentation but wasn't quite sure if I missed how I might load textures for my model. Perhaps I could do this using the TextureAssetTask or ImageAssetTask? Basically, I was wondering if there was a way to accomplish this: BABYLON.SceneLoader.ImportMesh("space_frig", "Assets/", "gate.babylon", scene, function (newMeshes, particleSystems) { meshPlayer = newMeshes[0]; meshPlayer.position.y = 2; //meshPlayer.receiveShadows = true; //shadowGenerator.getShadowMap().renderList.push(meshPlayer); meshPlayer.checkCollisions = true; meshPlayer.ellipsoid = new BABYLON.Vector3(1, 1, 1); meshPlayer.ellipsoidOffset = new BABYLON.Vector3(0, 0, 0); meshPlayer.scaling.x = meshPlayer.scaling.y = meshPlayer.scaling.z = 0.3; meshPlayer.material.diffuseTexture = shipTexture; meshPlayer.material.bumpTexture = new BABYLON.Texture('Assets/gate_bump.png', scene); meshPlayer.material.specularTexture = new BABYLON.Texture('Assets/gate_specular.png', scene); meshPlayer.material.emissiveTexture = new BABYLON.Texture('Assets/gate_illumination.png', scene); }); using the AssetsManager. Are there any playground samples readily available? Thank you for the assistance!
  4. Hello, When I use Blender and apply texture to some object - I can select an image from any folder. However, when I import scene to the BJS - it looks for all images in the folder where *.babylon file is. Import example: var meshTask = loader.addMeshTask("someName", "", "assets/", "myScene.babylon"); As a result - *.babylon file contains filenames only and BJS looks for them only in "assets/" + image_name.png. If we want to store images (and other files?) in a different separate folders - how it can be achieved? Because putting all Blender source files and all related files in one folder - not comfortable at all I see that Blender has a field with a relative path - maybe it can be exported/used somehow?
  5. Hi guys, I think I have problem how masking in PIXIjs works. I have this image of black horse And I would like to use masking in order to give it the color. Here is my code so far: const app = new PIXI.Application({backgroundColor: 0xFFFFFF}) document.body.appendChild(app.view) PIXI.loader.add('assets/horse.png').load(() => { const horse_sprite = new PIXI.Sprite(PIXI.loader.resources['assets/horse.png'].texture) const horse_mask = new PIXI.Graphics() horse_square.beginFill(0xFFaaFF) horse_square.drawRect(0, 0, 130, 130) horse_square.endFill() horse_mask.mask = horse // I can see the horse and the square if I comment this out app.stage.addChild(horse_mask) app.stage.addChild(horse_sprite) }) It's not working, I can't see anything, not a horse nor the square. Thanks
  6. Hi everyone, I'm actually working on an app using phaser. I receive inputs from a device and i need to draw the last 200 points received each frame. I looked all day trying various solutions with bitmapdata and render textures but i couldn't find any way to draw all thoose points at once, each time i check with the firfox's canvas inspector i get to 202 drawings with something like 800 calls, i'm totally lost. Could any one help me? Thank you in advance!
  7. Hello, Below is a PG for a scene I'm having problems with: I have a list of material definitions in JSON which I load with assetsManager, once this is loaded.. I then load a .babylon file. We then loop through each of the materials in the JSON file and if the material name matches that in the scene, it then change that material. Problem is, the scene displays before all the textures have loaded.. more noticable if you throttle the speed. In an ideal world, the spinning loading screen would show right up to the point that everything is ready, but I can't quite work out what I need to do. Yes, the textures & AO map are large, but this is really just to illustrate the problem better. Any help would be gratefully received. Thank you
  8. Hello, When I view a model exported from Blender with textures applied I have darkening to the UV seams / borders when you view closer to a tangent. Example is here: My textures are power of 2 (1024 x 2048 px). Does anyone have suggestions how to avoid this? The problem disappears when I remove the .ambientTexture (AO / lightmap). Thank you.
  9. Hey, I have an issue with loading textures using an .obj and .mtl file. There's over 300 textures that need to be loaded in. I've checked the developer console in chrome and it appears that BabylonJS does indeed load them in, but they're still appearing as black textures in the view-port. Check below for image: I've seen that this is a common issue with .obj and .mtl files. Just wondering if anyone actually has a solution for this? Pete.
  10. Félix Flores

    long loading time

    Hello again. I continue develop a site with babylonjs, but I have a few problems. I have a scene created with blender, I generate the babylon file, the scene has some textures, I converted the textures to a ktx format, with the script in the babylon page. You can see the page in: I import the scene with: if (!BABYLON.Engine.isSupported()){ console.log("Motor no soportado"); return; } canvas = document.getElementById("renderCanvas"); engine = new BABYLON.Engine(canvas, true); // Asignamos los tipos de textura compimidos que se pueden usar var available = ['-astc.ktx', '-dxt.ktx', '-pvrtc.ktx', '-etc1.ktx', '-etc2.ktx']; var formatUsed = engine.setTextureFormatToUse(available); BABYLON.SceneLoader.Load(blendPath + "scene1/", "landScape.babylon", engine, function (newScene) { // asignamos la escena scene = newScene; // Creamos el entorno y las luces createSkybox("models/scene1/sky2.jpg"); createWaterMesh("waterMesh", imgPath + "waterbump.png", new BABYLON.Vector3(0, -0.08, 0), 6, getMeshListToRender()); createCamera(1, new BABYLON.Vector3(-0.23, 0.56,-2.73), new BABYLON.Vector3(0, 0, 0)); // arch camera createParticleSystem(); createLights(); createShadows(); createVolumetricLightEffect(); createActionsContollers(); // Wait for textures and shaders to be ready scene.executeWhenReady(function () { // Quitamos la imagen del cargador cuando termine el proceso de carga $("#loaderPadre").remove(); scene.createOrUpdateSelectionOctree(); // quitamos los calculos de los objetos para hacer mas eficiente la escena scene.meshes.forEach(function (mesh) { if("NO_") === -1) mesh.freezeWorldMatrix(); }); // Funcion para cuando se redimensiona la ventana $(window).on('resize', function() { engine.resize(); }); // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { // console.log(engine.getFps()); scene.render(); }); }); }, function (progress) { if( == 0) return; $(".textoCarga").text( ((progress.loaded/*100).toFixed(2) + "%"); }); In the callback function I return the loadign progress, but in some devices the progres is too slow, and When I already have 100% the scene still takes time to show, maybe i have doing some wrong. Somebody know, What I can do for resolve that? And other problem is the performance of the scene, I rremoved some elements and I have down the quality of the shadows, but the fps is 30, How I can increase the speed? the complete code is in: in the folder: entorno-models/code/proyBabylon/entorno/ here you can see the project. I hope you can help me. Thanks and regards.
  11. Hello guys . I have some issue whit image load texture. var panel = BABYLON.Mesh.CreateBox("panel", 0.2, scene); var panelMat = new BABYLON.StandardMaterial("panel1",scene); panelMat.diffuseTexture = new BABYLON.Texture("tpanel.png", scene); panel.material = panelMat; panel.scaling.z = 0.1; In developer tools always show me this : index.html:1 : Access to Image at 'file:///C:/Users/user/Desktop/trapbox/tvorbamodelov/tpanel.png' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access. babylon.js:3 : BJS - [00:16:44]: Error while trying to load image: tpanel.png. I am new in this and I am trying to understand how BABYLON.JS works. Thank you in advance for your answers .
  12. Hi, I have a box mesh I make for steps, but it will vary in size depending upon user input. Right now, when I add a texture, since the texture stretches to cover a face, it gets distorted on the different faces of the step. ( pic attached ) I'd like to specify a set amount (ex: 2 units width, 2 units height ) and have the texture tile with those dimensions regardless of it's mesh's dimensions. So if the mesh is 2 units high & 5 units wide, the texture will automatically tile once vertically, and 2.5 times across. I can workaround this by calculating the `uScale` & `vScale` based on the mesh / texture's size but is there any built in method to accomplish this? I'd rather not have to track the texture's dimensions & do this every time, if possible
  13. Hi everybody. Here I come again with a new question for this incredible community. By the way, I think it will be "super easy" for someone which a good knowledge of the BJS internals. The case is that, following with my current development (tap simulator) I'm now focused on the performance. My doubts are mainly about the proper use of the method "clone" of the "Texture" object. Doubt 1) Suppose you have a Standard Material, you create it following the usual way, something like this: matFoo=new BABYLON.StandardMaterial("Foo_Material",myScene); matFoo.diffuseColor=new BABYLON.Color3(0,0,0); matFoo.opacityTexture=textFoo; matFoo.emissiveTexture=textFoo; Note that we are using the texture (textFoo) on two channels, opacity and emissive. Is this effective in terms of resource economy or I must follow this other approach?: matFoo=new BABYLON.StandardMaterial("Foo_Material",myScene); matFoo.diffuseColor=new BABYLON.Color3(0,0,0); matFoo.opacityTexture=textFoo.clone; matFoo.emissiveTexture=textFoo.clone; Doubt 2) Now we have a similar scenario, when we must assign a previously created texture, but this time we want to assign it to a series of Particles: ... textSprite=new BABYLON.Texture("assets/textures/flarealpha.png",myScene); ... myParticles=new BABYLON.ParticleSystem("Particles",10000,myScene); myParticles.emitter=new BABYLON.Vector3(0,0,0); myParticles.particleTexture=textSprite; ... This time, as we have a lot of particles chances are that it is better to use textSprite.clone() in order to assign the sprite image to each particle, at last line of shown code. Isn´t it? Doubt 3) Last but not least. When you (as me) arrives at the conclusion that PBR materials are the way-to-go (in order to achieve a decent look with your CGs), you are going to use, among others, the environment channel (dds files in current 3.0 version of BJS). Here I have certainly a doubt and a thought. Going first with the last, I think the environment should not be a PBR Material property (as currently is), but a scene one, as certainly is very weird to think in a scene with more than one environment (?). Anyway, as at the moment this is not the case, and we have to assign the same value of "environment" for each PBR Material, we find ourselves setting time after time the same texture (dds file) in this way (please focus only on the reflectionTexture property): ... matTube=new BABYLON.PBRMaterial("MaterialPBR_Tube",myScene); matTube.albedoTexture=new BABYLON.Texture("assets/models/Tubo_BaseColor.png",myScene); matTube.metallicTexture=new BABYLON.Texture("assets/models/Tubo_Metalico_PBR.png",myScene); matTube.bumpTexture=new BABYLON.Texture("assets/models/Tubo_Normal.png",myScene); matTube.reflectionTexture=textEnvironment; matTube.microSurface=0.96; matTube.useRoughnessFromMetallicTextureAlpha=false; matTube.useRoughnessFromMetallicTextureGreen=true; // matTap=new BABYLON.PBRMaterial("MaterialPBR_Tap",_Scene); matTap.albedoTexture=new BABYLON.Texture("assets/models/mono/Manetas_BaseColor.png",myScene); matTap.metallicTexture=new BABYLON.Texture("assets/models/mono/Manetas_Metallic_PBR.png",myScene); matTap.bumpTexture=new BABYLON.Texture("assets/models/mono/Manetas_Normal.png",myScene); matTap.reflectionTexture=textEnvironment; matTap.microSurface=0.96; matTap.useRoughnessFromMetallicTextureAlpha=false; matTap.useRoughnessFromMetallicTextureGreen=true; // matSprinkler=new BABYLON.PBRMaterial("MaterialPBR_Sprinkler",myScene); matSprinkler.albedoTexture=new BABYLON.Texture("assets/model/mono/Resto_BaseColor.png",myScene); matSprinkler.metallicTexture=new BABYLON.Texture("assets/models/mono/Resto_Metallic_PBR.png",myScene); matSprinkler.bumpTexture=new BABYLON.Texture("assets/models/mono/Resto_Normal.png",myScene); matSprinkler.reflectionTexture=textEnvironment; matSprinkler.microSurface=0.96; matSprinkler.useRoughnessFromMetallicTextureAlpha=false; matSprinkler.useRoughnessFromMetallicTextureGreen=true; ... Here, as in the case of my first doubt, I'm thinking, obviously in using "matXXX.reflectionTexture=textEnvironment.clone();", but I don´t know if that is a way to enhance performance, and by the way if dds files are buffered in a way they can benefit of texture cloning mechanism. Ok, this is all, sorry for the length of the question and, as always, thanks in advance for your time! Regards.
  14. Hi everybody: We're trying to use the BJS Editor in order to have PBR materials, as the Exporter (from Blender) doesn´t let use them. Our problem is that the resulting .babylon file generated by BJS Editor seems to include the textures as embedded ("base64String" property), resulting so in a huge .babylon file. In parallel, a clever reusing of textures (as .dds) is not possible, as they are all embedded time after time, with each scene. Is there any alternative to this workflow? Thanks for your time. Best regards. Addendum (real .babylon file excerpt): . . . { "tags": "added", "directIntensity": 1, "emissiveIntensity": 1, "environmentIntensity": 1, "specularIntensity": 1, "disableBumpMap": false, "albedoTexture": { "tags": null, "url": "tubo_basecolor.png", "uOffset": 0, "vOffset": 0, "uScale": 1, "vScale": 1, "uAng": 0, "vAng": 0, "wAng": 0, "isBlocking": true, "name": "tubo_basecolor.png", "hasAlpha": false, "getAlphaFromRGB": false, "level": 1, "coordinatesIndex": 0, "coordinatesMode": 0, "wrapU": 1, "wrapV": 1, "anisotropicFilteringLevel": 4, "isCube": false, "gammaSpace": true, "invertZ": false, "lodLevelInAlpha": false, "lodGenerationOffset": 0, "lodGenerationScale": 0.8, "isRenderTarget": false, "animations": [], "base64String": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAEAAAABAACAIAAAB9wbNAAAAACXBIWXMAAAsTAAALEwEAmpwYAAAgAElEQVR4nOzbQQ0AIRDAwCM5/5YXCTyhyYyCGuiamQ8AA . . ." }, . . .
  15. Hello, I'm asking because I'm not sure of my understanding the PIXI.basetexture WRAP_MODES: For example: given one container, one texture (loaded with loader) and one smaller sprite, defining PIXI.WRAP_MODES.REPEAT should fill the whole container, but it doesn't. The following code shows a sprite inbetween the container without repeating, what I'm doing wrong ? see WRAPMODE_TEST_HERE Thanks in advance PS: using PIXI 4.5.5 loader.load((loader, ressources) => { var texture = ressources.rgba.texture; texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; var sprite = new PIXI.Sprite(texture); sprite.width = 312 sprite.height = 312 stage.addChild(sprite); ... })
  16. I've been following this issue on and off - mainly through @JCPalmer's posts on various threads. There is also a tutorial on the BJS documentation site (written by JCP?) That tutorial gives a little bit of code to let the .babylon engine know that compressed textures are available: var available = ['-astc.ktx', '-dxt.ktx', '-pvrtc.ktx', '-etc2.ktx', '-etc1.ktx']; var formatUsed = engine.setTextureFormatToUse(available); But I have a couple of questions: 1. The BJS Blender Exporter will take the textures I have used in Blender (.png or .jpg usually) and the .babylon file created will include those pngs and jpgs. So will those two lines of automatically use a .ktx version instead - over-riding the .babylon file? 2. " The texture must be encoded with the Y-axis flipped ". Flipped so that is where the X axis was ie, 90 degrees, or mirrored on the Y axis? 3. Is the device being used automatically detected so that a low level compression format (etc1)will be used on certain processors but a higher level format (astc) be used where appropriate? I've done some tests on compression with a simple tiling png texture (570kb) and compressed it using the Mali Compression Tool and the results are impressive - a .ktx file size of 129kb (etc1) cheers, gryff
  17. Hi, Is there any way how can ToB exporter export (embed) textures in .js file ? Do Blender have any options to achive that? Or are texture always separated files? Greetings Ian @JCPalmer
  18. Following my previous post now I'm trying to use compressed textures to see if that will improve the performance on ipad 2 / mini gen 1. We are using texture packer to create the textures? What are the recommended pixel format settings? I tried a few that look very bad. How can I load an atlas with the texture? The current method doesn't seem to allow loading an atlas and several textures: Thanks for the help!
  19. Hello, this is my first post, but visit the forum for a while and am thrilled. :-) I'm currently working on a Babylon project and I'm using a CustomShader (ShaderMaterial) for the Meshes. Now I wanted to use mesh.dispose(); and mesh.material.dispose(); to remove the textures, but it does not work. Whenever I check the size with scene.textures.length, it becomes more and more. What helps?
  20. Hello all, I found this tutorial for, what seems like, a good way to create terrain textures in blender: My question is about exporting this type of texture. If you don't watch the video, what is being done is a UV Map is being created, and a material with several tiled textures. There is also a stencil layer that masks layers of tiled textures. This seems to work great, since you get the benefit of a tiled textured. My questions are about how the current Blender Export to Babylon JS (4.6.1) works and if there is another way. I have not found this information yet. 1) When exporting this type of material with multiple textures, they seemed to get baked into a [filename]_[meshName]_TEXTURE.jpg. Not ideal, but this can work for now, but I am having troubles specifying the output resolution. Is there any documentation or tutorials on this? 2) Is there a way to achieve the method above without baking the textures? Such as blending different textures, if so is there documentation on this? I'm not currently trying to do infinite terrains, so I'm trying to work within this problem set at hand. Thank you, amorgan
  21. FREE Nice piece of work for your games Collection of over 50 FREE models from 3DModels-Textures (DEXSOFT-Games) production. Textures are downsized to 512*512px, ideal for mobile environments.
  22. Hello, After updating Chrome my projects all look off, and I quickly found out its because webgl involuntarily scales some textures up when they are a bit far from the camera. The curious thing is it only does it to select materials, and doesn't affect other materials. It happens in different versions of Babylon.js. Please see the chimney texture below: close: farther, notice the stones appear much bigger than the previous screenshot: Also the trees texture is wrapped wrongly because of the aforementioned scaling. Is this something that can be fixed in Babylon js? Thanks
  23. When I try using shaders with textures I end up with WARNING: there is no texture bound to the unit 0 Sometimes I get so many it just stops 'cos there are too many webGL errors. I think the texture is not fully loaded when its being accessed.
  24. Hello! I am trying to apply a texture to my simple character. The character is made up of multiple boxes, so I am using a Solid Particle System. Until there all is good but when I try to apply my texture with UV mapping, each face of the box seem to have its own orientation. I couldn't find a way to rotate the face, so I researched on how to rotate the UV mapping but I could only rotate it by 180 degrees (by switching the values of x,y,z,w). Here is the playground: Any help? I would like to avoid using multimaterials and submeshes and that would make this simple task even more ugly and complicated.
  25. I'm building my first Pixi game and working on basic services for asset management. My game should support few different resolution asset packs. Pixi handles this fine with resolution values and scaling. Next part I'm working on is to reload higher definition assets when required. Lets say that player starts game on 800x500 embedded window but presses full screen toggle. In this case I'd like to load HD assets on background and then replace the SD assets with newer ones once loading is ready. Before implementation I'd like to know if there is any existing mechanism in Pixi for this kind of operation? Or if not, should I know something specific about Pixi's texture handling to avoid some pitfalls? My current idea is as follows: When user moves to HD mode, trigger reloadAssets event, which kicks of my AssetLoader which loads the set of resources I require at the moment. Loader stores the names and textures to a map in AssetStorage -service. Once this is finished, an updateAssets event is broadcasted. Each Sprite can listen this event and they will update their texture from my AssetStorage -service. The reason I'm slightly insecure about my design is because I don't know exact inner workings of Pixi's resource management. For example does Pixi clear assets automatically, which might mess up my AssetStorage -service? What exactly I need to do when I reload new versions of assets especially regarding the old assets?BaseTexture seems to have update() function, can I sue it for this case? I'm reading about this stuff but decided to drop a question here since these are things I couldn't yet find any clear examples. Also, I'm afraid I'll implement something which is already done better in Pixi