SolariBoard
SolariBoard copied to clipboard
carlmw
Shader rendering
Hi Carl :)
You probably shouldn't really pull that as I rewrote pretty much everything from scratch. There probably wasn't much point in doing it, since it was already "fast enough", but I wanted to see if a pure shader version was possible. Turns out it was!
So in that branch there's no animation on the javascript side, only a single timer variable passed to the gpu on each frame draw.
This should be more independent from js performance and quicker (or depending on your gpu hardware - a lot quicker). While quicker maybe wasn't worth it it does allow drawing more characters on screen!
I tried to put in a lot of comments if you want to see how it's done, and of course ask me if something isn't clear! There a subtle motion blur effect which you can switch for a flashier fake one or an even faster simple blur here (src/renderer.js#L102).
The shaders could probably still use some optimization and now that the characters are so small we could do with a smaller chars texture (also making it a power of 2 in size would allow mipmaps and removing a lot of logic from the shader.
The biggest drawback of this thing is that there's not success/failure flaps anymore, but it would probably be easy to add coloring to the sprites (since they're white to begin with).
I've set up a demo on http://grzes.idl.pl/solari/
I think I need to find a job :)
Hey man, really cool!
I was looking into doing this myself. I wanted to do a version of the board that could be run off a raspberry pi.
I can't currently get this to run. I get the following in chrome.
Uncaught TypeError: Cannot read property 'attribute' of undefined :8000/src/renderer.js:161 PERFORMANCE WARNING: Attribute 0 is disabled. This has signficant performance penalty :8000/:1 GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0
Do you think that might just be a driver issue?
Hey,
The attribute error shouldn't be a problem and is something I was actually hoping you could help me with :) It happens because I wanted to move the shader filenames closer to shader initialization, that's what the inline require render.js is for. The error is happening because the shader's aren't loaded for the first couple of frames. (so in my case i get about 15 of those errors and after that it's fine.
An easy way to make it go away is move the filenames to the require list at the top and get rid of the inline require().
I have no idea what the others are though. I'm running it on "chrome --enable-webgl --ignore-gpu-blacklist" Since I have nothing else to do I might just as well convert it to use three.js after all :)
I have no idea what the performance warning is for, does it give a line number or file? The invalid operation suggests that pushing the vertex buffer object failed.. My wild guess would be that it has something to do with the Native array support.. possibly... Anyway that's the code I was ripping everything from so, please check if that works for you: http://media.tojicode.com/btg/part1/
I was going to ask how your raspbery implementation was going. I think this will be much easier to convert since it's mostly in shaders, and there's actually not that much code to the opengl setup. Although maybe if there was more code and more robust it would actually work :)
It works for me on chrome and ff, let me know if the example I linked to works for you and that'll establish if it's something I broke while straying away from it.
I'll boot to windows quickly to see if it works there...
On Mon, Aug 13, 2012 at 11:31 PM, Carl Whittaker [email protected]:
Hey man, really cool!
I was looking into doing this myself. I wanted to do a version of the board that could be run off a raspberry pi.
I can't currently get this to run. I get the following in chrome.
Uncaught TypeError: Cannot read property 'attribute' of undefined :8000/src/renderer.js:161 PERFORMANCE WARNING: Attribute 0 is disabled. This has signficant performance penalty :8000/:1 GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0
Do you think that might just be a driver issue?
— Reply to this email directly or view it on GitHubhttps://github.com/carlmw/SolariBoard/pull/6#issuecomment-7708795.
Pozdrawiam, Grześ Furga
One more thing you could try, in index.js, where the board is initialized try to pass in some small values for cols / rows. (although rendering bigger boards was part of the point maybe we can see if it's related to the size of the buffers).
On Mon, Aug 13, 2012 at 11:54 PM, Grześ Furga [email protected] wrote:
Hey,
The attribute error shouldn't be a problem and is something I was actually hoping you could help me with :) It happens because I wanted to move the shader filenames closer to shader initialization, that's what the inline require render.js is for. The error is happening because the shader's aren't loaded for the first couple of frames. (so in my case i get about 15 of those errors and after that it's fine.
An easy way to make it go away is move the filenames to the require list at the top and get rid of the inline require().
I have no idea what the others are though. I'm running it on "chrome --enable-webgl --ignore-gpu-blacklist" Since I have nothing else to do I might just as well convert it to use three.js after all :)
I have no idea what the performance warning is for, does it give a line number or file? The invalid operation suggests that pushing the vertex buffer object failed.. My wild guess would be that it has something to do with the Native array support.. possibly... Anyway that's the code I was ripping everything from so, please check if that works for you: http://media.tojicode.com/btg/part1/
I was going to ask how your raspbery implementation was going. I think this will be much easier to convert since it's mostly in shaders, and there's actually not that much code to the opengl setup. Although maybe if there was more code and more robust it would actually work :)
It works for me on chrome and ff, let me know if the example I linked to works for you and that'll establish if it's something I broke while straying away from it.
I'll boot to windows quickly to see if it works there...
On Mon, Aug 13, 2012 at 11:31 PM, Carl Whittaker <[email protected]
wrote:
Hey man, really cool!
I was looking into doing this myself. I wanted to do a version of the board that could be run off a raspberry pi.
I can't currently get this to run. I get the following in chrome.
Uncaught TypeError: Cannot read property 'attribute' of undefined :8000/src/renderer.js:161 PERFORMANCE WARNING: Attribute 0 is disabled. This has signficant performance penalty :8000/:1 GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0
Do you think that might just be a driver issue?
— Reply to this email directly or view it on GitHubhttps://github.com/carlmw/SolariBoard/pull/6#issuecomment-7708795.
Pozdrawiam, Grześ Furga
Pozdrawiam, Grześ Furga
I tried all of the above and couldn't get it to run :(
It seems to initialise correctly and theres a blink where it seems to render the flaps. But then I a blank screen and the following output in the console.
https://dl.dropbox.com/u/1365919/Screen%20Shot%202012-08-15%20at%2009.41.56.png
I moved the in line require to the top of the module and still got the same. It might be an idea to make the shader a module of it's own and include it in the require at the top renderer. That way it can be initialised as soon as you need it.
I'm running chrome with --enable-webgl --ignore-gpu-blacklist
Will try it on windows or a ubuntu vm
I've seen a lot of people having those errors you mentioned when I google for them so maybe I'm not doing anything terribly stupid. Please give this a try http://media.tojicode.com/btg/part1/ and tell me how it works, it basically does the same thing my version of the board does.
My only other suspect would be the Float32Array calls, but I just checks and three uses them as well. I just uploaded a version, where the canvas and gl context are created by three: http://grzes.idl.pl/solari/
let me know if that helps. (Either it, or my browser are terribly flaky today. gmail only works in html mode for me and i had to restart the browser and refresh a couple of tmes to get that version to work - so hit refresh a couple of times - don't give up on it!)
everything is the same apart from this: var three = new THREE.WebGLRenderer; var canvas = three.domElement; document.body.appendChild(canvas); var gl = three.getContext();
On Wed, Aug 15, 2012 at 10:44 AM, Carl Whittaker [email protected] wrote:
I tried all of the above and couldn't get it to run :(
It seems to initialise correctly and theres a blink where it seems to render the flaps. But then I a blank screen and the following output in the console.
https://dl.dropbox.com/u/1365919/Screen%20Shot%202012-08-15%20at%2009.41.56.png
I'm running chrome with --enable-webgl --ignore-gpu-blacklist
Will try it on windows or a ubuntu vm
— Reply to this email directly or view it on GitHub.
[image]
Pozdrawiam, Grześ Furga
Actually, I don't know why I'm dismissing the attribute error, it's likely that it's something treated differently by different drivers. I uploaded another hacked version with the asynchronous shader loading removed, and an added timeout, to make sure rendering starts after all the shaders are loaded: http://grzes.idl.pl/solari/
So I think i've got a little further. I now get some potentially more useful errors in the chrome console. It appears to be unhappy with the shaders.
https://www.dropbox.com/s/jz7npljfixnqyex/Screen%20Shot%202012-08-21%20at%2016.35.07.png
Scratch that I was being an idiot and got the shader includes in the wrong order.
c1eb6ba7564c5d34b48708dbad264f0925e46f34 deals with the attribute errors by moving them all to the top for now to get rid of the attribute errors.
Heres the errors I get now. Notice the new RENDER WARNING
https://www.dropbox.com/s/szo9g6gozuipul9/Screen%20Shot%202012-08-21%20at%2017.30.52.png
Ok, spent some time on a real mac... found commit cd73d01 it works on a mac book pro and my ubuntu box! something went wrong in one of the next 30 commits :) Unfortunately have to give up the mac now :/ I'll get some more time with it tomorrow!
On Tue, Aug 21, 2012 at 6:33 PM, Carl Whittaker [email protected]:
Scratch that I was being an idiot and getting the shader includes in the wrong order.
c1eb6bahttps://github.com/carlmw/SolariBoard/commit/c1eb6ba7564c5d34b48708dbad264f0925e46f34deals with the attribute errors by moving them all to the top for now to get rid of the attribute errors.
Heres the errors I get now. Notice the new RENDER WARNING
https://www.dropbox.com/s/szo9g6gozuipul9/Screen%20Shot%202012-08-21%20at%2017.30.52.png
— Reply to this email directly or view it on GitHubhttps://github.com/carlmw/SolariBoard/pull/6#issuecomment-7907155.
Pozdrawiam, Grześ Furga