how to make webgl exports look good on retina screens?

geddski · 6 мар 2017

I'm exporting a project in JSON format and importing it to the Widget runtime. I'm trying to make the end result look sharp on retina screens like the macbook pro. The way to do this with regular images is to use images that are twice as big as the space they need to take up, and scale them down with CSS. The following things I've tried all end up looking either blurry or pixelated:

exporting from spine at scale:1 and setting scale: .5 in the runtime config
exporting at scale:1 and setting "fitToCanvas: true" in the runtime config

The only thing that does seem to work is exporting at "scale:1", using "scale:1" in the runtime config, and then scaling the canvas object down using CSS "transform: scale(.5)". This works but is not ideal because then the elements take up twice the space in the DOM than what is visible.

Is there a recommended method for getting crisp retina exports with the Widget runtime?

geddski · 6 мар 2017

Mario · 7 мар 2017

The widget uses WebGL under the hood. Please try the recommendations from this site https://www.khronos.org/webgl/wiki/HandlingHighDPI

geddski · 7 мар 2017

Thanks for that link that was helpful. But it looks like spine Widget makes it pretty hard to use that technique because of the Widget.prototype.resize() method, which automatically resets the canvas's width and height properties back to the lower resolution. For example I set it to this to make it look sharp:

and the resize() method automatically kicks in and changes it down to:

making it look blurry again.

I can override the widget.resize method but then it gets called endlessly

maybe that's not a problem but it doesn't seem necessary.

In any case, Widget should make it easy to render a Spine object in retina quality. Maybe a "DPI: 2" option could set the canvas' dimensions to double the element's dimensions, and disable the auto-resize function?

Mario · 8 мар 2017

Could you modify the widget example to reproduce the issue? I'll see what I can do based on that.

geddski · 13 мар 2017

will do!

nimbling · 30 июл 2019

Did someone find a good solution for this, perhaps?

Mario · 30 июл 2019

This should actually be fixed in the new spine-ts web player out of the box. Do you see an issue? If so, could you describe it and send me a reproduction sample?