Ray tracing breakdown

I am currently introducing the ray tracing rendering technique to my computer graphics class. I figured the “breakdown” approach that I’ve been describing here might be helpful.

So today in class I implemented for them the beginnings of a ray tracer. I just stood up in front of the class and implemented a ray tracer by doing live coding in a fragment shader.

My coding during the class was more or less improvised. I started with something very simple, and then built up the code bit by bit until I had the basic workings of a simple ray tracer.

After the class I thought over the sequence of events — what I had done first, then next, etc. And I converted that train of thought into a breakdown sequence, using the same framework that I had already built for the bubble breakdown I posted here recently.

Along the way I added a few improvements. For one thing, now when you are doing live coding, you get much better feedback along the way.

In particular, if you type something that stops the code from running, the system now gives you an error message, and highlights the line where the error happened. I’ve also gone back and added these same improvements to the bubble breakdown.

This approach is turning out to be a really useful way to teach people, while also giving them a chance to learn and explore for themselves, always at their own pace.

You can try the intro to raytracing breakdown here.

5 Responses to “Ray tracing breakdown”

  1. Tom says:

    Hi Ken,

    The demo isn’t working on my OS/browser combination. Here’s a screenshot:
    http://imgur.com/fOVara1

    I’m on Windows 10 and Chrome Version 55.0.2883.87 m (64-bit)

  2. admin says:

    Unfortunately I cannot debug that from my MacBook. It runs just fine for me in Safari, Chrome and Firefox.

    What is the message in your browser’s error console?

  3. Tom says:

    Here’s the console:
    http://imgur.com/PXtvqml

    Uncaught TypeError: Cannot read property ‘createProgram’ of null
    at HTMLCanvasElement.canvas.setShaders (lib.js:24)
    at lib.js:77

  4. Hitoshi Yamauchi says:

    Fantastic, Thanks a lot.
    Hitoshi

  5. Rhema says:

    P.S. This is getting fair traction on HN: https://news.ycombinator.com/item?id=13563577 .

Leave a Reply