Search the Community

Showing results for tags 'texture'.

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 273 results

  1. Something where I'm not (yet? 🙃) comfortable in programming logic is these callbacks things. So I see in the texture constructor that the onLoad function sent us a callback... how can I use this thing to manipulate the texture object just after its creation? I've started a playground here: > how can I access to the texture to sets its name, for example, or even better, to apply it on the material only when the onload is called? Thanks!
  2. SamYan

    Texture caching problem

    Hi, I'm trying to load 4 images, and then generate array of random sprites, but i get In chrome console: Debug: GET http://localhost:8081/dist/symbol_2 404 (Not Found) BaseTexture.js:795 BaseTexture added to the cache with an id [symbol_1] that already had an entry addToCache @ BaseTexture.js:795 fromLoader @ Texture.js:478 textureParser @ textureParser.js:9 (anonymous) @ Loader.js:614 (anonymous) @ async.js:35 Texture.js:508 Texture added to the cache with an id [symbol_1] that already had an entry addToCache @ Texture.js:508 fromLoader @ Texture.js:479 textureParser @ textureParser.js:9 (anonymous) @ Loader.js:614 (anonymous) @ async.js:35 BaseTexture.js:795 BaseTexture added to the cache with an id [symbol_2] that already had an entry addToCache @ BaseTexture.js:795 My snippet: import * as PIXI from 'pixi.js' const symbols = [ { id: 0, img: PIXI.Texture.fromImage("symbol_1") }, { id: 1, img: PIXI.Texture.fromImage("symbol_2") }, { id: 2, img: PIXI.Texture.fromImage("symbol_3") }, { id: 3, img: PIXI.Texture.fromImage("symbol_4") } ]; export default class Symbol { /** * Generate random symbol tables * * @static * @param {number} reelsCount * @param {number} symbolsCount * @param {(symbolTables: Array<any>) => void} resolve * @memberof Symbol */ public static generateSymbols(reelsCount: number, symbolsCount: number, resolve: (symbolTables: Array<any>) => void): void { let symbolTables: Array<any> = new Array<any>(); for (let i = 0; i < reelsCount; i++) { let symbolTable: Array<any> = new Array<any>(); for (let x = 0; x < symbolsCount; x++) { let randomIndex: number = Math.floor(Math.random() * symbols.length); let id: number = symbols[randomIndex].id; let sprite: PIXI.Sprite = new PIXI.Sprite(symbols[randomIndex].img); symbolTable.push({id: id, img: sprite}); } symbolTables.push(symbolTable); } resolve(symbolTables); } } So, what's the wrong ? It's caching problem or? Thanks in advance.
  3. Hi, I’m new in Babylon.js, and trying to use it to create geometry that has animated vertices and an animated procedural texture. I’m animating the vertices in the vertex shader. For the procedural texture, I tried to follow the instructions: as well as checked the playground example. the problem with the example is that i can’t really find a complete implementation with the shader/config.json files. And i have a couple of basic questions as well. When creating a custom procedural texture with an external folder with the config.json and custom.fragment.fx files, is that the only fragment shader that can be used in the scene? Or can a BABYLON.ShaderMaterial be used additionally? I'm having a hard time grasping the concept of a ’fragment shader’ procedural texture VS a fragment shader as the last step of the webgl pipeline. Thanks.
  4. I'm loading textures via AssetsManager and saving references to them before the scene is rendered. When creating a CubeTexture I'd like to pass it references to the already loaded textures (via the constructor or any other way), instead of urls of the textures, If I pass to CubeTexture urls of the textures then they are being loaded all over again before being displayed, which I'd like to avoid. For instance instead of this constructor: constructor(rootUrl: string, scene: Scene, extensions?: string[], noMipmap?: boolean, files?: string[]); It'd be nice to have something like this: constructor(textures: BABYLON.Texture[], scene: Scene, noMipmap?: boolean); Does such a thing exist in one way or another or is it a feature request? Are the textures supposed to be loaded all over again when their urls are passed to CubeTexture after the textures have already been loaded via AssetManager from the same urls? Is it a bug? Am I doing something wrong?
  5. Bastl34

    Repeated Texture

    Hi, I want to achieve a repeated texture effect something like this: In plain OpenGL you can set the texture wrap to GL_REPEAT and multiply the UV's by a factor and your are done. In Pixi i've tried PIXI.extras.TilingSprite (with hundreds of objects) but this seems to be very slow on my MacBook. So i thought it would be possible by simply changing the UVs and set the texture wrap mode to repeat but this does not work: let resources = PIXI.loader.resources; let tex = resources[item.texture].texture; tex.wrapMode = PIXI.WRAP_MODES.REPEAT; //texture size is 128x128 let texRectangle = new Rectangle(0, 0, 256, 256); tex.frame = texRectangle; let pixiItem = new Sprite(tex); //using this instead I have a FPS drop from 60fps to 5fps let pixiItem = new PIXI.extras.TilingSprite(tex); With a little research I found this: It seems that texture coordinates are now based on UINT16. So a float based scale would not be possible Any hints on this? Thanks!
  6. mishelen

    Tilemap & Minimap

    Is there any way to render the tilemap layers and get the image? I just want to do a static minimap (it will not display changes in the world). Initially, I tried to do this with a camera that looks at the game world with the ignoring of unnecessary objects. It turned out, but so-so, you need to carefully select the scale that would not be render artifacts. At the moment, the mini-map is in another scene and accordingly it does not have access to the render of another scene, i.e. option with the camera does not work. So I tried using the built-in renderer and its screenshot function. As I did, at the initialization stage of the map, I create an additional game instance with the world size equal to the minimap (in other words I make the game in the game) and try to make its screenshot. At the result it comes with base64, but in my case it is invalid, and the expected size should be an order of magnitude greater. I suspect that because of the async of both the initialization of my map and the map itself in the map, this does not happen until the end. GameInGame code: const startMiniGame = tileMap => { const factor = 10; function preload() { this.load.image('tiles', tilesheet); } function create() { const mapData = Tilemaps.Parsers.Tiled('map', tileMap, undefined); = new Tilemaps.Tilemap(this, mapData); const { widthInPixels, heightInPixels, tileHeight, tileWidth } =; this.tiles ='maptile', 'tiles', tileWidth, tileHeight, 1, 2); MapService.Layers.forEach(([layer]) => {, this.tiles, 0, 0); }); this.cameras.main.setBounds(0, 0, widthInPixels / factor, heightInPixels / factor); this.cameras.main.setZoom(factor); } return { type: Phaser.CANVAS, width: tileMap.widthInPixels / factor, height: tileMap.heightInPixels / factor, scene: { create, preload } }; }; And initialization: // method of MapService createMiniMapSnaphot = tileMap => { // there I can catch error event then. // so, game.renderer.snapshot works but gives something wrong this.scene.sys.textures.on('onerror', (...args) => { console.error('onerror', ...args); }); const game = new Phaser.Game(startMiniGame(tileMap)); game.renderer.snapshot(image => { this.scene.sys.textures.addBase64('s', image); }); }; Perhaps someone who has encountered such a task or has some ideas?
  7. Dado

    Texturing Ribbon

    Hello everybody, At first,many thanks for all BJS devs and team behind this great framework! Q: How can be "irregular" ribbon textured,that texture is not stretched? (per example- simple leaf shape made of Quadratic bezier curves;texture is squashed on its tips..) Tried to find answer on my own; but had no luck till now, it could be cause of me and my capabilities; so,if one exist please do redirect me and I do apologize for asking it again.. Thanks in advance!
  8. Hello ! As I'm currently playing with some unsigned integer textures, I would love to see BabylonJS support them. I'll do a PR as soon as possible, adding some (all ?) constants about internal formats (for instance Engine.TEXTUREFORMAT_RGBA_INTEGER) and texture types (for instance Engine.TEXTURETYPE_UNSIGNED_SHORT), and updating the function to retrieve the internal sized format in order to be able to return new values as gl.RGBA16UI. Does it seem ok for you ? Moreover, we're still using Engine.TEXTURETYPE_UNSIGNED_INT to refer to both gl.UNSIGNED_INT (only available for depth textures in WebGL 1) and gl.UNSIGNED_BYTE texture types. I think we need to do a breaking change because gl.UNSIGNED_INT is now a valid texture type for unsigned integer textures in WebGL2 like RGBA32UI textures. Valid combinations of internal format, type and internal size format are listed here in table 3.2. Color-renderable and texture-filterable formats are listed here in table 3.13. This info is also gathered here. And this is a bit less exhaustive in WebGL 2 Specs. [EDIT] With WebGL2, specify the internal sized format will be necessary as some combinations of format and type don't lead to a unique internal sized format. For this purpose, we'll need to add internal sized formats as constants in BABYLON.Engine and we won't lean on _getRGBABufferInternalSizedFormat() function anymore. However, only a few combinations fail to give a unique result: - RGBA format + UNSIGNED_BYTE type - RGBA format + UNSIGNED_INT_2_10_10_10_REV type - RGBA format + FLOAT type - RGB format + UNSIGNED_BYTE type - RGB format + HALF_FLOAT type - RGB format + FLOAT type - RG format + FLOAT type - RED format + FLOAT type So we could just ignore them and return a default value in these cases, for now. [EDIT 2] Current type constants: private static _TEXTURETYPE_UNSIGNED_INT = 0; private static _TEXTURETYPE_FLOAT = 1; private static _TEXTURETYPE_HALF_FLOAT = 2; Suggested new type constants: private static _TEXTURETYPE_BYTE = 0; private static _TEXTURETYPE_UNSIGNED_BYTE = 1; private static _TEXTURETYPE_SHORT = 2; private static _TEXTURETYPE_UNSIGNED_SHORT = 3; private static _TEXTURETYPE_INT = 4; private static _TEXTURETYPE_UNSIGNED_INT = 5; private static _TEXTURETYPE_FLOAT = 6; private static _TEXTURETYPE_HALF_FLOAT = 7; private static _TEXTURETYPE_UNSIGNED_SHORT_4_4_4_4 = 8; private static _TEXTURETYPE_UNSIGNED_SHORT_5_5_5_1 = 9; private static _TEXTURETYPE_UNSIGNED_SHORT_5_6_5 = 10; private static _TEXTURETYPE_UNSIGNED_INT_2_10_10_10_REV = 11; private static _TEXTURETYPE_UNSIGNED_INT_24_8 = 12; private static _TEXTURETYPE_UNSIGNED_INT_10F_11F_11F_REV = 13; private static _TEXTURETYPE_UNSIGNED_INT_5_9_9_9_REV = 14; private static _TEXTURETYPE_FLOAT_32_UNSIGNED_INT_24_8_REV = 15; NOTE 1: As every user should use the public constants and not directly the private numbers the constants are bound to, we should be allowed to modify the order (FLOAT will be defined by 6 instead of 1 for instance). If you do not want to change the order of the three first constants already defined, just say it. NOTE 2: UNSIGNED_INT will not refer to UNSIGNED_BYTE anymore. Breaking change. [EDIT 3] Current format constants: private static _TEXTUREFORMAT_ALPHA = 0; private static _TEXTUREFORMAT_LUMINANCE = 1; private static _TEXTUREFORMAT_LUMINANCE_ALPHA = 2; private static _TEXTUREFORMAT_RGB = 4; private static _TEXTUREFORMAT_RGBA = 5; private static _TEXTUREFORMAT_R = 6; private static _TEXTUREFORMAT_RG = 7; NOTE 1: No 3 ? Did I miss something ? NOTE 2 : I personally guess TEXTUREFORMAT_R is not a good idea for 3 reasons: - It's confusing for people already used to WebGL who know it's gl.RED and not gl.R - It doesn't seem really instructive for beginners who will think R is the good naming - Beginners generally don't play with texture formats and types That's why I suggest to create and use TEXTUREFORMAT_RED in the future. And keep TEXTUREFORMAT_R for retrocompatibility. But once again, it's only a suggestion. Suggested new format constants: private static _TEXTUREFORMAT_ALPHA = 0; private static _TEXTUREFORMAT_LUMINANCE = 1; private static _TEXTUREFORMAT_LUMINANCE_ALPHA = 2; private static _TEXTUREFORMAT_RED = 3; private static _TEXTUREFORMAT_R = 3; private static _TEXTUREFORMAT_RG = 4; private static _TEXTUREFORMAT_RGB = 5; private static _TEXTUREFORMAT_RGBA = 6; private static _TEXTUREFORMAT_RED_INTEGER = 7; private static _TEXTUREFORMAT_R_INTEGER = 7; private static _TEXTUREFORMAT_RG_INTEGER = 8; private static _TEXTUREFORMAT_RGB_INTEGER = 9; private static _TEXTUREFORMAT_RGBA_INTEGER = 10; NOTE 1: Once again, we should be allowed to change the order of the first constants as nobody should use the private numbers directly.
  9. Hi, have weird issue on android webview (Note 8, Android 7.1.1) Have meshes, that are clones of 1 mesh, with different materials (PBRMetallicRoughnessMaterial). These meshes have 2 states enabled and disabled, and each state have different baseTexture. Also these meshes are set visible and hidden using isVisible. When state changes to enabled, texture is changed on material and isVisible is set to true, all works well except in android webview, where such error is thrown and mesh is transparent. If mesh visibility is not changed (all are visible all the time), there are no error. [.Offscreen-For-WebGL-0x72eb80ce00]GL ERROR :GL_INVALID_OPERATION : GetShaderiv: <- error from previous GL command [.Offscreen-For-WebGL-0x72eb80ce00]GL ERROR :GL_INVALID_OPERATION : glTexImage2D: <- error from previous GL command [.Offscreen-For-WebGL-0x72eb80ce00]GL ERROR :GL_INVALID_OPERATION : glFramebufferTexture2DMultisample: <- error from previous GL command [.Offscreen-For-WebGL-0x72eb80ce00]GL ERROR :GL_INVALID_OPERATION : glTexImage2D: <- error from previous GL command [.Offscreen-For-WebGL-0x72eb80ce00]GL ERROR :GL_INVALID_OPERATION : glFramebufferTexture2DMultisample: <- error from previous GL command [.Offscreen-For-WebGL-0x72eb80ce00]GL ERROR :GL_INVALID_OPERATION : glTexImage2D: <- error from previous GL command [.Offscreen-For-WebGL-0x72eb80ce00]GL ERROR :GL_INVALID_OPERATION : glFramebufferTexture2DMultisample: <- error from previous GL command thank you for any hint
  10. Hersir

    Baking shadow maps

    Hi, I have static objects and static lights inside my scene sou it would make sense to bake them to save resources,, anyone have done it? is there some workflow to generate them from scene (in 3d max or other tool). Thanks
  11. Hi! I'm hoping that someone else has tried this already. I want to reshape the texture in a projecting spotlight. I tried adjust the uScale and vScale on it and they did not work for me. I tried the same texture on a surface and obviously got the result I was looking for. I'm looking for an effect where I can reshape the spotlight into other shape than circle really. I think I figured out why it is shaped like a circle because of the math involved. My idea was actually to produce a video projector scene very much like this PG here (Hit Run after loading for first time, otherwise video won't play): I basically pasted in the video texture from elsewhere and thought to make a drive-in scene from that. Then the spherical light really would not do there. Help? Thanks!
  12. Hey all, I am trying to use a dds file as a cube texture. it works fine if i link to it in the usual way, but i am trying to instead load a file into my html5 page of which would then be turned into a cube texture as so - new BABYLON.CubeTexture(reader.result, scene); i have got this working with a normal texture as so - new BABYLON.Texture(reader.result, scene); so im wondering, is it the base64 encoding that is messing up the dds file? if so does anyone know a better way of doing this? the dds file im using is from the playground textures many thanks!
  13. I can apply a texture to a complete exported model (lets say a dodecahedron) from Blender and change its size with vScale and uScale. But now I'm trying change the size of only 1 face of the dodecahedron, is there a way or sample to achieve this? It would be necessary to apply the texture for each mesh by separated? Thank you all.
  14. Hello ! As WebGL2 comes with new texture formats, I decided to play a bit with them, and it seems to work well in pure WebGL2: (If it prints red, that means the RGB texture did work 🙂) I saw texture format has been added to createRenderTargetTexture function so I wanted to try it out. But whatever I do, I never achieve to create a RGB Render Target Texture. 😥 This code works to create a RGBA RenderTarget: This code fails to create a RGB RenderTarget: Framebuffer is incomplete. I already pulled the last version of BJS and added gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1) everywhere but it doesn't help much. I'm struggling with this, I don't understand where something is different from the pure WebGL2 version. I verified InternalSizedFormat, InternalFormat and TextureType and they're OK. If anybody has an idea... Thanks in advance 😊 PeapBoy
  15. Hi, First of all thank you for Babylon.JS, it is a wonderful library and a pleasure to code with it I am working on a game project and I need to display textures with a 'nearest neighbour' sampling mode (pixelated effect). Babylon.JS theoretically offers this possibility, but I could not manage to get it working. Here is a playground illustrating my modest struggle: Left cube's texture is created with the NEAREST_SAMPLINGMODE parameter, while the right one uses TRILINEAR_SAMPLINGMODE. In my browser (Chrome v38), there is absolutely no visible difference. I have seen a couple of threads about this on the forum but nothing that provides a real solution. Hopefully this thread will be able to do that. Of course there is always the possibility to multiply the size of the texture using a nearest neighbour interpolation with an image manipulation software, but I'd prefer not as it adds steps in the workflow and prevents doing big texture atlases. Thank you very much in advance
  16. ArcadixInfotech

    Texture in box2d rope/distance joint

    Hello, Is it possible to give a texture to box2d's rope or distance joint. I can see the joints in draw debug mode, but need something like an actual rope texture. Thanks
  17. yasuhiko

    basic demo "Video" for HLS source

    Hi, I am trying to draw HLS video stream over PIXI video texture on iOS safari browser (iOS 11.2) referring but not succeeded. (Sorry for poor English as I am Japanese) When I set mp4 video as source, the demo code worked over iPhone + mobile safari (OS: 11.2). But when I set url of HLS (m3u8) and tapped play button, video did not drawn. I tried some change but not succeeded to play HLS stream over PIXI video texture. Below is my code, modified part of . ... function onPlayVideo() { // Don't need the button anymore button.destroy(); /// modify start // mp4 // (1) mp4 OK : video/audio played ( is my own server) // var texture = PIXI.Texture.fromVideo(''); // (2) mp4 OK : video/audio played // var texture = PIXI.Texture.fromVideoUrl(''); // HLS // (3) Not work : when play button pressed, loading m3u8 not started. // #http://184.72 ... is effective m3u8 stream // var texture = PIXI.Texture.fromVideo(''); // (4) Not work : when play button pressed, loading m3u8 not started. // var texture = PIXI.Texture.fromVideoUrl(''); // (5) Not work : when play button pressed, loading m3u8 started and audio play started. but video is not drawn on canvas. let baseVideoTexture = PIXI.VideoBaseTexture.fromUrl({ src: '', mime: 'application/' }); var texture = PIXI.Texture.from(baseVideoTexture); /// modify end // create a new Sprite using the video texture (yes it's that easy) var videoSprite = new PIXI.Sprite(texture); ... Please help/guide me regarding right way/manner to play HLS stream over video texture of PIXI. (i.e. how to fix above code) entire HTML which I modified is attached (pixi_video_hls.html) If more information needed for answer, let me know. Thank you in advance. pixi_video_hls.html
  18. Doug

    Hi Rich.  @rgk mentioned that you might be able to please add a "patron" badge to my forum profile?  Thanks very much!

  19. Hello to all of you! I want to thank everyone for support on my previous issue, especially @JohnK. At that time I had(and still have because of trouble of applying his suggestion) one structural problem with performance that I am caring for a longer period of time. But that is out of the scope for the moment being because I had one little problem which troubles me a lot. Essentially from time to time when zooming out(on the maximum level) and panning the camera I have the horrendous flickering which is even more obvious than on demo due to fact that I also add transparent hole(I have not added it here for the sake of the code complexity). Issue can be seen here: From my understanding the issue is happening because of some sort of weird collision between two textures ground and location one. But I really cannot afford to do any positioning change. Is there any other, more elegant way to resolve this problem? Probably I am missing something really trivial. Thanks to all
  20. simple_life

    Scintillating texture

    The loaded texture is sometimes absent as the camera moves
  21. On desktop I have a clear view of how it works, so I will start by asking how textures are manage on mobile hardware (tablet or smartphone) but of course if someone wants to ask something about desktop, this topic is open. We assume that all textures size are obviously in power of two. If I have textureOne, jpg file, and textureTwo which is the same but in png, do they take the same amount of ram once loaded ? If yes, using for example tga will change only the download time and not the performance ? Could uncompressing a texture kill some FPS ? (example : jpg file to RAM ; png file to RAM) Is Mobile hardware have VRAM or only RAM shared between CPU and GPU unit ? It depends of the device I supposed ? Is there a way to use mipmaps or is this specific to dds format ? Thanks
  22. waverider

    texture flickers[solved]

    Hy y'all, the texture of the box flickers when i move the camera around, but i still want the box to overlap how can i fix this?
  23. I need to generate some textures on the fly, bassicaly when map is loaded I generate several dozens simple gradient textures. I found here: (last comments) that this is possible to use just one helper canvas to do this but after reading some other sources I am a little confused how to handle destroy of this textures. At the moment I have some helperCanvas with 2D context to generate my textures and then I do: // This create texture from helper canvas as I understand var texture1 = new PIXI.Texture(new PIXI.BaseTexture(helperCanvas)); // This one "save" texture in GPU memory if I understood correctly. renderer.textureManager.updateTexture(texture1.baseTexture); // Create new sprite from this texture var sprite = new Sprite( texture1 ); I do this in loop to create all needed sprites but I am not sure what should I do when map is unloaded, when I don't need these textures. Is any action needed or GC can handle this? Should I remove them manually from textureManager by some method or call destroy on sprite?
  24. I'm at my wit's end. I've tried across several game engines and drawing programs now, tried every little setting and have really read everything there is to read. I just cannot get a sharp appearance on any asset as soon as they are rendered in an HTML Canvas or WebGL. In desktop applications, they look fine. Here, for example, is a good asset - it's sharp and clear and as it as a PNG, it should scale down nicely (I need it about 25% of this size): As soon as I load it as a sprite via Phaser, I get a result like this (don't mind the money-man): It's blurry and it's even worse when scaled down (here scaled to 0.1x, 0.1y): I'm on an iMac, so maybe it has to do with the retina display, but I am getting similar results on lower quality monitors as well. What am I doing wrong? When I load other assets in, such as the ones used in the Phaser 2 tutorial, they look crystal clear. I feel like there's something really simple that I am missing. :-( My old (finished) build was in Unity 2D, and I was having the exact same issue. This is why I swapped to Phaser instead of using the Unity WebGL build. I've tested on both engines, and some assets render perfectly (particularly, pixel art renders perfectly. Other, more vector-like assets render poorly). Really hope there's somebody here who can help. :-( Yolanda
  25. Hi Guys, I recently using the last version of PIXI.js (1.5.1) and we are dealing with some problems with particular texture (that texture is in another host). Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at XXXXXX may not be loaded. To load the texture i'm using the asset loader and setting the crossorigin property by true. // assetsToInitloader has the url to the texture var preloader = new PIXI.AssetLoader(assetsToInitloader); preloader.onComplete = onAssetsInitloaded; preloader.crossorigin = true; preloader.load(); The same code is working fine on Safari, and having problems on Firefox and Chrome. Thanks in advance, Cheers!