Search the Community

I have wrote my own mask fuction and I found a UV problem with shader const sprite = PIXI.Sprite.from(slottexture) const maskFrag = ` varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform sampler2D maskTexture; void main() { vec2 uv = fract( vTextureCoord ); vec4 originalColor = texture2D(uSampler, uv); vec4 maskColor = texture2D(maskTexture, uv); gl_FragColor = originalColor * maskColor.r; } ` const maskTexture = resources.mask.texture maskTexture.baseTexture.mipmap = false; const filter = new PIXI.Filter(null, maskFrag, { maskTexture: maskTexture, }); sprite.filters = [filter]; root.addChild(sprite); and it`s just render a quarter, I dont know why? and change the gl_FragColor = maskColor it`s still render a quarter, so I think it`s a uv problem!

See PG http://www.babylonjs-playground.com/#VFQCJR and take a look at console errors. Unable to compile effect: What I'm trying to do here is have the diffuse texture apply to the first set of UVs and the emissive texture apply to the second set of UVs (using emissiveTexture.coordinatesIndex = 2). I'm not sure if I'm doing this right (I couldn't find much documentation) or if it's a bug.

I have a big problem with screen tearing. Please have a look at the video. I am sorry I can't provide a playground for this (yeah I could maybe), because I am using a port of babylonjs together with the haxe language/compiler. I read much information about the problem in OpenGL forums too, but I did not get a solution. So maybe some 3D WebGL / OpenGL ES Guru knows, how to fix the problem. As you can see in the video, the mesh with the bricks and ladders is flickering and tearing like hell. The mesh is merged together from single meshes (planes) and a sprite atlas is used, so that I can take one material/texture for the whole level-mesh (the foreground). To get the well known sprite art or retro effect, I use Texture.NEAREST_SAMPLINGMODE texture.anisotropicFilteringLevel = 1 texture.wrapU = texture.wrapV = Texture.CLAMP_ADDRESSMODE I tried to adjust the uvs (read about pixels and texels), but I don't get it right. I think that the UVs are not correct and when the camera moves, the drawn texture tile is snapping between two pixels all the time, and that causes the bad tearing effect. But I don't know. Since I am using Babylonjs/Babylonhx, I am asking here for the first place. It's strange too, that it looks like the lines are jumping up and down. And maybe the uvs are right, but the screen tearing is a evil, that comes with the NEAREST_SAMPLINGMODE or the disabled anisotropicFiltering? Btw. I disabled mipmaps too. Hm. It would be easier to just scale the Textures up hm and use another sampling mode? Because now I get it, that not using mipmaps is a bad idea, because I have a little 3D stuff in there, like the sides and the floor. Yeah I know, there is another topic to this topic. But I didn't find the answer there. Yeah, that's great. I think I have the right solution now. Upscaled textures. But to be honest and just to learn how to do it right, is there another way how I can do this? Merging planes with different uvs together and using a very small texture (one tile = 32px) without having artefacts?

Never very confident in these things but in BJS2.5 shouldn't line 33527 uvs.push(col / subdivisionsX, 1.0 - row / subdivisionsX); in the VertexData.CreateGround function below be uvs.push(col / subdivisionsX, 1.0 - row / subdivisionsY); Fairly minor as I expect most grounds will be square. Then again the code may be correct and I have misunderstood something. VertexData.CreateGround = function (options) { var indices = []; var positions = []; var normals = []; var uvs = []; var row, col; var width = options.width || 1; var height = options.height || 1; var subdivisionsX = options.subdivisionsX || options.subdivisions || 1; var subdivisionsY = options.subdivisionsY || options.subdivisions || 1; for (row = 0; row <= subdivisionsY; row++) { for (col = 0; col <= subdivisionsX; col++) { var position = new BABYLON.Vector3((col * width) / subdivisionsX - (width / 2.0), 0, ((subdivisionsY - row) * height) / subdivisionsY - (height / 2.0)); var normal = new BABYLON.Vector3(0, 1.0, 0); positions.push(position.x, position.y, position.z); normals.push(normal.x, normal.y, normal.z); uvs.push(col / subdivisionsX, 1.0 - row / subdivisionsX); } }

Hi friends, I searched for a while, but because of the fairly common search terms I might have missed the info I'm looking for in which case I apologies. I want to use seperate/different UVs for diffuse and opacity textures in the StandardMaterial. Is this a thing that is possible, or would I have to modify the source? As always, thanks for using you're precious time to help a pleb like me. let mesh = new BABYLON.Mesh("face", scene); let vertexData = new BABYLON.VertexData(); mesh.material = mat; //set positions, indices, normals vertexData.uvs = normalTextureUVs; vertexData.uvs2 = alphaTexUVs; vertexData.applyToMesh(mesh, 1); let mat = new BABYLON.StandardMaterial('blup', scene); mat.diffuseTexture = new BABYLON.Texture('./thing.png', scene); mat.opacityTexture = new BABYLON.Texture('./alpha.png', scene); mat.uv = vertexData.uvs2; // <<<< This is what I'm looking for :)

Hi, I'm trying to create a textured box2d polygon. I thought this is a common problem, but the resources I find a rare. Anyway, my progress so far is pretty ok (screen attached). See for yourself: http://jsfiddle.net/georgie/x6yva6v0/2 There are actually two problems to solve. Problem A: Texturing a polygon (and don't use a mask) Problem B: (Edit: Already solved, see my response) Transform a group of shapes (rectangles & triangles) to a list of vertices forming a single polygon. Problem A (Texturing) The texturing part is nearly done. There is only one problem left: How do I create the UVs to make a texture repeating in the Mesh? My current version simply stretches the texture over the polygon: var newUVS = []var ww = texture.width;var hh = texture.height;for(var i = 0; i< verticesMesh.length; i+=6){ var x1 = verticesMesh[i]%ww/ww var y1 = verticesMesh[i+1]%hh/hh var x2 = verticesMesh[i+2]%ww/ww var y2 = verticesMesh[i+3]%hh/hh var x3 = verticesMesh[i+4]%ww/ww var y3 = verticesMesh[i+5]%hh/hh newUVS.push(x1,y1,x2,y2,x3,y3)} Is this because the default shader is not expected to repeat a texture? Problem B (shapes to vertices) Never mind! This is solved, see my answer. My staring point are three shapes generated during the tessellation process in PhysicsEditor (or RUBE) I have those source points, which are manually placed in PhysicsEditor to form a polygon: [134, 74,169, 110,386, 110,523,245,572,198,491,120,536,75] Those points are transformed to this group of shapes. You see two triangles and one rectangle. The crux: the source points are not accessible later in the code. There is just this list of exported shapes available. "shape": [ 491, 191 , 386, 202 , 523, 66 , 572, 113 ]"shape": [ 536, 236 , 134, 237 , 491, 191 ]"shape": [ 386, 202 , 134, 237 , 169, 201 ]To create the actuals mesh in PIXI, I want to use PIXI.Mesh and therefore I need a list of vertices. My three options:1. Iterate over those three shapes, triangulate if necessary, and create 3 instances of a PIXI.Mesh to form the original polygon. This is bad, I really don't want three instances where I could get away with a single one.2. Get the three shapes, mangle them, and create a large list of vertices by triangulate every rectangle with poly2tri. This result is a mess: http://jsfiddle.net/georgie/x6yva6v0/1 as the vertices are in a indeterminated order I guess.3. Just export the source points I already have in the physics editor and don't waste your time merging those shapes. Of course! I would be happy to do so, but I can't get PhysicsEditor to export them and I can't try it in R.U.B.E yet. Maybe I don't see the obvious at the moment? Anyone with ideas here? Thanks for reading!

let me explain with sample: vertiex : p1: 0,0,0 uv : 0.0,0.0 p2: 0,0,1 uv : 0.5,0.0 p3: 1,0,0 : face 1(p1,p2,p3) uv : 0.0,0.5 p4: 1,0,1 : face 2(p2,p3,p4) uv : 0.5,0.5 everything is ok to p4 so i want fill back face with out append more vertex so face 3 (p4,p2,p3) : i cant set any new uv face 4 (p3,p1,p2) : *** same problem * in babylonjs i can set uv per vertex but in .obj format i have more uvs per vertex

I have been doing more testing of the Automaton / ShapeKeyGroup exporting from Blender / Tower of Babel. I have added a material with a texture to a mesh called Cloth that also has shapekeys. I had the hardest time getting any material to show textures from export, even though they looked perfect in Blender with F12. Finally isolated why using the camera-anim model. The cubes with textures also had a UVS Map thing. Everything was fine when I added a UVS to a non-shapekey mesh, Ground. When I added a UVS to Cloth, the number of positions changed, but not the number of indices. Crucially, the length of positions no-longer matched the length of the raw shapekey, hence the length error. My programming skills are exponentially better than graphics skills. Is there something I did wrong? BTW, I added a new warning if textures are detected in a mesh, but UVS not found. Here is the log file with Cloth has a texture, but no UVS (it worked in Babylon, but solid color) Tower of Babel version: 1.0.0, Blender version: 2.69 (sub 0)========= Conversion from Blender to Babylon friendly Python objects ========= Python World class constructor completed processing begun of material: automaton.cloth-like processing begun of material: automaton.ground-like processing begun of mesh: Ground num positions : 4 num normals : 4 num uvs : 8 num uvs2 : 0 num colors : 0 num indices : 6 processing begun of mesh: Table WARNING: No materials have been assigned: num positions : 8 num normals : 8 num uvs : 0 num uvs2 : 0 num colors : 0 num indices : 36 processing begun of mesh: Cloth num positions : 1156 num normals : 1156 num uvs : 0 num uvs2 : 0 num colors : 0 num indices : 6534 WARNING textures being used, but no UVS found Key shape not in group-state format, changed to: ENTIRE MESH-Draped DRAPED raw key length: 1156 processing begun of camera: Camera processing begun of light: Sun========= Writing of scene file started ================== Writing of scene file completed ================== Writing of typescript file started ================== Writing of typescript file completed ================== Writing of javascript file started ================== Writing of javascript file completed ================== Writing of html files started ================== Writing of html files completed ================== end of processing =========Here is the log file, after adding the UVS to cloth (errors in python): Tower of Babel version: 1.0.0, Blender version: 2.69 (sub 0)========= Conversion from Blender to Babylon friendly Python objects ========= Python World class constructor completed processing begun of material: automaton.cloth-like processing begun of material: automaton.ground-like processing begun of mesh: Ground num positions : 4 num normals : 4 num uvs : 8 num uvs2 : 0 num colors : 0 num indices : 6 processing begun of mesh: Table WARNING: No materials have been assigned: num positions : 8 num normals : 8 num uvs : 0 num uvs2 : 0 num colors : 0 num indices : 36 processing begun of mesh: Cloth num positions : 5366 num normals : 5366 num uvs : 10732 num uvs2 : 0 num colors : 0 num indices : 6534 Key shape not in group-state format, changed to: ENTIRE MESH-Draped DRAPED raw key length: 21========= An error was encountered ========= File "/home/jeff/.config/blender/2.69/scripts/addons/io_tower_of_babel.py", line 272, in execute mesh = Mesh(object, scene, self.multiMaterials, nextStartFace, forcedParent, nameID) File "/home/jeff/.config/blender/2.69/scripts/addons/io_tower_of_babel.py", line 1065, in __init__ self.shapeKeyGroups.append(ShapeKeyGroup(group, rawShapeKeys, self.positions)) File "/home/jeff/.config/blender/2.69/scripts/addons/io_tower_of_babel.py", line 1513, in __init__ if not ShapeKeyGroup.same_vertex(keyA.vertices[i], positions[i]):ERROR: list index out of range========= end of processing =========

I know that Away3D had a way to uniformly scale the uvs of a mesh object. Can we do this in Babylon? I have a plane whose texture looks like a tiling image is too busy looking. Can I scale that up?