O'Reilly logo

WebGL Beginner's Guide by Brandon Jones, Diego Cantor

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action — rendering a square

Follow the given steps:

  1. Open the file ch_Square.html in your favorite HTML editor (ideally one that supports syntax highlighting like Notepad++ or Crimson Editor).
  2. Let's examine the structure of this file with the help of the following diagram:
    Time for action — rendering a square
  3. The web page contains the following:
    • The script<script id="shader-fs" type="x-shader/x-fragment"> contains the fragment shader code.
    • The script<script id="shader-vs" type="x-shader/x-vertex"> contains the vertex shader code. We will not be paying attention to these two scripts as these will be the main point of study in the next chapter. For now, let's notice that we have a ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required