a1k0n / jsxm

FastTracker 2 .xm module player in Javascript
http://www.a1k0n.net/code/jsxm/
MIT License
485 stars 36 forks source link

Font rendering broken on Windows Chrome 32-bit #16

Closed TETYYS closed 8 years ago

TETYYS commented 8 years ago

Try to play this awesome xm https://up1.ca/#CDY7u_uzDonNj_RIZ0nP9A , jsxm doesn't show any notes Another example is this: https://up1.ca/#VM-W3hZqc38yzHBhtcflSA and this https://up1.ca/#QnK7MulFvLK-WwCSGqRd5A

a1k0n commented 8 years ago

All of them seem to work fine for me if I drag and drop onto the player.

What OS/browser? How are you trying to play them?

TETYYS commented 8 years ago

drag and drop, win 7 chrome 46 latest

a1k0n commented 8 years ago

Anything in the javascript / error console?

TETYYS commented 8 years ago

channel 1 invalid volume 0 xm.js:195 channel 0 invalid volume 0 xm.js:195 channel 1 invalid volume 0 xm.js:195 channel 0 invalid volume 0 xm.js:195 channel 1 invalid volume 0 xm.js:195 channel 0 invalid volume 0 xm.js:195 channel 1 invalid volume 0 xm.js:195 channel 0 invalid volume 0 xm.js:195 channel 1 invalid volume 0 xm.js:195 channel 0 invalid volume 0 2169 console messages are not shown.

a1k0n commented 8 years ago

whoa. can you scroll all the way up?

TETYYS commented 8 years ago
header len 336
xm.js:698 songlen 34, 4 channels, 15 patterns, 12 instruments
xm.js:699 loop @0
xm.js:700 flags=0 tempo 6 bpm 125
xm.js:706 song patterns:  [0, 0, 1, 2, 3, 3, 3, 3, 4, 4, 4, 5, 3, 3, 3, 6, 7, 8, 9, 10, 11, 11, 11, 12, 4, 4, 4, 5, 3, 3, 3, 6, 13, 14]
xm.js:715 pattern 0: 324 bytes, 64 rows
xm.js:715 pattern 1: 336 bytes, 64 rows
xm.js:715 pattern 2: 326 bytes, 64 rows
xm.js:715 pattern 3: 490 bytes, 64 rows
xm.js:715 pattern 4: 529 bytes, 64 rows
xm.js:715 pattern 5: 533 bytes, 64 rows
xm.js:715 pattern 6: 494 bytes, 64 rows
xm.js:715 pattern 7: 544 bytes, 64 rows
xm.js:715 pattern 8: 472 bytes, 64 rows
xm.js:715 pattern 9: 344 bytes, 64 rows
xm.js:715 pattern 10: 458 bytes, 64 rows
xm.js:715 pattern 11: 536 bytes, 64 rows
xm.js:715 pattern 12: 460 bytes, 64 rows
xm.js:715 pattern 13: 335 bytes, 64 rows
xm.js:715 pattern 14: 256 bytes, 64 rows
xm.js:790 hdrsiz 252; instrument 0: 'by sauli/jml' 1 samples, samphdrsiz 40
xm.js:806 sample 0: len 7850 name '' loop 2718/5130 vol 64
xm.js:808            type 1 note C-4(0) finetune 0 pan 128
xm.js:810            vol env [] 0 0 0 type 0 fadeout 0
xm.js:813            pan env [] 0 0 0 type 0
xm.js:790 hdrsiz 252; instrument 1: '' 1 samples, samphdrsiz 40
xm.js:806 sample 0: len 1202 name '' loop 0/0 vol 64
xm.js:808            type 0 note C-4(0) finetune 0 pan 128
xm.js:810            vol env [] 0 0 0 type 0 fadeout 0
xm.js:813            pan env [] 0 0 0 type 0
xm.js:790 hdrsiz 252; instrument 2: '' 1 samples, samphdrsiz 40
xm.js:806 sample 0: len 3080 name '' loop 0/0 vol 64
xm.js:808            type 0 note C-4(0) finetune 0 pan 128
xm.js:810            vol env [] 0 0 0 type 0 fadeout 0
xm.js:813            pan env [] 0 0 0 type 0
xm.js:790 hdrsiz 252; instrument 3: 'un3titled.wav' 1 samples, samphdrsiz 40
xm.js:806 sample 0: len 11394 name '' loop 0/11394 vol 64
xm.js:808            type 1 note C-4(0) finetune -128 pan 128
xm.js:810            vol env [] 0 0 0 type 0 fadeout 0
xm.js:813            pan env [] 0 0 0 type 0
xm.js:790 hdrsiz 252; instrument 4: 'disqualified entry' 1 samples, samphdrsiz 40
xm.js:806 sample 0: len 3648 name '' loop 0/0 vol 64
xm.js:808            type 0 note C-4(0) finetune 0 pan 128
xm.js:810            vol env [] 0 0 0 type 0 fadeout 0
xm.js:813            pan env [] 0 0 0 type 0
xm.js:790 hdrsiz 252; instrument 5: '' 1 samples, samphdrsiz 40
xm.js:806 sample 0: len 2876 name '' loop 0/0 vol 64
xm.js:808            type 0 note C-4(0) finetune 0 pan 128
xm.js:810            vol env [] 0 0 0 type 0 fadeout 0
xm.js:813            pan env [] 0 0 0 type 0
xm.js:790 hdrsiz 252; instrument 6: '' 1 samples, samphdrsiz 40
xm.js:806 sample 0: len 2644 name '' loop 0/0 vol 64
xm.js:808            type 0 note C-4(0) finetune 0 pan 128
xm.js:810            vol env [] 0 0 0 type 0 fadeout 0
xm.js:813            pan env [] 0 0 0 type 0
xm.js:790 hdrsiz 252; instrument 7: '' 1 samples, samphdrsiz 40
xm.js:806 sample 0: len 2860 name '' loop 0/0 vol 64
xm.js:808            type 0 note C-4(0) finetune 0 pan 128
xm.js:810            vol env [] 0 0 0 type 0 fadeout 0
xm.js:813            pan env [] 0 0 0 type 0
xm.js:790 hdrsiz 252; instrument 8: 'asm05' 1 samples, samphdrsiz 40
xm.js:806 sample 0: len 3158 name '' loop 0/0 vol 64
xm.js:808            type 0 note C-4(0) finetune 0 pan 128
xm.js:810            vol env [] 0 0 0 type 0 fadeout 0
xm.js:813            pan env [] 0 0 0 type 0
xm.js:790 hdrsiz 252; instrument 9: '' 1 samples, samphdrsiz 40
xm.js:806 sample 0: len 2448 name '' loop 0/0 vol 64
xm.js:808            type 0 note C-4(0) finetune 0 pan 128
xm.js:810            vol env [] 0 0 0 type 0 fadeout 0
xm.js:813            pan env [] 0 0 0 type 0
xm.js:790 hdrsiz 252; instrument 10: '' 1 samples, samphdrsiz 40
xm.js:806 sample 0: len 1824 name '' loop 0/0 vol 64
xm.js:808            type 0 note C-4(0) finetune 0 pan 128
xm.js:810            vol env [] 0 0 0 type 0 fadeout 0
xm.js:813            pan env [] 0 0 0 type 0
xm.js:790 hdrsiz 252; instrument 11: '' 1 samples, samphdrsiz 40
xm.js:806 sample 0: len 912 name '' loop 0/0 vol 64
xm.js:808            type 0 note C-4(0) finetune 0 pan 128
xm.js:810            vol env [] 0 0 0 type 0 fadeout 0
xm.js:813            pan env [] 0 0 0 type 0
xm.js:884 loaded "untitled"
3xm.js:195 channel 1 invalid volume 0
a1k0n commented 8 years ago

oh wait, that will show the loading of a different xm. hmm. I can't reproduce here...

TETYYS commented 8 years ago

oh wait, that will show the loading of a different xm. hmm. I can't reproduce here...

I refreshed the page and just posted just the part where problematic xm loads and plays

a1k0n commented 8 years ago

which xm is that? none of the three you linked are called "untitled" by sauli/jml

TETYYS commented 8 years ago

this is https://up1.ca/#sBOBOY3VnHU9C4ySo-N_UQ

a1k0n commented 8 years ago

Hm, ok, yeah something is weird with that XM but it does play for me.

To be clear -- you're getting no sound and nothing on the screen, or you do have sound playing and nothing is showing up?

TETYYS commented 8 years ago

sound plays normally, waves are showing normally, just no notes screen

a1k0n commented 8 years ago

Oh, crazy. You have no text whatsoever but the big font renders. Curious! You should have instrument numbers/names as well underneath. Hmmmm...

TETYYS commented 8 years ago

oh, i should? this is what 'normal' is to me: screen

a1k0n commented 8 years ago

This is what it's supposed to do; screencap'd on a windows VM:

screen shot 2015-11-19 at 10 24 16 am
TETYYS commented 8 years ago

I get instrument names and notes on firefox. The problem persists with all extensions disabled on chrome

a1k0n commented 8 years ago

It seems to be a problem with the way text is composited over other things. Could even have something to do with video drivers.

The top font is rendered with just regular blits - copying sections of ft2font.png onto the canvas. The instrument list is rendered with the 'lighten' composite operation, where the white pixels become white and the black pixels leave the background alone. And the pattern is rendered to an offscreen canvas, which is then rendered with the 'lighten' operation over the blue bar which highlights the playing row.

So the 'lighten' operation seems to be broken for you in Chrome.

a1k0n commented 8 years ago

btw, 32-bit or 64-bit windows/chrome? https://code.google.com/p/chromium/issues/detail?id=543342

TETYYS commented 8 years ago

x86 chrome x64 win

a1k0n commented 8 years ago

Ok, I think you're hitting https://code.google.com/p/chromium/issues/detail?id=544766

TETYYS commented 8 years ago

Am I? I'm not sure what it does so I can't determine whether it is rendering correct or not

a1k0n commented 8 years ago

Hmm. Well, if you go to https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation does your "lighten" look like this?

screen shot 2015-11-19 at 10 42 26 am
TETYYS commented 8 years ago

nope, it's this:

a1k0n commented 8 years ago

Yeah, then it seems to be this issue: https://code.google.com/p/chromium/issues/detail?id=543583

I could try to work around this by using an alpha channel instead of blend modes, but once Chrome 46.0. 2526+ comes out it should be fixed.

a1k0n commented 8 years ago

@TETYYS is this fixed in Windows Chrome now?

TETYYS commented 8 years ago

Yes

a1k0n commented 8 years ago

Thanks for checking!