Search the Community

Hi, I'm new to BabylonJS and 3D. I created a scene in Blender with a character. It has a single material, UV Map and texture. It works fine in BabylonJS but when I replace the texture with new BABYLON.Texture or new BABYLON.DynamicTexture (in my case), the new texture does not take into account the UV Map. I think I forgot something, but I don't know where to watch. (Sorry for my English ^^')

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!

Hi, have question regarding 3d max export. I created rectangle plane in 3d max. Than tried to add custom shader material to it, and realised that uv.y is out of [0-1] range. void main(void) { if(vUV.y > 0.5) { gl_FragColor = vec4( 1.0, 1.0, 0.0, 1.0); } else { gl_FragColor = vec4( 1.0, 0.0, 1.0, 1.0); } } After checking exported babylon file saw that uv.x is from 0-1 but uv.y 1-2 [0,1,1,1,1,2,1,2,0,2,0,1] Some scaling could be applied? Is that desired behaviour ? Thanks.

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.

hello everybody i have two textures for a mesh that import form 3dsmax, one texture is for uv0 ,the other is for uv1 how to use 2nd uv channel in babylonjs ? thanks very much (sorry for my English)

Are there any examples of how to apply a texture to an individual vertex as is described in this tutorial: http://babylonjsguide.github.io/advanced/Facets

I want to draw a texture on the line that user draws on the screen. Like a mouse trail, so I follow this tutorial. . The only thing that doesn't answer me is sending the custom uv to the shaders. I vaguely remember that in C++, I can create struct or something and the shader will know how to handle it. It seems that is not the case here. I can't even figure out how does "index" property in vertex shader gets there. Even so, I can't use the "index" approach as the line won't be full rectangle as in the example. Right now, I copied & pasted the entire lines2d classes and try to customize to be able to draw texture on there, but I don't know how to send the custom uv that I've calculated to the shader. Anyone can explain that to me? Or am I looking at this a wrong way?

Hi, I am not able to get the normals on an extruded surface right. In this playground http://www.babylonjs-playground.com/#53YWDR try clicking on the extruded shape. The normals on the cap are right. But the normals on the side faces are irregular. Also the reflection of light on the surface is a bit weird. Probably wrong uv. Any ideas on how to fix this? I want to have the normals and the light reflection behave like it would do on a regular cube created with Mesh.CreateBox Thanks

Hello guys, I was wondering if there is a way to keep using a mesh's UV map after changing it's material. My game currently uses a cell shader, so I have been giving meshes ShaderMaterials and then calling ShaderMaterial.setTexture() to give it the same texture as before. This successfully applies the cell shader and texture, but the UV map is lost in the process so the texture no longer lines up. I've looked through the mesh, material, submaterials, and texture's attributes and all i can find are u/v offset, scale, and Ang (which are 0, 1, 0 respectively), but in the .babylon file for the model I see an attribute caled "uvs" which I'm assuming is what I need to copy. Thanks in advance!

Hello, I have noticed that there is a problem with UV mapping, if I use a dynamicTexture on my mesh, imported from .babylon file. I am sure that my mesh has proper UV mapping, I have checked it by using standard texture. If I use normal texture on this mesh, everything is ok. If I use dynamic texture on BABYLON.Mesh, everything is ok. If I use dynamic texture on my mesh, I have seen something like that: I can't find an example on the playground with a mesh with proper UV mapping, so I have chosen the skull Playground: http://www.babylonjs-playground.com/#1NQC5D#3

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.

I'm using fabric.js to create a dynamic texture over a mesh. It works well except when the dynamic texture is moved through a UV seam. Does anyone know how I can get this working over a seam? Here's the playground http://www.babylonjs-playground.com/#9U086#118 If you drag the "webGL" text or rectangle around the cylinder you'll see it break when it hits the seam. I've attached a photo to demonstrate

Try to generate a custom mesh with material. this is what I did so far ~ http://www.babylonjs-playground.com/#1WGFZV#2 Appreciate if anyone could answer or correct my issue 1. How to create a double sided face ? tried backFaceCulling but don't seem to work. 2. I would like the triangle to display custom uv position, a image explain what I am trying to accomplish. I search on the forum and found out a similar problem here , but still uncertain the correct way to do it. thanks for the help ~ update : I think I posted this on the wrong section , should be under Question and answers , please help to modify , thanks

Hi people, I just added a new optional parameter, called invertUV (boolean, default false) to every ribbon based shapes : ribbon, tube, lathe, standard and custom extrusion. var rib = BABYLON.MeshBuilder.CreateRibbon("r", {pathArray: paths, invertUV: true}, scene); This swaps the U and V coordinates at geometry construction time. What is this for ? Imagine you've got two different meshes, say, a tube and a sphere and they share, for performance reasons, the same material/texture. You notice then that the texture is applied on to the tube the wrong way (horizontally, for instance) compared to what you expected, but the right way on the sphere. If you build your texture by rotating the image for 90°, you will have then a right textured tube but a wrong textured sphere. So instead of making two different images and to use then two different textures/materials to solve your problem, you can now just invert the UV on the tube and its texture will switched horizontally/vertically. [EDIT] : 2 tubes, one material/texture, 2 different orientations http://www.babylonjs-playground.com/#G6DG0#8

Hi guys! Recently I converted my .png textures to .dds using nvcompress and dxt1 as compression (don't need the alpha). For some reason the textures came out flipped on the horizontal axis. Setting the texture uAng property to PI fixes the issue, but I'm wondering where did I go wrong...? Cheers

I'm trying out the .OBJ loader and comparing it with the standard .babylon loader. I noticed that the .OBJ will show the UV seams. Does anyone know how to prevent this happening? I also get a bunch of console errors with .OBJ: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. Unable to compile effect with current defines. Trying next fallback. Vertex shader:default Fragment shader:default This is the .babylon loader (no seams) http://www.punkoffice.com/sandy/ This is the .OBJ loader (seams) http://www.punkoffice.com/sandy/?format=obj

Hi Everyone, I'm looking into this mesh = BABYLON.MeshBuilder.CreatePlane("mesh", { width: 10, height: 10, sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene); mesh.material = new BABYLON.StandardMaterial(null, scene); texture = new BABYLON.DynamicTexture("texture", { width: 10, height: 10 }, scene, false, BABYLON.Texture.NEAREST_SAMPLINGMODE); mesh.material.diffuseTexture = texture; context = texture.getContext(); context.fillStyle = '#F00'; context.fillRect(0, 0, 100, 100); context.fillStyle = '#00F'; context.fillRect(0, 0, 15, 5); texture.update(); // Trying to fix it like ( WIP ) mesh.material.diffuseTexture.uScale = 10 / mesh.material.diffuseTexture._canvas.width; mesh.material.diffuseTexture.vScale = 10 / mesh.material.diffuseTexture._canvas.height; On the internal the framework is forcing the texture to be power of 2 which is ok, but my problem is that the new canvas size is 16x16 instead of 10x10 but the way UV are mapped makes that the 10x10 size will only cover a portion of the plane instead of the full width/height. Some references on the code. DynamicTexture constructor https://github.com/BabylonJS/Babylon.js/blob/8220f1520a9faf4779ba7c0280514fb8f724b524/src/Materials/Textures/babylon.dynamicTexture.ts#L19 Engine.createDynamicTexture https://github.com/BabylonJS/Babylon.js/blob/eefc1faaf1261143658c3c07e7f86b8f22f65b6e/src/babylon.engine.ts#L1815 Example: http://www.babylonjs-playground.com/#1MCWZJ#0

I am trying to make a prism generator using BABYLON.CreatePolyhedron. Everything seemed ok until I applied a texture to it. http://www.babylonjs-playground.com/#AVCC8#6 Babylon is splitting the mesh into triangles like you would expect, but then it is failing to map the new UV points in a sane way. I was able to manually set the new UV values to make it work, and can just automate the process, but It is a bit of a hack. Is there an easier fix to this? Thanks in advance for any help

Hello! I'm having trouble figuring out the how to map specific parts of a larger image to specific polygons forming a complex shape created by through the PolygonMeshBuilder. After hours of researching the problem and finding only similar answers that either don't, or I can't figure out how to, apply to my specific situation, I'm turning to asking directly for help. I was given code that generates a map of the US, where each state is a separate object generated from an XML file using the PolygonMeshBuilder class. The assignment is to take a provided image displaying a map of the entire US, and have each state object pull it's specific portion of the map image to texture it. $.each(polys, function( index, value ) { var pts = $(this).find('outerBoundaryIs').find('LinearRing'). find('coordinates').text().replace(/,0 /g," ").replace(/,/g, " "); var groundMat = new BABYLON.StandardMaterial("red", scene); groundMat.diffuseTexture = new BABYLON.Texture("usa-physical-map2.jpg", scene); groundMat.specularColor = new BABYLON.Color3.Black(); var ground = new BABYLON.PolygonMeshBuilder(stName + "_" + index, BABYLON.Polygon.Parse(pts), scene).build(); ground.parent = state; ground.material = groundMat; //ground.material = new BABYLON.StandardMaterial("red", scene); //ground.material.diffuseTexture = new BABYLON.Texture("usa-physical-map2.jpg", scene); var ptCoords = ground.getVerticesData(BABYLON.VertexBuffer.PositionKind); console.log("ptCoords: " + ptCoords); var tCoords = ground.getVerticesData(BABYLON.VertexBuffer.UVKind); console.log("tCoords: " + tCoords);This is the relevant code that generates the ground of the state which is what is drawn to the scene. I've added some bits in effort to complete the task, but so far all I can achieve is displaying the whole (or as much fits on the state) map on each state. I am able to pull the coordinates of where each map cutout should be, but I cannot figure out how to take that information and actually apply it to a polygon in the object. Thank you in advance for your assistance.

Hello to all.I created an object in Blender and I applied the texture using UV coordinates. This is the result of the render in Blender: http://postimg.org/image/5tbxbzk1l/ Unfortunately, when I go to upload the files in the sandbox of Babylonjs this is the output: http://postimg.org/image/4gu8a3mm1/ This is the log export file .babylon in Blender: http://postimg.org/image/d8194d5x5/ Can someone please help me? Where am I wrong? Can you give me some suggestions. Files that I put in the sandbox are these: - casa_geografia.babylon - casa_geografia.log - layout_diffuse_texture.png I attach them here. Thanks in advance. Casa.zip Blender_Model_Casa.zip

Hi, I'm somewhat confused about how the UV coordinates are allocated for sprites - my understanding is they should be ranging from 0.0 to 1.0 in both x and y directions. However, with the code below: this.wavetest = this.game.add.sprite(this.game.width * 0.5,this.game.height * 0.5,'wave_test'); var fragmentSrc = [ "precision mediump float;", "uniform sampler2D uSampler;", "varying vec2 vTextureCoord;", "void main(void) {", "vec4 texColor = texture2D(uSampler, vTextureCoord);", "if(vTextureCoord.x < 0.1){", "texColor = vec4(1.0, 0.0, 1.0, 1.0);", "}", "gl_FragColor = texColor;", "}" ]; this.filter = new Phaser.Filter(this.game, null, fragmentSrc); this.wavetest.filters = [this.filter];I get the following result: What I expect it to do is show the pink for the first 1/10th width of the sprite, not some arbitrary amount exceeding half! Can anybody explain this to me? I'm ultimately trying to shear and animate an array of sprites to create a wave effect that will encompass other objects. Fiddling with the fragment shader seems the only option to mimic modifying the vertices of a quad without resorting to something like three.js... which I may have to if this doesn't work out....