Show HN: WebGL Playground

http://jessevdk.github.io/webgl-play/

by jessevdk • 12 years ago

89 14 12 years ago

jessevdk.github.io

sz4kerto• 12 years 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• 12 years ago

I think the toggles are inverted throughout the app

userbinator• 12 years ago

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

dtf• 12 years 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• 12 years 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• 12 years 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• 12 years 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?

Arnavion2• 12 years 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-cons...

mattdesl• 12 years 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• 12 years 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.

frik2• 12 years ago

  Sorry! The WebGL Playground does not support your browser

IE 11 here, please remove/fix your browser/feature detection.

Arnavion2• 12 years 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 (second example)

frik2• 12 years 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• 12 years 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).

Show HN: WebGL Playground

Related Stories