7 ms·

Show HN: WebGL Playground

89 points by jessevdk 12y ago

sz4kerto 12y ago
The 'transparent' and 'wireframe' toggles should work the other way round (at least it's contraintuitive to me -- it shows 'off' when it's on). And one combination doesn't work (transparent + no wireframes falls back to non-transparent + no wireframes).
- pmx 12y ago
  I think the toggles are inverted throughout the app
userbinator 12y ago
I wonder how much of this was inspired by https://www.shadertoy.com/ https://www.shadertoy.com/
- dtf 12y ago
  I think everyone's been inspired by the likes of JSBin/JSFiddle, GLSL sandbox and the like. Shadertoy is for pure fragment shader programs - raymarchers being the most popular. Whereas this is a more traditional mesh/vertex/fragment/control program setup.
bd 12y ago
Nice, though several examples don't work on Windows with ANGLE (OpenGL seems ok): - DX11 ANGLE: no specular in Blinn-Phong, nothing shows in Variance and Exponential Shadow Mapping, nothing shows in HDR - DX9 ANGLE: nothing shows in Variance and Exponential Shadow Mapping, nothing shows in HDR Tested both in current stable Chrome and stable Firefox, GPU is Nvidia Quadro 2000M, Windows 7. ------------------------ Chrome throws these errors in console: VSM/ESM Filter Horizontal(program): linking: Failed to create D3D shaders. Filter Vertical(program): linking: Failed to create D3D shaders. HDR HDR(program): linking: Failed to create D3D shaders. ------------------------ Firefox is more verbose, relevant parts: VSM/ESM (14,9-30): error X3000: unrecognized identifier 'webgl_ae64c5282b720ffe' HDR (40,33-55): error X3090: ps_3_0 does not allow textures or samplers to be members of compound types
bhouston 12y ago
Very interesting, but it doesn't seem to work for me Chrome beta on Windows -- I tried a fwe examples and I get these errors: site.min.js:4586 HDR(program): linking: Failed to create D3D shaders. site.min.js:4586 Filter Horizontal(program): linking: Failed to create D3D shaders. site.min.js:4586 Filter Vertical(program): linking: Failed to create D3D shaders.
deanclatworthy 12y ago
Are there any potential security implications in providing low level access to OpenGL through a WebGL abstraction? Have there been any exploits in the wild?
- Arnavion 12y ago
  The browser is essentially giving user-supplied code (shaders) to a graphics driver that isn't sandboxed in the way the browser's Javascript VM is. This reason was used by Microsoft [1] and Apple to not implement WebGL in IE and Safari, but I don't know what's changed now. [1] http://blogs.technet.com/b/srd/archive/2011/06/16/webgl-considered-harmful.aspx http://blogs.technet.com/b/srd/archive/2011/06/16/webgl-cons...
mattdesl 12y ago
It would be cool to combine this with the Requirebin.com backend so the GLSL code could use glslify, and the GL code could use stackgl (or some other family of modules) rather than just an in-house GL abstraction.
jessevdk 12y ago
Hi, author here. Thanks to everyone for checking this out. I'm sorry if some of the examples don't work across the board, most of these use WebGL extensions that might not be available everywhere. As some people mention in the comments here, and as mentioned in the introductionary text on the website, I've not been able to test this across a large variety of platforms and browsers and I expected there to be issues in particular on Windows using ANGLE. Please consider filing issues on github intead of/in addition to reporting them here so I can actually track them.
frik 12y ago
Sorry! The WebGL Playground does not support your browser IE 11 here, please remove/fix your browser/feature detection.
- Arnavion 12y ago
  The feature detection checks that canvas.getContext("webgl") returns non-null. IE11 does indeed return null for that; it wants "experimental-webgl" instead The docs mention this also: http://msdn.microsoft.com/en-us/library/ie/dn385811 http://msdn.microsoft.com/en-us/library/ie/dn385811 (second example)
  - frik 12y ago
    I meant "IE 11 user here", IE is just one of 3 browsers I use. Yes, so the site owner should just fix the feature detection (webgl and experimental-webgl) - that's normal. It used to be best practice to test a website in IE, Firefox and a WebKit based/originated browser (Chrome/Safari). Opening the site with Chrome now shows a dialog that apologize for limited testing, ok.
sillydude 12y ago
This is awesome. However, I'm unable to switch programs using the nav in the left pane. Clicking the programs doesn't seem to do anything (chrome, mac osx).

89 points by jessevdk 12y ago

The 'transparent' and 'wireframe' toggles should work the other way round (at least it's contraintuitive to me -- it shows 'off' when it's on). And one combination doesn't work (transparent + no wireframes falls back to non-transparent + no wireframes).

pmx 12y ago
I think the toggles are inverted throughout the app

userbinator 12y ago

I wonder how much of this was inspired by https://www.shadertoy.com/ https://www.shadertoy.com/

dtf 12y ago
I think everyone's been inspired by the likes of JSBin/JSFiddle, GLSL sandbox and the like. Shadertoy is for pure fragment shader programs - raymarchers being the most popular. Whereas this is a more traditional mesh/vertex/fragment/control program setup.

bd 12y ago

Nice, though several examples don't work on Windows with ANGLE (OpenGL seems ok): - DX11 ANGLE: no specular in Blinn-Phong, nothing shows in Variance and Exponential Shadow Mapping, nothing shows in HDR - DX9 ANGLE: nothing shows in Variance and Exponential Shadow Mapping, nothing shows in HDR Tested both in current stable Chrome and stable Firefox, GPU is Nvidia Quadro 2000M, Windows 7. ------------------------ Chrome throws these errors in console: VSM/ESM Filter Horizontal(program): linking: Failed to create D3D shaders. Filter Vertical(program): linking: Failed to create D3D shaders. HDR HDR(program): linking: Failed to create D3D shaders. ------------------------ Firefox is more verbose, relevant parts: VSM/ESM (14,9-30): error X3000: unrecognized identifier 'webgl_ae64c5282b720ffe' HDR (40,33-55): error X3090: ps_3_0 does not allow textures or samplers to be members of compound types

bhouston 12y ago

Very interesting, but it doesn't seem to work for me Chrome beta on Windows -- I tried a fwe examples and I get these errors: site.min.js:4586 HDR(program): linking: Failed to create D3D shaders. site.min.js:4586 Filter Horizontal(program): linking: Failed to create D3D shaders. site.min.js:4586 Filter Vertical(program): linking: Failed to create D3D shaders.

deanclatworthy 12y ago

Are there any potential security implications in providing low level access to OpenGL through a WebGL abstraction? Have there been any exploits in the wild?

Arnavion 12y ago
The browser is essentially giving user-supplied code (shaders) to a graphics driver that isn't sandboxed in the way the browser's Javascript VM is. This reason was used by Microsoft [1] and Apple to not implement WebGL in IE and Safari, but I don't know what's changed now. [1] http://blogs.technet.com/b/srd/archive/2011/06/16/webgl-considered-harmful.aspx http://blogs.technet.com/b/srd/archive/2011/06/16/webgl-cons...

mattdesl 12y ago

It would be cool to combine this with the Requirebin.com backend so the GLSL code could use glslify, and the GL code could use stackgl (or some other family of modules) rather than just an in-house GL abstraction.

jessevdk 12y ago

Hi, author here. Thanks to everyone for checking this out. I'm sorry if some of the examples don't work across the board, most of these use WebGL extensions that might not be available everywhere. As some people mention in the comments here, and as mentioned in the introductionary text on the website, I've not been able to test this across a large variety of platforms and browsers and I expected there to be issues in particular on Windows using ANGLE. Please consider filing issues on github intead of/in addition to reporting them here so I can actually track them.

frik 12y ago

Sorry! The WebGL Playground does not support your browser IE 11 here, please remove/fix your browser/feature detection.

Arnavion 12y ago
The feature detection checks that canvas.getContext("webgl") returns non-null. IE11 does indeed return null for that; it wants "experimental-webgl" instead The docs mention this also: http://msdn.microsoft.com/en-us/library/ie/dn385811 http://msdn.microsoft.com/en-us/library/ie/dn385811 (second example)
- frik 12y ago
  I meant "IE 11 user here", IE is just one of 3 browsers I use. Yes, so the site owner should just fix the feature detection (webgl and experimental-webgl) - that's normal. It used to be best practice to test a website in IE, Firefox and a WebKit based/originated browser (Chrome/Safari). Opening the site with Chrome now shows a dialog that apologize for limited testing, ok.

sillydude 12y ago

This is awesome. However, I'm unable to switch programs using the nav in the left pane. Clicking the programs doesn't seem to do anything (chrome, mac osx).