Search the Community

Showing results for tags 'textures'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Found 39 results

  1. 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: https://photonstorm.github.io/phaser-ce/Phaser.Loader.html#texture Thanks for the help!
  2. 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?
  3. Hello all, I found this tutorial for, what seems like, a good way to create terrain textures in blender: https://www.youtube.com/watch?v=p4Dt2S6uMGM 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
  4. 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
  5. 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. https://www.3dmodels-textures.com/FREESFCorridors
  6. 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
  7. 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. http://www.babylonjs-playground.com/#TRNYD#16 I think the texture is not fully loaded when its being accessed.
  8. 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: http://www.babylonjs-playground.com/#1ALQPZ#20 Any help? I would like to avoid using multimaterials and submeshes and that would make this simple task even more ugly and complicated.
  9. 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
  10. Hi everyone, I imported a mesh from Blender three times and I put different ID for each one and then I try to change the texture just for one mesh with: var newMesh = scene.getMeshByID("first_id"); newMesh.material.diffuseTexture = new BABYLON.Texture("colors/blue01.jpg", scene); But even if each mesh have a unique ID (I can see it with console.log(newMesh.id)) all the three meshes change their textures. How can I fix it to change the texture only for one mesh separate from others? Sorry for my english. Thank you all.
  11. I have a scene with two individual meshes. It looks like this: this.loadFiles("gras", (gras) => { var particleMaterial = new THREE.MeshPhongMaterial(); particleMaterial.map = THREE.ImageUtils.loadTexture("models/planets/gras.jpg"); particleMaterial.side = THREE.DoubleSide; this.mesh = new THREE.Mesh(gras,particleMaterial); this.loadFiles("rocks", (rocks) => { var particleMaterial = new THREE.MeshPhongMaterial(); particleMaterial.map = THREE.ImageUtils.loadTexture("models/planets/rocks.jpg"); particleMaterial.side = THREE.DoubleSide; this.rocks = new THREE.Mesh(rocks,particleMaterial); callback(this); }); }); Now I want to merge the meshes together. But how can i combine the textures? this.loadFiles("gras", (gras) => { this.loadFiles("rocks", (rocks) => { var geometry = new THREE.Geometry; THREE.GeometryUtils.merge(geometry,gras); THREE.GeometryUtils.merge(geometry,rocks); var particleMaterial = new THREE.MeshPhongMaterial(); particleMaterial.map = THREE.ImageUtils.loadTexture("models/planets/gras.jpg"); particleMaterial.side = THREE.DoubleSide; this.mesh = new THREE.Mesh(geometry,particleMaterial); callback(this); }); });
  12. I am seeking help to solve this issue that has been a real challenge to me. I have a scene with an interactive car. The model was updated in Blender 2.78 and Blender exporter 5.1.2. The body, doors, hood, and trunk are separate meshes that use the same material. Everything seem to be okay when I view the scene in the sandbox. (All the meshes, materials and textures seem to be just right.) When I view the scene locally, a couple of the meshes will have the correct material and textures applied to them while they would be missing from other meshes that use the same material. When I view the scene live online, all the the textures will be missing. I have attached a couple of screen captures to explain what I mean. Here is the link to the online scene. Here is a link to the Babylon Scene and Blend File download. Note: I applied new materials to the meshes via the html file. I am not sure if this is an issue. The scene does not load in Firefox 50.1.0 The scene works in Google Chrome, Microsoft Edge and Opera.
  13. Hi, everyone! So, we can put a different textures on each side of a "box" using multimaterials and submeshes (like this http://babylonjs-playground.azurewebsites.net/#T40FK). But I need to do it on a more complex mesh. In my case it's a wall (which is basically a box with a small depth) with a square-cuts therein for windows which I made using CSG.subtract method. There is an example of that wall, but with single material. I need at least two different textures (front and back side of the wall), but with that square-cuts it's impossible to set the parameters of submeshes. Is there any other ways to set different textures on each side? Sorry for my EngIish and I hope I've clearly explained the issue. Any ideas? Thank you!
  14. I'm putting decals on top of video textures and it works fine on a desktop browser. In iOS 10 I get some bad flickering on the decal. Its as if they have the exact same z-position. I have decalMaterial.zOffset = -2.5 so it should be different. If I change the video to a normal image texture there is no flickering. Its only happening in iOS and when there's a video playing. Funny thing is I get a flicker using an image texture if decalMaterial.zOffset = -2 Does anyone know how to prevent this?
  15. Hello everyone, First of all, thanks for all the amazing contents I managed to find here. It really helped me to understand better how BJS works. Background : I am much more a back-end developer, so excuse me if I lack (too much) knowledge about front-end or 3D modeling. Anyway, I learned some Unity and Unreal by myself and built several Unity applications (no games, regular mobile apps, Augmented Reality apps, ...) so I understand a bit how 3D modeling works (textures, UV maps, normal maps, materials, baking, ...). I am thinking about using BJS, but can't set a tech stack until I am sure that it can answer all my needs. That's why I started building some POCs with BJS. The need : To make it quick : I have an application where I want to integrate a frame with a single 3D object (with BJS). I want to interact with this object and change its look just by clicking on a button in the interface (in less than a second would be great). The objects will be multiparts : for example, the obj of a table would include a feet part and a top part. I want to be able to change the top part and the feet part textures/mats separately. I need the result to be in very high quality and to display fast enough (but since I don't want to build a full world, just a single object, I hope this will be OK). What I understood / What I tried : Thanks to some tutorials/samples, I loaded some models from .babylon or .obj files , in the Sandbox or in a local application. I managed to change mats for these meshes using some code of the "rabbit sample" (glass, metal, ... materials). If I'm not wrong, I'll be able to change textures (with a .jpg or .tga file), the behaviour of light (to create metalic, glass, wood or plastic behaviour), the color, ... with something like : mesh.material.diffuseTexture = new BABYLON.Texture(texture, scene); or var mat = new BABYLON.PBRMaterial("clay", scene); mat.cameraExposure = exposure; mat.cameraContrast = contrast; mat.microSurface = 0.06; mat.reflectivityColor = new BABYLON.Color3(0.5, 0.9, 0.9); mat.albedoColor = new BABYLON.Color3(0.5, 0.5, 1); Plus, if I understood well, I can "isolate" my mesh after it's instanciation with a "onSuccess" event, to be able to access it easily after loading the page (or loading a new item). I am planning to create a scene from scratch and add just a simple background and lights to make the object looks great by itself :). Here is what I didn't understood (or not sure about that) : Q1 : what's the good way to load an object and to identify every sub-part of it ? For example, if my (lovely and friendly) graphical artists build and export an .obj "object1" with 2 sub-parts called "obPart1" and "obPart2" with Maya or 3DSMax, what's the best way to interact with obPart1 and obPart2 after loading object1 in BJS ? Q2: Am I forced to play with many maps for one object, or can I obtain sufficient result using multi-part object and a BABYLON.PBRMaterial for each sub-part ? Q3 : What's the main difference between using a .obj or a .babylon ? I would clearly prefer to directly use .obj files (to stay closer to standards and avoid to use plugins) but would I miss something that I couldn't replace in my BJS scene (like a light...) ? Q4 : If I am smart enough (crossing fingers), I should be able to display a glossy wood and a not glossy one with only one .jpg texture, just by having 2 different BABYLON.PBRMaterial, right ? Am I wrong if I am thinking about doing the same thing to have a blue wood and a pink one (erm ... why not ?) ? Q5 : Last but not least : if I am smart enough (crossing fingers to death), I could build a back-office where I can upload .obj or .babylon, identify sub-parts of it, chose wich texture/mat can be applied on which sub-part, and use all of this in the "display" part of the application. I may be a dreamer (but i'm not the only one ...) but if I didn't miss some main specifications, I believe that this could be achieved with a clever architecture. Am I mad to think about that ? I (really) searched in this forum (and some others) and in the documentation, sorry if I missed the answers (or didn't understood the words I read). I am much more used to back-end technologies so I may have not been as efficient as I use to be, but I'll learn fast ;). Feel free to tell me if I understood some parts wrong. Thanks a lot for your experience and answers :).
  16. Fellow members we are now living in a virtual world (what's new). The earth as we know it no longer exists, dropped south and exits. Check out Playground Example 14 Height Map our earth has gone. Let us appeal to our gods for its return @Deltakosh we humble mortals pray for the return of earth.jpg
  17. Hi! So I'm ultimately trying to pick some meshes with textures that have transparency, but when they overlap, the transparent parts of the mesh still get picked. Playground: http://www.babylonjs-playground.com/#1UCP5L If you open up the console in the playground and click the 2 black circles in the center of the overlapping "impact" textures, you'll notice that it always picks the 1st texture (although you're clicking on 2 separate "visible" textures if you take transparency into account). I thought perhaps I could test to see if the texture color at the UV coordinates of the picked mesh is transparent, and if it was, I could temporarily mark that mesh as not pickable and pick again at the same location to get the mesh under it until I got something that isn't transparent (and then restore the isPickable state of everything). I still think that could work (although it seems terribly inefficient as I have to do several picks unnecessarily), but I frustratingly can't actually find a good way to get the texture color given the texture and some UV indices (obtained through the pickedInfo). Am I just missing something obvious? Is there not simply an analogous textureObject.getTextureColorAtUV(u, v) function? I'm also open to other suggestions to get more accurate picking with transparency taken into account. Thanks so much! Zack
  18. Create Textures from PIXI.Text

    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?
  19. Hi, I have ran into the issue that capped faces (CAP_START, CAP_END, CAP_ALL) will only display a diffuse color and not a texture http://www.babylonjs-playground.com/#RF9W9#370. The issue seems to persist at least on ExtrudedShapes and Tubes. My theory is that the face UVs aren't properly calculated. Anyone know of a solution or is this a bug? Kind Regards Swiftwork
  20. Im using Phaser 2.6.1 If I load the frame from a texture on a tileSprite it shows bigger than the graphic from the file. if I load the same frame on a regular sprite it shows the correct size. //this shows bigger than the real size from the texture file this.backLayer01 = this.add.tileSprite(0,0, this.game.width, this.game.height, "scene1", "nubes"); //this shows to be the same size as in the texture file this.backLayer02 = this.add.sprite(0,0, "scene1", "nubes"); On top is the sprite and bottom the tileSprite. I suppose they have to be the same size and have the same position. I'm not doing anything to them in other parts of the code. To load the texture I'm using this code on the preloader: this.load.atlasJSONHash("scene1", "assets/texturas/Escenario01_01.png", "assets/texturas/Escenario01_01.json"); Is this the normal behavior? How can I avoid it? Thanks!
  21. I am currently working on something which uses Pixijs and it's Loader to load textures. Because I am supporting different screen sizes, I construct everything that is tile-able big while the page is loading, and save it at least one tile bigger than the screen resolution. I do this because rendering 1 big texture is easier than 800 small textures. Now I wonder is there a neat way to add PIXI.Graphics objects or textures to the PIXI.loaders.Loader? - Thankful NexusNull.
  22. So I'm working on my game editor, and I noticed a weird behavior: after I play around with tiles and objects (eg draw different tiles, add trees rock etc. and then delete them, move objects around..), at some point PIXI will get into a state where its no longer able to load new textures. I don't preload all my object's textures, I load only for objects when I need them (if for example I want to put a barrel and don't have its texture loaded yet, I will load the texture especially for the barrel instance). When getting into the stuck mode, all future textures I load will never actually load and always be with valid = false, but no error will appear. I'm loading textures like this: PIXI.Texture.fromImage(texture_name_full, undefined, PIXI.SCALE_MODES.NEAREST); Am I doing something wrong here? Does PIXI have limited amount of textures it can handle? How to address / debug this issue? Thanks!
  23. Hello everyone! I'm almost finished my project, during project building i used sprites and spritesheets as separated images. Now i think that was not a good idea So now i want to pack my sprites and spritesheets to texture atlas. I found such cool program as texture packer and did all the things to pack my images. Now i have follow severities: 1) After loading textures from texture atlas previous keys, wich i used for sprites will be not valid and as i understand it impossible to rebind it to textures from atlas (i hope this is wrong ). So may be here exists some easier way then rewrite all the lines which contained previous sprite keys. 2) I used spritesheets for animation in my project and the second problem is i don't know how to make spritesheet using image inside atlas. Is it possible? Or should i slice all my spritesheets on frames and add it 1by 1? 3) Is it worth the efforts? Best regards and the for advance
  24. Hi All, I'm, still a newbie (-: I've got this sprite image, i want to wrap a box created using MeshBuilder.CreateBox with it, tried using this great walk throw http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors no success change the sprite structure? do this in a different way? Thank you!
  25. hello i am creating a website, and will be needing to have things like collada files being rendered on the page and will proberly have a lot of meshes and coding needed to be done, the site id for opensim and well basically its a virtual world, and i will need to be able to view avatars in the website and also be able to view products and also thinking of adding a shopping system where they can view what the avatar looks like with x on and so forth it systems are in meshes and textures, would this be possible with babylonjs?