PIXI.js Tilemap doesn't render when using MULTIPLY mode in the lights sample

[Morder]

Trying to add the simple layer/lights to a scene with a tilemap and when the lightSprite is set to MULTIPLY mode the tilemap just disappears. ADD mode works but the coloring is terrible. The following link is a minimal sample that shows the failure.

https://jsfiddle.net/g1cm7xjb/

Could someone help me to understand where I'm going wrong? (I actually saw a post by someone else that showed exactly what I was trying to accomplish but alas no code there)

 

Thanks

[ivan.popelyshev]

you have to check source code , if there's blendmodes at all in tilemap. 

[Morder]

Thanks! That got me in the right direction. Tilemap does not support blendmode but adding `gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)` (BLEND_MODES.NORMAL) to the tilemap works like a charm.

I'll have to study how pixi implements `.blendMode` and see what I can do to make a PR.

[konflikt]

On 5/4/2023 at 9:08 AM, Morder said:

Thanks! That got me in the right direction. Tilemap does not support blendmode but adding `gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)` (BLEND_MODES.NORMAL) to the tilemap works like a charm.

I'll have to study how pixi implements `.blendMode` and see what I can do to make a PR.

I know this is a long shot considering this was almost a year ago, and Morder, you don't seem to be active. But can you elaborate a bit more about how you fixed this issue? I am running into the exact same issue.

 

EDIT:

Okay, I was able to figure out how to get this working. I'm updating my post to help anyone else that runs across this in the future.

Based on Morder's code snippet, and looking through how classes like `Graphics` utilize blend modes, I extended the `Tilemap.renderWebGLCode` method to set the proper blending functions before rendering the tilemap. This could be done a handful of different ways, but I just updated the `Tilemap` prototype to "extend" `renderWebGLCode` like so:

import { BLEND_MODES, type Renderer } from 'pixi.js'
import { type TileRenderer, Tilemap } from '@pixi/tilemap'

// Set up the type for the new method on Tilemap
declare module '@pixi/tilemap' {
  interface Tilemap {
    _renderWebGLCore(renderer: Renderer, plugin: TileRenderer): void
  }
}

// Copy the original `renderWebGLCore` into a new method
Tilemap.prototype._renderWebGLCore = Tilemap.prototype.renderWebGLCore

// Overwrite the method to set the proper blendFunc and blendMode, then call the original rendering method.
Tilemap.prototype.renderWebGLCore = function (
  renderer: Renderer,
  plugin: TileRenderer,
): void {
  renderer.gl.blendFunc(renderer.gl.ONE, renderer.gl.ONE_MINUS_SRC_ALPHA)
  renderer.state.blendMode = BLEND_MODES.NORMAL

  this._renderWebGLCore(renderer, plugin)
}

 

Also worth noting that I am using Pixi v7.

Edited March 26 by konflikt
Figured out how to make the fix.