Animated wildfire: trouble 'tweening' texture

Questions
, ,
1

Hello Three.js world,

I am so excited to be working on my first project that involved disaster response. I am working on an interaction wherein, upon scroll, a rolling fire becomes “quantified” (ie, represented in a grid-like form)- and I have decided to use a grid image overlaid on the fire to achieve this. Originally, I tried to do an actual point cloud instead of faking it with a texture, but seeing as how I am a beginning, animating between a fire-like texture, and a grid - seems like the best solution.

So, to repeat that - I am trying to start off with a fire that is moving by itself, then the user scrolls, and as this happens, a tween is initiated that animated between the fire texture, and a grid-like texture.

Ideal start view, all fire

56%20AM
Screen Shot 2019-08-17 at 12.24.56 AM.png1931×978 2.14 MB

Ideal end view, all grid

10%20AM
Screen Shot 2019-08-17 at 12.25.10 AM.jpg2562×1262 157 KB

Here is my current working link, which was based on the original dynamic terrain example that creates a terrain from a noise(d) normal map and a simple plane.

I am really stuck animating between textures with a TWEEN - I tried using MultiMaterialObject - and then tweening the respective opacities - but I understand that this feature may have been depreciated. Ultimately - my current mesh looks like this,

terrain = new THREE.Mesh( geometryTerrain, mlib[ 'terrain' ] );

…wherein the geometryTerrain is a simple PlaneBufferGeometry, and the mlib is a much more complicated series of seemingly custom shaders, that include two textures currently being referenced as diffuse layers:

   				var loadingManager = new THREE.LoadingManager( function () {
    					terrain.visible = true;
				} );
				var textureLoader = new THREE.TextureLoader( loadingManager );
				var specularMap = new THREE.WebGLRenderTarget( 2048, 2048, pars );
				specularMap.texture.generateMipmaps = false;

				var diffuseTexture1 = textureLoader.load( "textures/terrain/grasslight-big2.jpg" );
				var diffuseTexture2 = textureLoader.load( "textures/terrain/grasslight-big21.jpg" );



				var detailTexture = textureLoader.load( "textures/terrain/grasslight-big-nm.jpg" );

Any help here would be greatly appreciated - I have my LearningThreeJs Book on my iPad, buy I think it might be slightly outdated.

Thank you!!
Max

2

One more note - as I mentioned this is my first time using this forum - I notice a lot of people use JFIDDLE here - let me know if there is a better way to share my code. Although it might be difficult since there are many pieces (modules) that are being used to run this animation.

Thanks!

3

You can still apply multiple materials on a mesh. You pass them as an array to your mesh like so:

var mesh = new THREE.Mesh( geometry, [ material1, material2 ] );

However, using multiple materials only works if the groups property of the respective geometry is properly configured.

In any event, applying different diffuse textures to a mesh and blend between both does not work since there is only a single diffuse texture slot per material.

The most easiest way might be to create two meshes with two materials (one with the fire textures, the other one with the grid-like texture) and then animate the opacity values of both meshes. This should also be very easy to setup with tween.js.

If you want to use a single mesh for some reasons, you have several options like:

  • extend a built-in material with custom shader code with Material.onBeforeCompile()
  • write a custom material from scratch
  • use NodeMaterial
2 Likes
4

Wow - Mugen. Thank you so much for providing this info. I truly appreciate the fast and thoughtful response here!

I like your idea of producing two different geometries and then animating between them with TWEEN. That seems like the most sensible solution, especially given my current level of expertise here. I am going to give this a try and then get back to this thread with the outcome.

Thanks!
Max

1 Like
5
  • I notice a lot of people use JFIDDLE here - let me know if there is a better way to share my code.

Jsfiddle is fine, but it’s terrible on mobile. I’d recommend you use codepen.io or glitch.me instead.

1 Like