How to animate a standardMaterial?

Questions
1

So I am completely new so sry for anything stupid, I couldn’t find any answers.

Right now I have a selector which hovers over fields on a chess-like board.
img

I obvs can’t use sprite since it shouldnt face the camera. But this is my current code:

const selectorMaterial = new bab.StandardMaterial("selector", Game.scene)
selectorMaterial.emissiveTexture = new bab.Texture(selectorSprite, Game.scene)
selectorMaterial.diffuseTexture = new bab.Texture(selectorSprite, Game.scene)
selectorMaterial.diffuseTexture.hasAlpha = true
selectorMaterial.emissiveTexture.hasAlpha = true
selectorMaterial.backFaceCulling = false

const selector = bab.MeshBuilder.CreateGround("selector", {}, Game.scene)
selector.material = selectorMaterial
const selectorPosition = fieldPos(0, 0)
selector.position = new Vector3(selectorPosition.x, -.2, selectorPosition.y)

Anyways I want to animate this between frames but have no idea how to do that when not working with sprites!

2

I ask exactly the same few days ago: Sprite and BillboardMode :slight_smile:

Basically, create a timer which move the uOffset & vOffset of your mesh.

3

Oh cool. Another question, how do you handle Textures? I only set emissiveTexture but it doesn’t work with transparency :confused:

4

I don’t understand your question? Your code seems OK, texture assignation should work. Here a tiny playground with diffuse with alpha + emissive, works like a charm :slight_smile: https://www.babylonjs-playground.com/#5K9J89#10

1 Like
5

So I have only used emissiveTexture because I want my game to have a non-lighting sort of effect like https://img110.xooimage.com/files/1/1/b/cbs3-4b0daf2.gif

What is the optimal way to obtain that?

6

OK I see, so here some tips:

  • no need for PBRMaterials here, stay with Standard
  • set your scene ambientColor to white…
  • … and you can now play with your materials ambientColor (which is multiplied with scene ambientColor)
  • you can even mix diffuseTexture & ambientTexture if needed
  • you can check the disableLighting properties of your materials also
  • if desired, make some tests with samplingModes

https://www.babylonjs-playground.com/#5K9J89#12

7

I thought diffuseTexture only had an effect if I had lighting in my scene?

In terms of sampling I have an issue. If I scale the 32x32 image up to 320x320 and use bilinear sampling there is much less aliasing than nearest sampling at 32x32. Is there a way to obtain that effect or should I just let it be?

Secondly when I make a sprite sheet of 3 rows and change my uScale to 1/3 it looks really weird (I fixed it by making it an even amount but there should be a better way right? - it occours when i have 5 images too)
image

8

Yep, diffuse channel is influenced by dyn lighting, but also with ambientColor (which is itself influenced by scene ambientColor). Here, instead of black material where light doesn’t illuminate, you can get a grey diffuse using a grey ambientColor : https://www.babylonjs-playground.com/#5K9J89#14

About your texture, stay on bilinear, nearest was just an idea in the aire :slight_smile: Just tweak your 32px² file on image editor to made it 256/512/…/px².

9

So if I want to make it 32x32 I should still upscale with nearest for less aliasing? I want to use 32x32 sprites.
Also whenever i scale my sprite sheets it becomes blurry

image
image.png1327×847 9.95 KB

10

Blur could come from mipmaps, you can try disabling them (here my test). But when dealing with tiny texture size like here, there’s not magic trick to avoid this interpolation I think.

(here the samplingMode list FYI : BaseTexture - Babylon.js Documentation )