Search the Community

Showing results for tags 'texture'.



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 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 247 results

  1. Particles dispose

    Hi! Have some problem, I create many particles systems in my game and very often delete them after first playing, but if I using the same texture in particle systems, then after first disposing of particle system the texture disposing too. And I should to cloning each one new texture, but it is bad for performance. How I can to create a particles systems with same texture but after disposing particles system do not dispose texture? Thanks!
  2. Tile Offset

    Hi everyone, I am trying to tile a floor but I would like to create a sort of "offset" in the tiling. I added pictures to best explain what I am trying to do. The first is what I am doing now. The second is what I would like. How can I do this? Thanks!
  3. Hey, I've never used any procedural textures. Where do I place the procedural texture and .fx files to reference? Thanks - I'm sure it's obvious. DB
  4. Hello, Would it be possible to somehow have textures mapped onto meshes and the direction / orientation of these textures dictated by the vertex colour? Assuming I have a piece of furniture: X = Red (the top & the long rails between legs) Y = Green (the short rails between legs) Z = Blue (the legs) I would then specify how the texture could be applied by using something (which doesn't yet exist) like: coordinatesIndex = vertexColor I wouldn't have a clue where to start and am happy to pay to have someone do this for me. Are offers of paid work allowed here? If not, I will amend this post. Thank you.
  5. Is it possible to make the environment texture follow the rotation of the camera?
  6. Mask issue with Webgl renderer

    Hi, All I'm relatively new to PixiJS and I'm facing an issue that I don't understand. # What I'm trying to accomplish : Basically I create a sprite based on an image and then I display a sort of black overlay over it. The idea is to let the user see through the black overlay thanks to a mask which will move according to user mouse movement. The mask texture is created using multiple graphics and filters rendered by a second webgl renderer. # The issue I'm facing Sometimes (~50% of the time) when I reload the page online, the mask is invisible. It's as if there isn't any mask applied to the black overlay whereas locally it's always working. Attached to this post you will find two pictures : The first one represents the black overlay with the mask which is not working. The second one represents the black overlay with the mask which is working. I'm using the latest release of PixiJS and the source code for this example can be found here : https://jsfiddle.net/vhynmdxh/ If someone has already solved this type of issue I would be happy to discuss with them :). Thanks.
  7. I'm using Blender exporter 5.5 I have a mesh that has a bunch of materials. I exported to Babylon.js format but all the textures got merged into one texture. I researched further and discovered that I had 5 materials but only 2 "UV Map" entries. I added a new "UV Map" entry for each material and assigned their textures to use that UV map, but it didn't make a difference. Is there something I'm forgetting to do?
  8. I was wondering whether or not it's possible to get the world/3D positions of different textures using the TerrainMaterial. Let's use the TerrainMaterial PG as an example: https://www.babylonjs-playground.com/#E6OZX#7 Now, let's say I want to place meshes wherever the rock texture is used on the ground mesh, programmatically and automatically. I don't seem to find any relevant references or functions in the object, and can't think of a proper way without loading the image separately and somehow map those colors to the ground positions.
  9. Is it possible to morph textures along with the mesh. In my video I'm using blend shapes from one shape to another but also morphing between textures. Just wondering if this is possible with Babylon.js
  10. Hi, I'm exploring picking options of babylon.js. Doc's example shows how to place the image (first plane) of shot on the second plane. However, if I shoot near the edge of the mesh - texture of the gun shot partly is on the air. Simple example (with white color instead of shot texture): https://www.babylonjs-playground.com/#YHGBXI#2 This looks like air is damaged, what is impossible. So I am thinking about replacing additional plane with additional texture, which will be on the existing one. I've found a way to get picked face ID, coordinates of globally picked point, coordinates of picked point on the specific face/texture - lines 26-28. But I can't find a way to place a non-repeatable (and with image's original size) secondary texture at that point. By "non-repeatable" I mean to draw it only once on a mesh, in the specific place, not 100 times all around it. Is that possible? This way if I shoot near the edge of an object - I'll see only part of the damage image, what is correct.
  11. I am attempting to apply a texture of a diffuse image of the Earth to a sphere and have the scene render with the Earth's north pole aligned with the body/local +Z axis. However, I can't seem to implement this. Below is a playground scenario I put together for the scene. I've attempted to achieve this with the following lines (26 - 33 of the playground scene). earthSurface.diffuseTexture.uAng = 0; earthSurface.diffuseTexture.vAng = 0; earthSurface.diffuseTexture.wAng = 0; earthSurface.diffuseTexture.uScale = 1.0; earthSurface.diffuseTexture.vScale = 1.0; earthSurface.diffuseTexture.wScale = 1.0; http://www.babylonjs-playground.com/#634KR1
  12. 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 http://pixijs.io/examples/?v=v4.6.2#/basics/video.js 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 http://pixijs.io/examples/?v=v4.6.2#/basics/video.js . ... function onPlayVideo() { // Don't need the button anymore button.destroy(); /// modify start // mp4 // (1) mp4 OK : video/audio played (#fvlivedemo.gnzo.com is my own server) // var texture = PIXI.Texture.fromVideo('http://fvlivedemo.gnzo.com/testVideo.mp4'); // (2) mp4 OK : video/audio played // var texture = PIXI.Texture.fromVideoUrl('http://fvlivedemo.gnzo.com/testVideo.mp4'); // HLS // (3) Not work : when play button pressed, loading m3u8 not started. // #http://184.72 ... is effective m3u8 stream // var texture = PIXI.Texture.fromVideo('http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8'); // (4) Not work : when play button pressed, loading m3u8 not started. // var texture = PIXI.Texture.fromVideoUrl('http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8'); // (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: 'http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8', mime: 'application/vnd.apple.mpegurl' }); 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
  13. How to cache Texture or BitmapData

    Hello, Can anyone share information how can I do manual caching of sprite or speed up rendering in general? If I have group with lots of small sprites, it's wise to convert it into single BitmapData and use it as texture to prevent recalculations. However, I have no clue how can I do that and what other methods Phaser may offer. Thanks everyone in advance for help
  14. Hi, I want to create a PIXI.Texture from a WebGL texture. Unfortunately, I have not managed this yet. My WebGL texture is created in the same WebGL renderer context as Pixi with "app.renderer.gl.createTexture()", this works. Then I tried to hang the texture on an existing PIXI.Texture: sprite.texture.baseTexture._glTextures[app.renderer.CONTEXT_UID].texture = myWebglTexture Even without the above line of code, my WebGL texture is inserted into the canvas element and always swaps the texture of the last sprite loaded in Pixi (Change-Texture.mp4). Unfortunately I cannot swap my WebGL Texture with a texture of a specific sprite :-( This approach has unfortunately not worked: Does anyone have an idea? Thank you for your support!
  15. 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: https://doc.babylonjs.com/how_to/how_to_use_procedural_textures as well as checked the playground example. https://www.babylonjs-playground.com/#24C4KC#17 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.
  16. Hi for all, i have this situation, do not know why my code for that material: function Nave(name, textureMat){ this.name = name; //after by constructor add the mes from .obj file. this.mesh ={}; this.material= new BABYLON.StandardMaterial(this.name+"_material", scene); this.material.diffuseColor = new BABYLON.Color3(0.8, 0.8, 0.8); this.material.specularColor = new BABYLON.Color3(0.05, 0.05, 0.05); this.material.invertU = -1; if(textureMat != null){ this.material.diffuseTexture = new BABYLON.Texture("texturas/"+textureMat, scene); } //...... } //in load of .obj file BABYLON.SceneLoader.ImportMesh("","", "naveTierraSolo.obj", scene, function (meshes) { naves[0].mesh=meshes[0]; carga.cargados +=1; naves[0].mesh.material = naves[0].material; //... }); naves[0] = new Nave("shipPlayer", "naveTierraSolo.png");
  17. Can we do something like Image.drawWarped (link goes to the javadoc of slick2d) with pixi.js? It gave devs the possibility to define where to render the 4 corners of an image with absolute x, y locations and it automatically skewed the image to fit in. I guess it just redefined the points of the triangles used to render the image or something like that. (I'm not that fit with gl, thats why I use pixi.js.^^) Thanks.
  18. 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
  19. Hello, Raycast TerrainMap and get MixMap %'s? CONTEXT: Raycast over a Terrain Map... and determine the type of terrain (floor, rock, grass, etc) where the Ray Intersects mesh. Looking at Mixed-Map-Materials and Facet-Data... QUESTION: is there a way, to get the MixMap through a Raycast Intersection? Or any suggestions on detecting floor, rock, grass... thx. Kind regards, UPDATE: using this playground, stepping into raycast... http://www.babylonjs-playground.com/#7CPS7 Found: results[0].pickedMesh, pickedPoint, collisionGroup, looking around... : ) .subMeshes.materialIndex?... DEMO-TEST: fork Multi-Map playground and add the touch raycast. : ) Worked perfectly - Clickable Multi Map playground (debugger on cast): https://www.babylonjs-playground.com/#E6OZX#7 looking around... AbstactMesh.collisionGroup? faceId? UPDATE: idea of how to do this, need to get the mixmap.png rgb at the location of the getTextureCoordinates()...greatest intensity wins. And... looks like Context2D can do that... (perhaps) https://www.babylonjs-playground.com/#1UCP5L#5
  20. Hey guys... When I load a texture using HDRCubeTexture as a reflectionTexture it is flipped the wrong way... Can I control that with some property that is serialized into the scene... Note: the texture is loaded from a serialized scene json file... is there I property I can set to flip the HDRCubeTexture the right way As Always pinging @Deltakosh and @Sebavan
  21. I am just learning blender and babylon. blenderpic.tiff shows what it looks like in blender, which is what I am trying to do. Babylon.tiff shows what it looks like in babylon, which is a mixed up mess. Getting frustrated and found the butterfly_shpere_TEXTURE.jpg, which I am guessing the export is creating and then using in babylon which is wrong. Again I don't know much, but would appreciate any help. In blender I am only using material, texture and the uv map editor. I would gladly provide other information if it would help, but don't know what is needed. blenderpic.tiff babylon.tiff speretext.tiff it works if the wings are all one texture and the body is just a color.
  22. Hi all, in order to improve the performance of a scene built dinamically, I'm facing this problem: is it possible to have one material, to which is applied one texture, using different uScale e vScale depending on the mesh to which that material is applied? I need this because I have a 3d model of a city with many street segments, each segment having quite different length from each others. Now, those segments are textured: if I use the same uScale for them all, the road texture would appear "stretched" or "shrinked" depending on the length of the segment on which the material is applied, while I want it to appear uniform. I can bypass this problem assigning one different material for every street segment and setting uScale according to its length, but in the end the amount of materials and textures grows dramatically and scene performance falls down at 3 - 4 fps. Any ideas of how reducing the number of materials? Those are the actual stats for a mid-sized city: Total meshes 7309 - Total vertices 170688 - Total materials 7309 - Total textures 3834 Any ideas on how to solve this? Thanks in advance, cheers
  23. I have a texture that's part of the .babylon file which loads and is displayed without any problem. However, when I dynamically change texture, including to the initial one, I get this strange swirly effect on the texture. I've attached an image to show the difference. You can also try it out here http://punkoffice.com/gilbert Select the "Gilbert" shirt and you'll see the difference. Does anyone know how to stop this effect? (I tried to attach an image but I keep getting "There was a problem processing the uploaded file" so if you want to see the problem you'll have to go to the URL above.)
  24. Hello, I'm new to Babylon.js, and not a very experienced programmer. I'm trying to learn Babylon.js, and I made a simple scene to run from firefox localhost. I'm using Xampp Apache, and all the files (my project html, babylon.js, and image file) are in the XAmpp htdocs folder. It seems I can't use an texture image. Any mesh having this texture is completely missing in the rendered scene. Otherwise, the babylon.js works just fine. I'm clueless, what am I missing. The folders and file locations are ok, the image works just fine within another scripts Here is my code included: <hmtl> <head> </head> <body> <Div id="Div1"> <canvas id="Main" width = "1920px" height="1080px"> </canvas> </Div> <script src="babylon.js"></script> <script> window.addEventListener("DOMContentLoaded", function (){ console.log("Loaded Dom content"); var canvas = document.getElementById("Main"); var engine = new BABYLON.Engine(canvas, true); var scene = createScene(); scene.render(); function createScene() { var scene = new BABYLON.Scene(engine); var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); camera.setTarget(BABYLON.Vector3.Zero()); camera.attachControl(canvas, true); var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 2, 0), scene); light.intensity = 0.9; var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene); var box = BABYLON.Mesh.CreateBox("box1",2.0,scene); sphere.position.y = 3; box.position.y = 1; var m1 = new BABYLON.StandardMaterial("material1",scene); m1.diffuseColor = new BABYLON.Color3(1,0,0); sphere.material = m1; var m2 = new BABYLON.StandardMaterial("material2",scene); m2.diffuseTexture = new BABYLON.Texture("paper.jpg",scene); // this is the problematic line of code box.material = m2; var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene); return scene; } }); </script> </body> <html>
  25. I try to build an endless Track for a small Game and currently I stuck on an textureproblem. https://www.babylonjs-playground.com/index.html#9HEBCE#12 I use the CreateRibbon Method to build a lane out of an array. When I have 200 segments I remove the one at the top and move the camera temporary to the first one so currently it just looks like the lane is just waving but in reality the camera is moving (you can see it when you remove the camera position setting at the bottom.) I scale the texture to fit the whole mesh but then it looks like the track is not moving I tryed it it the vOffset but that didnt worket out. What I need is some kind of "material/shader" which projects a texture always in the same way, no mater where the mesh is in the world so it would look like the track moves. Or maybe someone have an another Idea how to achieve this. Thanks