Oct 12, 2009
Exploring texturing and lighting with WebGL
NOTE: You’ll need to use a Mozilla trunk nightly build (switch webgl.enabled_for_all_sites to true in about:config) or Chrome developer preview version (use “–enable-webgl” and “–no-sandbox” command-line switches). A video is included in this post if you’re having trouble installing.
After learning the basics of fragment and vertex shaders in my last example and using the Spore creature viewer as reference, it was fairly straightforward to implement texturing and lighting. Take a look at the source to see how it was done, and how the positioning matrix has evolved.
Having limited OpenGL knowledge, the learning experience with WebGL has been very good since it requires JavaScript to supply all the shader parameters. I have some concern with JS being able to handle a more intensive implementation, but further experimentation will expose that. Regardless, I’m loving the current performance results, especially when compared to Flash alternatives.
UPDATE: Perspective added to the example. Thank you, Giles.
Interesting stuff! There’s something weird with the perspective tho, which I’ve seen in some other OpenGL stuff (and in my own limited OpenGL try-outs back in the day
), where edges closer to the screen seem smaller than those in the back.
Peter,
This is brilliant, many thanks for sharing! I’m currently engaged in porting the NeHe OpenGL tutorials to WebGL, and I hope you don’t mind if I reference your code (with attribution aplenty, of course!) when I get to lesson 6…
Re: the perspective oddity that David mentions, I think the problem is simply that you’re not applying any perspective — that is, things that are far away look the same size as things that are close (which the eye might interpret as David does, as things far away being *bigger*). I humbly suggest that you might find my explanation of how to do perspective in the first NeHe tutorial as useful as I suspect I’m going to find your texturing code
Here it is: http://learningwebgl.com/blog/?p=28
Cheers,
Giles
[...] giles on Oct.13, 2009, under Uncategorized Just one new example today; Peter Nitsch has posted an example of a spinning cube with textured faces, which I’m sure I’ll be looking at very closely when the time comes to port NeHe [...]
Giles, thanks for the reference. I’m definitely gonna investigate the perspective glitch. You’re right that I hadn’t implemented anything for it. It’s a learning process for me.
Peter,
Yup, very much a learning process for me too — and probably for everyone apart from the Mozilla team
If there’s anything broken or hard to understand in my explanation of the perspective stuff, please do let me know…
Cheers,
Giles
[...] box (WebKit version, Minefield version courtesy of Jacob Seidelin) was also a helpful guide, and Peter Nitsch’s spinning box helped too. Of course, none of the matrix maths would have been doable without James Coglan’s [...]