Upcoming lesson 16

I’ve completed the first cut of the WebGL code for lesson 16; its code still needs significant tidying before I write it up, but I think it looks pretty much right. If you have a WebGL browser (here’s how to get one), click the link in the last sentence, and if you don’t, here’s a YouTube video:

The point of this lesson is to introduce rendering to textures — that is, the process of rendering one WebGL scene into a texture that you can then use in another scene. Directly, render-to-texture is a nice way of producing demos like this. But indirectly, it’s much more useful: it’s the basis of two of the most popular suggestions people made when I asked the other day what I should write tutorials about next, picking and shadows. So lesson 16 will teach a technique that will be incredibly useful later on; don’t miss it!

You can leave a response, or trackback from your own site.

14 Responses to “Upcoming lesson 16”

  1. steve says:

    TypeError: Result of expression ‘laptopVertexPositionBuffer’ [undefined] is not an object.

    OS X 10.5.8, last version of WebKit with WebGL enabled (the latest version is disabled if there’s a bug in QT).

    I get the laptop and the reflection of the screen, but not the moon or crate as shown in the video.

  2. giles says:

    Hi steve, thanks for letting me know. I suspect that the error message is a red herring; there was a bug (which I’ve now fixed) that meant it would try to draw the laptop before it was fully loaded.

    If you’re not seeing the moon and the crate, then my render-to-texture must be failing. I’ll investigate, unfortunately I overwrote the only copy of the Leopard-compatible WebKit I had, so I won’t be able to test it myself.

  3. steve says:

    The error is gone, which is good as there were over 1000 of them. :)

    I’m on r54586, downloadable from http://builds.nightly.webkit.org/files/trunk/mac/WebKit-SVN-r54586.dmg

  4. giles says:

    Thanks, steve. Could you try it again and see if the crate and the moon show now? I’ve fixed some incorrect code in the framebuffer initialisation.

  5. steve says:

    It takes a lot longer to load the laptop model now, and still doesn’t have the moon/crate. It does have the matte reflection on the screen (as it did before too).

    Part of the reason I keep reporting on this issue is because I’ve seen render-to-texture working in other demos, and I’m concerned that your demo may be hitting my other problem.

    I have an older computer (Core Two Duo Macbook Pro 17″) which doesn’t support NPOT textures and a few other bits and pieces. I’m not sure if there is a problem with the demo or my computer.

    If you want to point me to the code and some possibilities, I can do some experimenting instead of you trying to debug a problem you can’t see?

  6. giles says:

    Hmmm, the slower loading of the laptop is probably just network weather conditions — I’ve not changed that bit of the code at all, just added some guard code to not try to draw it until it is loaded. The NPOT problem could well be the cause, though — the texture I’m rendering to is 500×301 pixels. I’ve poked around in Paul Brunt’s GLGE shadow demo, and it looks like he’s rendering to a 512×512 texture, so he may well have been working around a similar kind of problem. I’ve switched to doing the same, so I’d be grateful if you’d try once more!

    If it still doesn’t work, it’s kind of you to offer to look: the code is on GitHub, at http://github.com/gpjt/webgl-lessons — or I can package up a ZIP if that would be easier.

    BTW have you had problems with textures in my other demos? I’ve not been sticking strictly to power-of-two textures, and many of them haven’t been square either. For example, http://learningwebgl.com/lessons/lesson11 has a 1000×500 texture. If that one *does* work, but my most recent change fixed this one, then perhaps something on your machine (your driver, perhaps?) is being clever and power-of-two-ising textures, but can’t do it for framebuffers.

  7. steve says:

    Using NPOT textures just makes things drop back to the software renderer for me, so I would expect to see it work slowly rather than not at all. The use of 512×512 hasn’t made a difference, so it’s probably time for me to poke around your code.

    Has anyone else had any trouble, or am I the only person who can’t see the moon and crate in the laptop screen? It’d be helpful for my debugging to know if I’m one of one, few or many. Lesson 11 does work for me.

  8. giles says:

    I’ve not heard of any problems viewing it from other people, but of course they might be suffering in silence…

  9. Thormme says:

    Using latest Chromium nightly I get the laptop and reflection, but no moon and crate.
    With Minefield I don’t even get the reflection.
    Windows Vista SP2
    Your other demos all work fine.

  10. steve says:

    Giles has an NVIDIA, I have an ATI… do you have an ATI card as well, Thormme?

  11. giles says:

    @Thormme — thanks for the feedback! I must be doing something very wrong.

    @steve — no, I’m on ATI too, at work I have an HD 2400, and at home a Mobility HD 4670. It works on both. Very odd.

    I’ve posted something asking for more feedback, just in case people had looked at it, seen a spinning laptop, and not noticed that the crate/moon weren’t showing. That might give us some useful information. http://learningwebgl.com/blog/?p=2008

  12. titan says:

    Hi giles,

    Demo works fine to me (Nv260, Minefield). One question, how do you capture the webgl content? I tried ms media encoder, but the quali is bad (8bit per color…).

    Pls help me :)


  13. giles says:

    Hi Titan — just left a reply on YouTube to someone with a similar nickname who asked the same question — so probably you :-) but just in case it wasn’t, I use CamStudio with the quality at maximum. It produces pretty huge files (>100Mb for a minute) but once they’re uploaded to YouTube I can just delete them.

  14. titan says:

    Thanks, I used different ways to ask you. I needed a fast answer :D Thanks again.


Leave a Reply

Subscribe to RSS Feed Follow Learning WebGL on Twitter