There is a new renderer available for our Gobans. I encourage everyone to try it out and let me know if you run into anything odd, hate or like any of the style changes, and in general help bring to light anything that needs changing before the feature is made default across the site.
To do this go to General Settings and toggle on the “Enable SVG goban renderer” option:
If you run into troubles you can just as easily toggle the new renderer off while we get things fixed up.
Thanks in advance to all that help try this out!
Technical details: The new renderer uses the built in browsers “Scalable Vector Graphics” (SVG) elements as opposed to a canvas element which we directly write our own pixels into. We’re doing this for two reasons. The first being to work around several browser bugs that cause boards to sometimes not be displayed in a few different conditions, as well as other bugs which cause the stones to appear like static when placed on a board under some conditions. The second reason is because it opens up some additional aesthetic capabilities that weren’t practical to implement doing our own rendering onto canvases, for instance having stones large enough that they touch, having some more flexibility in the size and shape of our shadows, and adding various overlays that spanned more than one square.
For those interested in improving the aesthetics of the different stones, basically what we need is an SVG created in something like Inkscape or Illustrator that is relatively simple in composition and nature - so if you think you can do better, you’re probably right, so feel free to make some new stones and paste them here and we can collectively hone in on some better looking stones.
Wait, so if I understand this correctly, changing the color of the “last move” circle might be just a simple css injection away, now? so Blind play can get Black circles for Black stones and White circles for White stones, instead of the other way around!? that sounds amazing!
Nice work on the SVG renderer! But did the old non-SVG rendering change drastically too? The board now looks like this for me (really weird after years of being used to the previous way), and I’m trying to find a way to switch it back to how it looked before, but there seems to be no such option…
Ahh, I did change the default from shell and slate to plain, you can change them under theme options by clicking your name in the upper right then selecting these two stone options:
Edit: I’m going to change the default back to shell and slate for now, when we switch to SVG as the default I’ll likely change the default to Plain then
Edit: This is now done, it should look the same as before without changing your theme.
One more thing — at the moment the SVG renderer seems to make cursor movements very laggy (e.g. during your move or analyze mode). Performance profiling doesn’t show anything overly suspicious, but definitely worth investigating.
I wasn’t able to reproduce this lagginess issue, but I only tried on a relatively high-spec laptop and desktop. I suspect that it might be related to computer performance.
The Plain stones are notably simpler which means they render faster, I’m a little concerned about the Shell stones as a default for that reason. Also, I’m not super happy with the way the new shell stones look at some of the scales, particularly smaller boards…
Is it possible to use the same raster images for stones? (See <image> SVG element)
I understand we would lose some benefits of vector graphics, but it seems like we still get to keep the benefits you mentioned in the OP (large stones, browser bug fixes)
All new designs of white stones are weird. They look unrealistic. They all have too clearly visible black outline. Shadow is like if light is directly above the board, not like when light is under some corner.
It works for now, but using image data is deprecated in both chrome and firefox apparently, and will likely result in the same artifacts / static we sometimes see, so ideally I’d like to avoid it
FWIW I agree with you @stone.defender , but my artistic skills are quite lacking. With the canvas rendering it was easy to get it to look right because it was just math, compute some normals based on the stone shape and apply some lighting - but with svgs it’s flat gradients and circles and stuff, and trying to get that to look right has been challenging for me.
Anyways, @Samraku is right, if some gracious vector artist has some tips or wants to make some better stones, we’d all be grateful
Regarding the shadows, that’s certainly changeable. I’m trying to feel out what folks want regarding this, in the past it’s been a complaint that the shadows were too small and too sharp, and I couldn’t really tweak them beyond to accommodate because I had to stay within the little box of the stones. With SVG’s though we just let the browser figure out shadows and when/where to update stuff when stones come and go, so we have a lot more flexibility.
I tweaked the shadow, I think it looks a bit better now too - although that’s also what I’m used to so hard to say for sure. Most stones don’t have a border, though shell did which I’ve removed. I kept the one on Plain since that’s been specifically requested in the past.
I don’t think the SVG <image> tag is deprecated (or at least Mozilla hasn’t documented it as such)
Are you sure that’s not just the html tag? (For which the standard replacement is <img>)
The obsolete HTML Image element (<image>) is an obsolete remnant of an ancient version of HTML lost in the mists of time; use the standard <img> element instead. Seriously, the specification even literally uses the words “Don’t ask” when describing this element.
Ah I was hoping this wouldn’t be the case, but if so understandable
