add contents to each tutorial

Author: peteroupc

demos/demoutil.js

@@ -79,58 +79,6 @@ function setRanges(ranges){
  }
 }
 
-if(!BSplineCurve.uniform){
-BSplineCurve.clamped=function(controlPoints,degree,flags){
- return new BSplineCurve(controlPoints,
-   BSplineCurve.clampedKnots(controlPoints.length,degree),flags)
-}
-BSplineCurve.uniform=function(controlPoints,degree,flags){
- return new BSplineCurve(controlPoints,
-   BSplineCurve.uniformKnots(controlPoints.length,degree),flags)
-}
-BSplineSurface.clamped=function(controlPoints,degreeU,degreeV,flags){
- return new BSplineSurface(controlPoints,
-   BSplineCurve.clampedKnots(controlPoints[0].length,degreeU),
-   BSplineCurve.clampedKnots(controlPoints.length,degreeV),flags)
-}
-BSplineSurface.uniform=function(controlPoints,degreeU,degreeV,flags){
- return new BSplineSurface(controlPoints,
-   BSplineCurve.uniformKnots(controlPoints[0].length,degreeU),
-   BSplineCurve.uniformKnots(controlPoints.length,degreeV),flags)
-}
-BSplineCurve.uniformKnots=function(controlPoints,degree){
-  if(typeof controlPoints=="object")
-   controlPoints=controlPoints.length;
-  if(controlPoints<degree+1)
-   throw new Error("too few control points for degree "+degree+" curve")
-  var order=degree+1;
-  var ret=[]
-  for(var i=0;i<controlPoints+order;i++){
-   ret.push(i)
-  }
-  return ret;
-}
-BSplineCurve.clampedKnots=function(controlPoints,degree){
-  if(typeof controlPoints=="object")
-   controlPoints=controlPoints.length;
-  if(controlPoints<degree+1)
-   throw new Error("too few control points for degree "+degree+" curve")
-  var order=degree+1;
-  var extras=controlPoints-degree;
-  var ret=[];
-  for(var i=0;i<order;i++){
-   ret.push(0)
-  }
-  for(var i=0;i<extras;i++){
-   ret.push(i+1);
-  }
-  for(var i=0;i<order;i++){
-   ret.push(extras+1);
-  }
-  return ret;
-}
-}
-
 function saveString(string,type,filename){
  extension=".txt"
  type=type||"text/plain"
@@ -166,7 +114,12 @@ function updateShape(func){
         settings.appendChild(div)
     }
   }
-  shapeGroup.removeShape(shapeGroup.shapes[0]);
+  if(!shapeGroup.removeShape){
+   // For compatibility with version 1.3.1
+   shapeGroup.shapes.length=0;
+  } else {
+   shapeGroup.removeShape(shapeGroup.shapes[0]);
+  }
   shapeGroup.addShape(scene.makeShape(func(allsettings)).setMaterial(
     new Material().setParams({
      "diffuse":"black",

tutorials/camera.md

@@ -1,11 +1,14 @@
-## Introduction
+## Introduction <a id=Introduction></a>
 
 This tip describes projection and view transforms commonly used in 3D graphics,
 especially when using my [HTML 3D Library](http://peteroupc.github.io/html3dutil).
 
 **Download the latest version of the library at the [HTML 3D Library's Releases page](https://github.com/peteroupc/html3dutil/releases).**
+## Contents <a id=Contents></a>
 
-## The "Camera" and the Projection and View Transforms
+[Introduction](#Introduction)<br>[Contents](#Contents)<br>[The "Camera" and the Projection and View Transforms](#The_Camera_and_the_Projection_and_View_Transforms)<br>&nbsp;&nbsp;[Overview of Transformations](#Overview_of_Transformations)<br>[Projection Transform](#Projection_Transform)<br>&nbsp;&nbsp;[Perspective Projection](#Perspective_Projection)<br>&nbsp;&nbsp;&nbsp;&nbsp;[Demo](#Demo)<br>&nbsp;&nbsp;[Orthographic Projection](#Orthographic_Projection)<br>&nbsp;&nbsp;[Other Projections](#Other_Projections)<br>[View Transform](#View_Transform)<br>[Other Pages](#Other_Pages)<br>
+
+## The "Camera" and the Projection and View Transforms <a id=The_Camera_and_the_Projection_and_View_Transforms></a>
 
 The [`Scene3D`](http://peteroupc.github.io/html3dutil/glutil.Scene3D.html) class of the HTML 3D Library has a concept of a "projection transform" and a "view transform". If we use the concept of a "camera", the projection is like setting the camera's focus and lens, and the view transform is like setting its position and orientation. `Scene3D` has methods for setting all these attributes of this abstract "camera". Two of them are [`setPerspective()`](http://peteroupc.github.io/html3dutil/glutil.Scene3D.html#.setPerspective) and [`setLookAt()`](http://peteroupc.github.io/html3dutil/glutil.Scene3D.html#.setLookAt), which are shown in the example below.
 
@@ -18,7 +21,7 @@ The [`Scene3D`](http://peteroupc.github.io/html3dutil/glutil.Scene3D.html) class
     // points at (0, 2, 0), that is, up 2 units.
     scene.setLookAt([0,0,30], [0,2,0]);
 
-### Overview of Transformations
+### Overview of Transformations <a id=Overview_of_Transformations></a>
 
 Here is an overview of transformations used in the graphics system and
 the HTML 3D library.
@@ -32,14 +35,14 @@ is not discussed in this page.
 clip space coordinates to _normalized device coordinates_, then _screen space_
 coordinates when drawing objects on the screen.
 
-## Projection Transform
+## Projection Transform <a id=Projection_Transform></a>
 
 A _projection matrix_ transforms coordinates in camera space to _clip space_.
 
 Two commonly used projections in 3D graphics are the perspective projection and
 orthographic projection, described below.
 
-### Perspective Projection
+### Perspective Projection <a id=Perspective_Projection></a>
 
 A perspective projection gives the 3D scene a sense of depth.  In this projection, closer objects
 look bigger than more distant objects with the same size, making the
@@ -97,11 +100,11 @@ bound the view volume.  Their positions are chosen so that the result is a persp
 of where they meet the near clipping plane.
 * `near`, `far` - Distance from the camera to the near and far clipping planes.
 
-#### Demo
+#### Demo <a id=Demo></a>
 
 * [perspective.html](https://peteroupc.github.io/html3dutil/demos/perspective.html) - Demonstrates a perspective projection.
 
-### Orthographic Projection
+### Orthographic Projection <a id=Orthographic_Projection></a>
 
 An orthographic projection is one in which the left and right clipping planes are parallel to each other,
 and the top and bottom clipping planes are parallel to each other.  This results in the near and far clipping
@@ -132,7 +135,7 @@ or squished in case the view volume's aspect ratio and the scene's aspect ratio
 * `aspect` - Aspect ratio of the viewport.  May be omitted, in which case the scene's
 aspect ratio (`scene.getClientAspect()`) is used.
 
-### Other Projections
+### Other Projections <a id=Other_Projections></a>
 
 There are other kinds of possible projections, such as oblique projections
 or isometric projections.  For these
@@ -146,7 +149,7 @@ This method allows you to set the projection matrix to an arbitrary [4x4 matrix]
 
 * `matrix` - The 4x4 matrix to use.
 
-## View Transform
+## View Transform <a id=View_Transform></a>
 
 The view matrix transforms _world space_ coordinates, shared by every object in a scene, to _camera space_
 coordinates, in which the camera is located at the center of the coordinate system: (0, 0, 0).  A view matrix essentially rotates the camera and moves it to a given position in world space.  Specifically:
@@ -178,7 +181,7 @@ This method allows you to set the view matrix to an arbitrary [4x4 matrix]{@tuto
 
 * `matrix` - The 4x4 matrix to use.
 
-## Other Pages
+## Other Pages <a id=Other_Pages></a>
 
 The following pages of mine on CodeProject also discuss this library:
 

tutorials/filters.md

@@ -1,12 +1,15 @@
-## Introduction
+## Introduction <a id=Introduction></a>
 
 This page describes what graphics filters are and how they work in my
 public domain [HTML 3D Library](http://peteroupc.github.io/html3dutil).
 It also describes several examples of graphics filters.
 
 **Download the latest version of the library at the [HTML 3D Library's Releases page](https://github.com/peteroupc/html3dutil/releases).**
+## Contents <a id=Contents></a>
 
-## Graphics Filters
+[Introduction](#Introduction)<br>[Contents](#Contents)<br>[Graphics Filters](#Graphics_Filters)<br>[Writing Graphics Filters](#Writing_Graphics_Filters)<br>[Using Graphics Filters](#Using_Graphics_Filters)<br>[Examples](#Examples)<br>&nbsp;&nbsp;[Grayscale](#Grayscale)<br>&nbsp;&nbsp;[Invert](#Invert)<br>&nbsp;&nbsp;[Red Tint](#Red_Tint)<br>&nbsp;&nbsp;[Mirror Filter](#Mirror_Filter)<br>&nbsp;&nbsp;[Matrix Filter](#Matrix_Filter)<br>&nbsp;&nbsp;[Pixelate Filter](#Pixelate_Filter)<br>&nbsp;&nbsp;[Wave Filter](#Wave_Filter)<br>&nbsp;&nbsp;[Waterpaint Filter](#Waterpaint_Filter)<br>[Other Pages](#Other_Pages)<br>
+
+## Graphics Filters <a id=Graphics_Filters></a>
 
 In the HTML 3D Library, graphics filters are functions used to modify the appearance
 of the screen after each frame.  They are implemented in a language called GLSL, or GL
@@ -21,7 +24,7 @@ For graphics filters to work, the 3D scene must be rendered to an off-screen buf
 a _frame buffer_.  The frame buffer acts like a 3D texture which will be rendered back to
 the screen with the help of the graphics filter's shader program.
 
-## Writing Graphics Filters
+## Writing Graphics Filters <a id=Writing_Graphics_Filters></a>
 
 In the HTML 3D Library, use the `makeEffect` method of the ShaderProgram class to create
 graphics filters:
@@ -73,7 +76,7 @@ A detailed treatment of GLSL is outside the scope of this page.  More informatio
 be found by searching the Web; note that there are many versions of GLSL and the one used
 in HTML applications is relatively basic nowadays.  Also see below for more examples of graphics filters.
 
-## Using Graphics Filters
+## Using Graphics Filters <a id=Using_Graphics_Filters></a>
 
 After a filter is created, it's very easy to use; it's simply set with the `useFilter` method of Scene3D.  After
 a filter is set, here's how it works:
@@ -99,7 +102,7 @@ Currently, the HTML 3D Library only supports one filter at a time, so if the HTM
 than one effect, say, a grayscale and blur, both effects need to be combined in the same graphics filter
 shader.
 
-## Examples
+## Examples <a id=Examples></a>
 
 * [squares.html](https://peteroupc.github.io/html3dutil/demos/squares.html) - Demonstrates graphics filters.
 
@@ -108,13 +111,13 @@ of graphics filters implemented as shaders.
 
 Here are more details on the filters it includes.
 
-### Grayscale
+### Grayscale <a id=Grayscale></a>
 
 ![Grayscale filtered image](filters1.png)
 
 The grayscale filter, which converts the screen to black and white, was already given above.
 
-### Invert
+### Invert <a id=Invert></a>
 
 ![Invert filtered image](filters2.png)
 
@@ -132,7 +135,7 @@ This filter is implemented in the method `ShaderProgram.getInvertEffect()`:
     "}"].join("\n"));
     }
 
-### Red Tint
+### Red Tint <a id=Red_Tint></a>
 
 ![Red Tint filtered image](filters9.png)
 
@@ -146,7 +149,7 @@ The red tint filter adds a hint of red to the image.
     "}"].join("\n"));
     }
 
-### Mirror Filter
+### Mirror Filter <a id=Mirror_Filter></a>
 
 ![Mirror filtered image](filters7.png)
 
@@ -164,7 +167,7 @@ the current X coordinate).
 
 With a simple change, this filter can be modified to do a vertical flip (`1.0-uvCoord.y`) or even both flips.
 
-### Matrix Filter
+### Matrix Filter <a id=Matrix_Filter></a>
 
 ![Blur filtered image](filters4.png)
 ![Edge detect filtered image](filters8.png)
@@ -189,7 +192,7 @@ This filter is implemented in the function `makeKernelMatrix` in the demo.  It i
 the "blur" and "edge detect" effects.  The filter shows how it's possible for filters to read neighboring
 pixels, not just the current pixel, when implementing their effect.
 
-### Pixelate Filter
+### Pixelate Filter <a id=Pixelate_Filter></a>
 
 ![Pixelate filtered image](filters5.png)
 
@@ -213,7 +216,7 @@ each "pixelated" pixel takes up.
 
 The demo changes the "coarseness" parameter with time to animate the pixelation effect.
 
-### Wave Filter
+### Wave Filter <a id=Wave_Filter></a>
 
 ![Wave filtered image](filters3.png)
 
@@ -223,7 +226,7 @@ frame for the undulation effect.
 
 This filter is implemented in the function `makeWave` in the demo.
 
-### Waterpaint Filter
+### Waterpaint Filter <a id=Waterpaint_Filter></a>
 
 ![Waterpaint filtered image](filters6.png)
 
@@ -232,7 +235,7 @@ named "Themaister".
 
 This filter is implemented in the function `makeWaterpaint` in the demo.
 
-## Other Pages
+## Other Pages <a id=Other_Pages></a>
 
 The following pages of mine on CodeProject also discuss this library: