Search the Community

I'm porting over this shadertoy shader: https://www.shadertoy.com/view/XslGRr As you can see in `iChannel0`, in order to work correctly, the texture must have "VFlip" enabled. However, I do not see this option in PixiJS, nor can I find what it does.

Hey guys! I need to add a UID to my headers for getting Texture (video or images). Is there any way to do this in PIXI? For example: PIXI.Texture.from(testVideo, {header: { 'UID': 'XXX' }}); I also tryed PIXI.Texture.fromUrl but had the same result.

Hello! I have a questions about compressed textures. Questions: 1) Default extension chooser pick @*x multiply depends on window.devicePixelRatio. It works well for mobile, iPhoneX has window.devicePixelRatio = 3. But desktop chrome browser has window.devicePixelRatio = 1. So by default I will get the lowest resolution for desktop browser. Solution is to check userAgent and if it is desktop, force to pick the highest resolution. Are there any others fancy solutions? 2) I have source textures for 1920x1080 resolution, I am generating textures @3x(1920x1080), @2x(1280x720) and @1x(640x360). After texture loaded (doesn't matter for which resolution) I'm getting texture with size 640x360. At the end I have 640x360 coordinate system which is not precise, because all source textures was designed for 1920x1080. And if certain source texture has to be in position { x: 1000, y: 1000 } it means that after load on scene it position has to be { x: 333.333, y: 333.333 } but the image can be blurred because of that. If i will not switch off round pixels, position will be { x: 333, y: 333 } and the image will be shifted from original position. Solution is to make @1x(1920x1080), @.67x(1280x720) and @.33x(640, 360) textures or make original textures coordinates to be x%3 == 0 && y%3 == 0. Need some advice. thanks

Hello I saw two different methods of generating textures from graphics object in pixi 5 WebGL: graphics.generateCanvasTexture() renderer.generateTexture(graphics) How those methods differ from each others? And which one should I use in which cases? Documentation doesn't explain it exactly. Thank you in advance for help!

I couldn't seem to find a clear solution online that would apply to me anywhere but if this has been discussed elsewhere feel free to link me there. My game's fps dips after running for only a few minutes. Shortly after my os slows down because my game uses up all the memory of the browser. I suspect the culprit is how I currently draw sprites because my "game" currently only involves placing a few sprites/text on the screen. I have my custom game framework setup to only really use Pixi.js primitives like PIXI.Texture, PIXI.Sprite, PIXI.Text, etc. My Spritesheet class currently contains a single texture attribute that refers to the texture of the entire spritesheet. When it's time to take a single sprite from the Spritesheet, the Spritesheet object creates a copy of its texture attribute and creates a new PIXI.Sprite object using that copy. I create a copy of the texture because changing rect of the Spritesheet's texture attribute would affect all sprites that use that Spritesheet. Drawing involves only adding the PIXI.Sprite object to the stage and clearing just removes all children from the app stage (I don't currently use containers). Here's the method that creates a sprite from the Spritesheet: SpriteSheet.prototype.getSprite = function(index_X, index_Y){ let rect = this._getRectFromIndex(index_X, index_Y); let texture = new PIXI.Texture(this.texture); texture.frame = rect; return new PIXI.Sprite(texture); }; this._getRectFromIndex is just an internal calculation that returns the PIXI.Rectangle object for the frame Here's the draw method: Renderer.prototype.draw = function(child){ this.app.stage.addChild(child); }; And here's the clear method: Renderer.prototype.clear = function(){ this.app.stage.removeChildren(); }; I'm pretty sure creating new Textures/Sprites every frame and only clearing the stage is the cause so I'm wondering what's the best way to improve performance with what I've given. Would just iterating and destroying these textures in clear every frame suffice?

For my Pixi Project, i need to display 4 short numbers: 15, 30, 45 and 60 over 200 times on my stage. Also, on window resize - the text will get resized not based on linear window dimensions. Because of this, i think it is a good strategy to create textures for those 4 numbers and use them when i create the sprites. var minute = new PIXI.Sprite(minute_30_texture); My Problem: i am not able to create Sprites from PIXI.Text("30").texture; var texture = new PIXI.Text("30").texture; var sprite = new PIXI.Sprite(texture); the rendered sprite will not show anything. (using pixi 4.0.3) Anyone with the same problem?

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

Hello forum! I'm still new to babylon, but I want to go overboard and create a first-person-shooter with an AI and case-based reasoning (maybe with JADE and myCBR). But that's just the intro, now to the important part: For this goal I don't want to create everything by myself. I thought I could easily import a character model and a scene that fits as environment for a FPS. For test purposes I tried to import some meshes - skull.babylon and dude.babylon: https://www.babylonjs-playground.com/#JUKXQD (skull.babylon) https://can't find dude.babylon anymore I did it by searching in the example tab, opening the playground and downloading via Zip-Button. Is there another way to look for scenes and meshes to import (except demos)? And maybe a better way to save them. Bla bla bla here is my problem: As you can see in the picture, the dude-character doesn't has his texture. That happens to me for most textures I want to put on meshes. How can I add a texture properly to a mesh? Or why are some textures not shown right? Another Example that isn't working with some links: var ground = new BABYLON.Mesh.CreateGround("ground", 50, 50, 1, scene); ground.material = new BABYLON.StandardMaterial("groundMat", scene); ground.material.diffuseTexture = new BABYLON.Texture("https://previews.123rf.com/images/mansum007/mansum0071511/mansum007151100626/47766920-hei%C3%9Fe-lava-muster-illustration-hintergrund.jpg"); This is the primary the code I downloaded, i just repeated the import function for dude.babylon. https://playground.babylonjs.com/#VKVHP6 As always, i thank you in advance for your solutions or advices.

Hi All, Below is my project url please visit : http://111.93.53.134/digital/test/polygon/ Now my question is that i am creating a polygon at run time and add physics to polygon. When the polygon collides with matter body a horizontal redline is drawn and when i click on the down arrow button then another metal spring collides with polygon shapes then a blue line draw and you can drag the blue line. So i have to take the snapshot of only that polygon and redline which is beneath the polygon and that blue line which is being dragged and show them in the grid box 1,2,3,4. The polygons can be rotate as well by middle button when the spring metal is not collides with the polygon. I have tried several ways to figure this out but not able to fix the snapshot . I am attaching the image that what i actually want. And please tell me a way to make the polygon shapes more steady while rotation. Thanks, Raghvendra

What's the policy for textures, if they are not longer used they are released? They are released in case they are not in use and the memory usage becomes critical? I'm asking this since I'm trying to develop something like a VR walktrhough using panoramic spheres and if it is so big it could fill a low-end mobile device. Thank you in advance.

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

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.name] = 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?

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!

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?

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

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!

Hello, Below is a PG for a scene I'm having problems with: https://playground.babylonjs.com/#X6KVNY 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

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: https://imgur.com/a/SLgda 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.

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.

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: http://entornomexicano.com/ 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(mesh.name.search("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(progress.total == 0) return; $(".textoCarga").text( ((progress.loaded/progress.total)*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: https://github.com/flelix/entorno-models.git in the folder: entorno-models/code/proyBabylon/entorno/ here you can see the project. I hope you can help me. Thanks and regards.

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 .

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

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.

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 . . ." }, . . .

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); ... })