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
    • 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 188 results

  1. Hi all, I tried to use several BitmapFontTexture, but I see all text have first font and second font haves some deformations var f1 = new BABYLON.BitmapFontTexture(scene, "fonts/bulletsNumbers32.fnt", "fonts/bulletsNumbers32_0.png", undefined, false, undefined, function() { new BABYLON.Text2D("123", { parent: canvas, id: "text1", bitmapFontTexture: f1, x:100, y: 100}); }); var f2 = new BABYLON.BitmapFontTexture(scene, "fonts/message.fnt", "fonts/message_0.png", undefined, false, undefined, function() { new BABYLON.Text2D("123", { parent: canvas, id: "text2", bitmapFontTexture: f2, x:100, y: 200}); }); If i load just one font separately then first font or second font looks ok. First font Second font
  2. Hi together, In the attached picture you see a part of a roll printing machine. The brown rolls should "print" on the white plane: the white plane is moving and the rolls are rotating. Each printing roll is independent and can print another texture. Here is a good video showing the functionality: youtube link As an example: - roll 1 is printing "TE" in red color - roll 2 is printing "XT" in blue color I have absolutely no idea how to do this... Maybe with animating textures (different texture for each roll, positioning along x-axis) and masks, so you can only see it after the roll? But the user decides when which roll prints, so there can be gaps after the roll. Is this even possible? Please ask if anything is unclear. Hopefully some of you have an answer. Best, Steffen
  3. After wrestling countless hours with a problem (as you do) I came to the conclusion that ShaderMaterial is broken in 3.0. More accurately, I can't get texture lookups to work in vertex shader. But they do work in Babylon 2.5 Add this line in any vertex shader and it wont compile: vec4 test = texture2D(textureSampler, uv);
  4. Hi guys! Found very usefull feature in three.js like ability to set texture as scene backgorund ( Is there something like that in Babylon? Ofcourse we can use two scenes, put texture to plane, setup orthogonal camera... but it's very uncomfortable
  5. var sprites = {};var loader = PIXI.loader.add('cloudstars',"imgs/cloudstars.jpg").load(function (loader, resources){ sprites.cloudstars = new PIXI.TilingSprite(resources.cloudstars.texture); }).add('star1',"imgs/star1.png").load(function (loader, resources){ sprites.star1 = new PIXI.TilingSprite(resources.star1.texture); }).add('star2',"imgs/star2.png").load(function (loader, resources){ sprites.star2 = new PIXI.TilingSprite(resources.star2.texture); }).add('star3',"imgs/star3.png").load(function (loader, resources){ sprites.star3 = new PIXI.TilingSprite(resources.star3.texture); }).add('star4',"imgs/star4.png").load(function (loader, resources){ sprites.star4 = new PIXI.TilingSprite(resources.star4.texture); }).add('ship',"imgs/ship_blue.png").load(function (loader, resources){ sprites.ship = new PIXI.Sprite(resources.ship.texture); }).add('shield_straight',"imgs/shield_straight.png").load(function (loader, resources){ sprites.shield_straight = new PIXI.Sprite(resources.shield_straight.texture); }).add('shield_edge',"imgs/shield_edge.png").load(function (loader, resources){ sprites.shield_edge = new PIXI.Sprite(resources.shield_edge.texture); }).add('title_ship',"imgs/title_ship.png").load(function (loader, resources){ sprites.title_ship = new PIXI.Sprite(resources.title_ship.texture); }).once('complete',function(){ var ready = setTimeout(accountSetup,3000); }).load() This seams to work but I figure it's not the correct way to do this as I kinda guessed my way through some of it. Will this cause a problem if I use this method to load all of my sprites into a standard javascript array for use later on? Talking about maybe 100 sprites including some tiling sprites for backgrounds. Also do I really need to use the "loader" in "function(loader, resources)" part? I don't seem to use it inside the function.
  6. I have image with 10 different animations and 10 frames by each. On stage i have for example set of 15 diffeent objects with animation. From time to time i have to change set of animation to another.One way to do this is to delete objects and create them once more with needed sprite animation. var moveClip1 = createClip(5); createClip: function (symbolIndex) { var image ='images.symbols'); var base = new PIXI.BaseTexture(image); var textures = []; for (j = 0; j < steps; j++) tempTexture = new PIXI.Texture(base, { x: * j, y: * symbolIndex, width:, height: }); textures.push(tempTexture); symbolClip= new PIXI.extras.AnimatedSprite(textures); } return (symbolClip) } Is it posible to change texture in existing object moveClip1 without recrete the object?
  7. Hello BJS devs, What are BabylonJS's plans for WebGL 2 support? Namely, how do you guys envision supporting webgl 2 and backwards compatibility? I'm not super experienced with game development but I've been playing around with a toy project and I need to use binary 3D textures. I've made some changes to BJS to support 3D textures but I'm not familiar enough with the codebase to think this is the correct way of doing this. Any feedback is much appreciated and I would be happy to make changes / open a PR if this seems like the correct approach. Also, if there is already a branch that supports this correctly, that would be even better Thanks!
  8. Hi all! I made map with buildings and trees. The map using 15 textures 512x512. What better for performance? Using 15 textures 512x512? Or combine all map textures in one big texture 2048x2048? and what the max size of the texture babylon is supports? Thank!
  9. Hello Pixi Developers and Users I would like first to present myself as a newcomer on the forum Im the developer of Sprite Basic Compiler Game Engine ( It is cloud-based game framework with Basic Scripts tha uses PixiJS as web gl renderer as long as PhysicsJS as physic engine and other librairies needed to create games like the great Kittykatattack libraries For a demo and future game i wish to write, i would like to create a tilingsprite, for an endless scrolling background, made of an array of textures What would be the best strategy to concatenate an array of textures, that might be of different dimensions, into a large tiling sprite, either in portrait or landscape. Would create a large tiling sprite make performances suffer or the part of the tiling sprite that is not currently displayed would be correctly cropped from screen display/calculations? Many thanks if you can light me on this specific Benoit
  10. I am having a really weird issue. I am creating a sprite from an image as follows: var grid1_texture = new PIXI.Texture.fromImage("whiteSquare.jpg"); Now this works fine and I am able to add this to the stage. I basically want to add all my images to a folder called resources. So I changed the code to this: var grid1_texture = new PIXI.Texture.fromImage("/resources/whiteSquare.jpg"); When I do this, I can see in Brackets editor that the link is being made however, the sprites do not get rendered on the stage. Please help!
  11. Hi, I'm having a serious problem with the memory usage, sometimes it hits 2.6 GB and never goes lower. I have to load some textures that vary from 10 MB to 40 MB for each map, and I'm sure that when I'm switching between the maps this textures are not being removed from the memory, so the problem grows every time you switch the Maps. To test the issue, I created a 186 MB image then I loaded it into PIXI and got a big black texture throwing a lot of WebGL errors, maybe because it's too big? Anyway, I noticed that the RAM consuption grows a lot on the task manager, so I started my attemps to remove it from there, but I could not do it. I tried to do the following: texture.destroy(true); texture = null; But I got nothing, so I did this (to throw everything away): for (key in PIXI.utils.TextureCache) { PIXI.utils.TextureCache[key].destroy(true); } But the memory still remains with the same size, so I tried to use the destroy(true) and after I run the GC, the RAM lowered a bit but I was still able to notice the 186 MB texture being loaded. What must I do to remove it from there?
  12. Hi, I'am noob I made texture creator tool using this tutorial ( ). It's cool. But I don't know how set animation to texture from above tutorial. Could you please let me know how set animation to texture from array string?
  13. Hey, I just upgraded to OSX Sierra and this bit of code does not work anymore on chrome : /* --- Skybox --- */ var skyboxObject = BABYLON.Mesh.CreateBox("skyBox", 10000.0, scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox" + sceneKey, scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(taskObject.ASSETS_FOLDER + "/textures/fantasy/Sky", scene, ["_px.png", "_py.png", "_pz.png", "_nx.png", "_ny.png", "_nz.png"]); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skyboxObject.material = skyboxMaterial; skyboxObject.rotation.x = Math.PI; I get this : Only one side of the cube. No error in the console. I will try to get more information on this, I have been swamped these past few days... sorry. This bug is not present in safari.
  14. Hi there, I'm fairly new to Babylon.js, having previously worked mostly on OGL and Apple's SceneKit (similar to Babylon) outside the browser. As such, I'm probably overlooking something absolutely basic, so please bear with me if I ask a stupid question. I'm tasked with bringing a 3D visualisation app to the web that until now only runs natively on a workstation. One task that I assumed should be simple involves materials. I can, and did, assign file-based images to materials (diffuse and specular maps), and this works really nice. But after looking through the extensive (thank you!) documentation, I'm slightly at a loss at how to achieve the following: The original (non-web) application usually takes a client-provided image (file, usually TIFF or PDF), and then applies a filter onto that image to generate the specular map. This generation process can be quite involved, and may include importing other client-provided imagery. I have written some javascript code that imports the file to a HTML 5 canvas, runs the filter, and then creates the JavaScript image object from the result as follows: function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } So far, so good. Now, for the life if me, I don't know how to get this image into a material property; at least not short of writing this as a file somewhere, and then loading it - this can create a ton of issues and I'd like to avoid that. There is brilliant support for a file-based image that take a string as the name, e.g.; materialMain.diffuseTexture = new BABYLON.Texture("textures/owl90.png", scene); But there is no way that I have found to do the same with a JavaScript object of type Image. I have looked at procedural textures that can be based on image files, but their setup appears a bit too inflexible (relying on cofig files) and complex/big calibre (animations, shader) for something that I assume to be basic. So, how can I load an image / html 5 context (basically an RGBA raster image) into a babylon texture? I can't be the first poor sod to try this - what am I overlooking? Thanks for any help, -ch
  15. I need to put thousands of shapes onto the stage and currently I am using PIXI.Texture. I draw a PIXI.Graphics object and then convert it into a PIXI.Texture using `RenderTexture.create().` Then I get a sprite from the texture. But when I draw 3000+ objects on my canvas I find the FPS drops from 60 to 30. If I draw 6000+ objects it slows down everything and my laptop's fan is roaring. I have found some article on saying that in pure canvas javascript we can just put different layers/canvas on the screen to draw like 1000 object in one layer. But what is the correct way to do this in PIXI?
  16. WebGL supports textures with base64 Data URLs, following the format "data:[mediatype];base64,[base64string]". However, when creating a texture with a data url in Babylon.js: var material = new BABYLON.StandardMaterial("0", scene);material.diffuseTexture = new BABYLON.Texture(dataUrl, scene, false, false, BABYLON.Texture.CUBIC_MODE);the browser console shows the message: Uncaught TypeError: Cannot read property 'replace' of nullIs there something I am doing wrong or is it a Babylon bug? I attached my full test code. Thanks! index.html
  17. Hello everybody! I am trying to make text plane fade animation with text drawn on texture. I created dynamic texture, then created a plane. Next I set texture as textPlane.material.diffuseTexture. Texture has hasAlpha set to true. this.textPlaneTexture.drawText(text, null, 50, 'bold 100px Roboto Mono', 'pink', 'transparent'); So there's text written on the screen with transparent background. Next I created fade animation like: var fading = new BABYLON.Animation.CreateAndStartAnimation('fade' + this.text, this.textPlane.material, 'alpha', 30, 30, 1, 0, 0, null, () => { this.textPlane.isVisible = false; }); But here's the problem when the alpha is changing then also backgorund is getting from black to transparent. Why is that? How to prevent changing background alpha, only the text is alpha change is expected. Here's the playground
  18. Is there anyway to load textures in pixi synchronously? Something like: var texture = PIXI.Texture.fromImage("bunny.png", onComplete);function onComplete() { var bunny = new PIXI.Sprite(texture);}I tried the following: var img = new Image();img.onload = onComplete;img.src = 'bunny.png';function onComplete() { var texture = new PIXI.Texture(new PIXI.BaseTexture(img));}But the code above gives me an error. Please let me know how I can make pixi work synchronously. Thank you in advance. EDIT: I also tried: but, it also gives me an error.
  19. I am trying to create a fragment shader via a PIXI.AbstractFilter to create a wave rippling effect to be applied to a background texture. I have already worked out the algorithm for the wave effect in JavaScript. What I am having difficulty doing is getting the data I need into the shader through PIXI. For my effect to work, I need to have a large Float32Array to keep track of wave heights and a texture containing the original, unaltered contents of the background image to read from in order to apply the effect of pixel displacement (light refraction). I've been doing a lot of searching and have come up with some partial solutions. I attempt to load my large Float32Array into the shader as a texture with type GL.FLOAT (with the OES_texture_float extension) and an internal format of GL.LUMINANCE and read from it. From what I can tell, my shader isn't receiving my data the way I need it to. Just as a test, I set gl_FragColor to read from my data texture, and instead of the solid black that should have appeared, it rendered a color from either the source texture or the texture of the sprite that the filter is applied to.If I weren't using PIXI, what I would try next is to use gl.getUniformLocation, but it takes the current program as its first parameter, and I don't know of a way to access that. The basic flow of my shader needs to go: Read From Array -> Calculate displacement based on value -> Render the current fragment as the color at x+displacement, y+displacement -> Get updated version of array This is my code in the constructor for my shader: ws.Shader = function(tex) { // GLSL Fragment Shader for Wave Rendering =; ws.flExt ="OES_texture_float"); var unis = { dataTex: { type: "sampler2D", value: }, canvasTex: { type: "sampler2D", value: }, mapSize: { type: "2f", value: [ws.width+2,ws.height+2] }, dispFactor: { type: "1f", value: 20.0 }, lumFactor: { type: "1f", value: 0.35 } }; var fragSrc = [ "precision mediump float;", "varying vec2 vTextureCoord;", "varying vec4 vColor;", "uniform sampler2D uSampler;", "uniform sampler2D dataTex;", "uniform sampler2D canvasTex;", "uniform vec2 mapSize;", "uniform float dispFactor;", "uniform float lumFactor;", "void main(void) {", "vec2 imgSize = vec2(mapSize.x-2.0,mapSize.y-2.0);", "vec2 mapCoord = vec2((vTextureCoord.x*imgSize.x)+1.5,(vTextureCoord.y*imgSize.y)+1.5);", "float wave = texture2D(dataTex, mapCoord).r;", "float displace = wave*dispFactor;", "if (displace < 0.0) {", "displace = displace+1.0;", "}", "vec2 srcCoord = vec2((vTextureCoord.x*imgSize.x)+displace,(vTextureCoord.y*imgSize.y)+displace);", "if (srcCoord.x < 0.0) {", "srcCoord.x = 0.0;", "}", "else if (srcCoord.x > mapSize.x-2.0) {", "srcCoord.x = mapSize.x-2.0;", "}", "if (srcCoord.y < 0.0) {", "srcCoord.y = 0.0;", "}", "else if (srcCoord.y > mapSize.y-2.0) {", "srcCoord.y = mapSize.y-2.0;", "}", /*"srcCoord.x = srcCoord.x/imgSize.x;", "srcCoord.y = srcCoord.y/imgSize.y;",*/ "float lum = wave*lumFactor;", "if (lum > 40.0) { lum = 40.0; }", "else if (lum < -40.0) { lum = -40.0; }", "gl_FragColor = texture2D(canvasTex, vec2(0.0,0.0));", "gl_FragColor.r = gl_FragColor.r + lum;", "gl_FragColor.g = gl_FragColor.g + lum;", "gl_FragColor.b = gl_FragColor.b + lum;", "}"]; ws.shader = new PIXI.AbstractFilter(fragSrc, unis); // Send empty wave map to WebGL ws.activeWaveMap = new Float32Array((ws.width+2)*(ws.height+2)); ws.dataPointerGL =;;, ws.dataPointerGL); // Non-Power-of-Two Texture Dimensions,,;,,;,,;, 0,, ws.width+2,ws.height+2,0,,, ws.activeWaveMap); // Send texture data from canvas to WebGL var canvasTex =;;, canvasTex); // Non-Power-of-Two Texture Dimensions,,;,,;,,;, 0,,,, tex.imageData); } I then attempt to update dataTex in the ws object's update loop: ws.activeWaveMap.set(ws.outgoingWaveMap); // WebGL Update;, ws.dataPointerGL); /* // Non-Power-of-Two Texture Dimensions,,;,,;,,;*/, 0,, ws.width+2,ws.height+2,0,,, ws.activeWaveMap); I'm sure that plenty of this isn't right, but I believe that I can sort things out once I can get to the point where I can actually access my data. Can anyone point me in the right direction? This is central enough to my project that I am willing to discard PIXI altogether if there isn't a way to implement what I am trying to do. Also, I am using PIXI via Phaser, if that makes a difference. Thanks!
  20. what if i only want to optimize only the texture in a scene?
  21. I want to process images on client side with JIMP (awesome library for image processing). I read png file with jimp, modify it with jimp, and then I've get stucked, because I don't know how to display it in pixi.js. The image read by jimp has bitmap property, and when I trying to create texture from it (with PIXI.Texture.from for example I gets errors). Thanks in advance!
  22. hi everyone. i'm developing 2d MMORPG. and image using jpg or png but this is slow and need more memory so it give many problems on mobile by overflowed memory so i'm consider to use texture compress.. but this is not easy because our game need supporting mobile (ios, android) DXT: supported by all desktop devices and some Android devices PVR: supported by all iOS devices and some Android devices ETC1: supported by most Android devices so i need auto-generater. anybody know this? like this thx everybody
  23. Hello, Does anyone have an example on how to stream video into a scene and apply onto an object as part of a dynamic texture? Also, in a recent post I had discovered that when loading many textures into an array, the last texture is often not loaded, and sometimes more than one texture is not loaded. My solution was to load a small texture that isn't used in the scene, and then all textures except the last "dummy" texture almost always loads correctly. Wingnut and others tried to duplicate this in the playground as I did, as was unable to reproduce. However, I recall using a babylon.js function which waits for all textures to load before continuing the script. I can't locate the scripts I used this, so if anyone can point me to these functions, I would be grateful. However, streaming video onto an object as a texture (dynamice texture) is most important - as I'll find my lod scripts on disk when I really put in the effort. It's simply that I need streaming video on an object as soon as I can figure it out, or as soon as one of the genius' on this forum provides an example. As always, thanks for any help you might provide. Cheers, DB
  24. Hi All, I would like to replicate what I've seen referred to in some other engines as ambient light; definition of which being - a light that evenly distributes across the whole scene; e.g. doesn't cast shadows, and no parts of the scene look darker / lighter than any other part. My main reason for this is that some of my 3D content will need to have light maps baked into the texture images (for other non-babylon related reasons) & I don't want the default babylon lighting to affect this light mapping. I noticed this topic asked a similar question: However the answer they got didn't seem to satisfy my requirements. So far - the closest solution I've come up with is: for (i = 0; i < newScene.lights.length; i++){ newScene.lights.setEnabled(false); } for (i = 0; i < newScene.materials.length; i++){ newScene.materials.emissiveColor = newScene.materials.diffuseColor; } However this assumes that all my materials are solid colour; which they won't all be; some of them will have image textures. Any advice would be greatly appreciated? Perhaps a shader effect might be of help? Thanks!
  25. Hi, I want to know if its possible to create a mesh using Blender and then to define its properties in the BabylonJS code. For example i want to create a wall using the cube in the blender and name it as WALL1. Then after loading the .babylon file generated the blender i want to define the color, texture and materials of the wall using the name of the wall WALL1. Thanks, Raghavender Mylagary