Search the Community
Showing results for tags 'displacement map'.
Found 4 results
-
Hi, I'm using the DisplacementFilter in Pixi.JS v5. I would like to understand exactly how displacement map images displace pixels. As they are normally grayscale, I'm wondering what the color value (0-255) denotes for a given pixel. If anyone can explain this to me or link an article explaining it, I would be very grateful. Thanks!
-
I am trying to constantly update the source of my PIXI.Sprite(resources.image.texture) to match the source of the image that has entered the viewport, while keeping the same displacement map running constantly. Please tell me if this is not possible, or if there is a better solution. If you need more information please ask and I will happily provide it to my best ability. I am new to Pixi.js too so some code examples would be great. Thank you! I will post the relevant html and javascript below to my most recent (failed) attempt. Here is the link to said project. Here is the link to a semi-working version where the background is not changing as an example of what the displacement map should look like. HTML: <body> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section"> <img src="book5.png"> </article> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section"> <img src="book5.png"> </article> <article class="image section"> <img src="book1.png"> </article> <article class="image section"> <img src="book2.png"> </article> <article class="image section"> <img src="book3.png"> </article> <article class="image section"> <img src="book4.png"> </article> <article class="image section" section> <img src="book5.png"> </article> </main> <section class="one"> </section> JS: const sectionTag = document.querySelector('section') const articleTags = document.querySelectorAll('article') const bodyTag = document.querySelector('body') const pixels = window.pageYOffset const pageHeight = bodyTag.getBoundingClientRect().height let originalImage = null let originalImageSource = null sectionTag.innerHTML = '' // Set up a pixi application const app = new PIXI.Application({ width: 2000, height: 2000, transparent: true }) // Add the pixi application to the section tags sectionTag.appendChild(app.view) // Make image equall nothing let image = null let displacementImage = null let displacementImage2 = null // Make a new loader const loader = new PIXI.loaders.Loader() // Load in our image loader.add('image', originalImageSource) loader.add('displacement', 'displacement3.jpg') loader.add('displacement2', 'displacement1.jpg') loader.load((loader, resources) => { // Once the image has loaded, now do this image = new PIXI.Sprite(resources.image.texture) displacementImage = new PIXI.Sprite(resources.displacement.texture) displacementImage2 = new PIXI.Sprite(resources.displacement2.texture) image.width = 2000 image.height = 2000 image.interactive = true image.anchor.y = -0.1 displacementImage.width = 1000 displacementImage.height = 1000 displacementImage2.width = 1000 displacementImage2.height = 1000 displacementImage.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT displacementImage2.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT image.filters = [ new PIXI.filters.DisplacementFilter(displacementImage, 200), new PIXI.filters.DisplacementFilter(displacementImage2, 50) ] // Add the image to the app app.stage.addChild(image) app.stage.addChild(displacementImage) app.stage.addChild(displacementImage2) // add rotation app.ticker.add(() => { displacementImage.x = displacementImage.x + 0.5 displacementImage2.x = displacementImage2.x - 0.5 }) }) articleTags.forEach(article => { document.addEventListener("scroll", function () { if(article.offsetTop - 200 <= pixels){ originalImage = article.querySelector("img") originalImageSource = originalImage.getAttribute("src") } }) }) -
Hi, I am trying to find out if it is possible to adapt this 'sphere.applyDisplacementMap ("/ assets / amiga.jpg", 0, 1.5);' of this example https://www.babylonjs.com/demos/displacementmap/ on an object create in blender with the adapted uvs. To make it simple I would like to be able to change the shape of my object with a heightmap. I do not need to animate it. I do not find a track to create this effect so I ask the question as to whether it is really possible. Thank you
-
Hi All I am experimenting with displacement mapping and have had a degree of success, but have encountered some issues that the community might be able to help with. Looking at the <shape>.applyDisplacementMap() function it can be seen that it does not support the ability to control how a displacement map texture is applied to the shape. Therefore, if you create a complex 3D model that requires greater control over how the displacement map is applied (i.e. tiled) to it then unfortunately you will encounter problems. I started out by creating a 3D model and then applying texture, bump and displacement map to it. I used the standard applyDisplacementMap() function which produced the following result: http://www.babylonjs-playground.com/#1PLEVL#1 The above example illustrates how the displacement map is being stretched across the entire geometry of the shape – which is not what I want. I want the ability to control how the displacement map is tiled across the geometry of the shape – similar to that of uScale & vScale for bumpTexture: e.g. mat2.bumpTexture.uScale = 5; mat2.bumpTexture.vScale = 9; I looked at the underlying functionality of applyDisplacementMapFromBuffer() in an attempt to try and extend it to have greater control over the tiling – but TBH I am not understanding how some of the key lines of code are working. So, I decided to take another approach. Before I explain my solution “I KNOW” this is not a scalable solution and not efficient on many levels. However, it enabled me to apply a tiled displacement map to small geometry shapes – this allowed me to envisage what shapes will look like when displacement maps are applied correctly. NOTE: the main issue with the approach I took is memory allocation – i.e. you will hit out of memory if you try and apply my method to a large 3D model mesh. The interim solution I created is to create a displacement map texture (image) that is sized and tiled appropriately such that I can apply it to the 3D model geometry using the applyDisplacementMapFromBuffer() function. The solution I created is below: http://www.babylonjs-playground.com/#1PLEVL Explanation: line 94: obtains the displacement map image (not tiled) line 97: creates a tiled displacement map image (mirroring that of the bumpTexture uScale/vScale) line 99: apply tiled displacement map to 3D mesh line 101~102: free resources (because line 97 is very resource intensive!) The above solution generates nice results as per the PG example – but this is not something that is scalable (the right approach is ofcourse to tile a smaller texture across the geometry of the 3D mesh). I am hoping (praying) that one of the Babylon JS arch master developers can tweak the applyDisplacementMap() function such that the uScale/vScale tiling can be controlled. Perhaps someone can point me in the right direction so I can do this myself? Anyway, I hope this example is of some use to the community.
