Lesson 4 Point, Line, and Polygon

zePoint, zeLine, and zePolygon are shape objects having the same characteristics: they are subjected to transformations (rotate, scale, and translate); they may have their own colors; and they are only objects on which the OpenGL display list is implemented. For better performance, you may want to trigger the display list when rendering a scene to a screen for animation or in saving a series of transformed image of the same scene to files.

The zePoint (see Lesson 2) is the simplest of the three. The maximal pixel size depends on the OpenGL implementation (10 in Windows). The zeLine has a few more attributes than than zePoint, e.g., line width and styles. The following example shows how to produce colorful lines of different styles.

require("register")

render, scene, node, line1, line2, line3, line4, xyz, rgb
    = zeGrf.new("render", "scene", "node", "line",
      "line", "line", "line", "vertex", "color")
    
render:add(scene)
scene:set{node = node}
node:add(line1, line2, line3, line4)

-- Four lines share the same xyz and rgb data.

line1:set{vertex = xyz, vertex_color = rgb, solid = 1}
line2:set{vertex = xyz, vertex_color = rgb, dot = {2, 2}}
line3:set{vertex = xyz, vertex_color = rgb, dash = {10, 3}}
line4:set{vertex = xyz, vertex_color = rgb, dotdash = {4, 4}}

xyz:add(-150, 0, 0)
xyz:add(0, 0, 0)
xyz:add(150, 0, 0)

rgb:add(1, 0, 0)
rgb:add(0, 1, 0)
rgb:add(0, 0, 1)

-- Set these lines apart and set their style.

line1:translate(0, -60, 0)
line2:translate(0, -20, 0)
line3:translate(0, 20, 0)
line4:translate(0, 60, 0)

render:tofile("lines.png")

lines.png

In this example, the same vertex and color objects are used by all four lines; and transformations are done on lines instead of the node. You can use the color() function of zePoint, zeLine, and zePolygon to assign a single color to them, but the function has no effect when a zeColor object is used to define vertex colors.

The zePolygon has more attributes than zeLine. A polygon (triangles, quads, and polygon) does not have to be a filled area. You can render a polygon as points or lines. To produce 3D effect for an object, its vertex normals should be defined and a zeLight should be used to illuminate it. If the facets of a 3D object have different colors, it may look OK without light and normal vectors. Here is an example:

require("register")

render, scene, node, shape, xyz, rgb
    = zeGrf.new("render" ,"scene", "node", "polygon", "vertex", "color")

render:add(scene)
scene:set{node = node}
node:add(shape)

shape:set{vertex =xyz, vertex_color = rgb, type = "quads"}

--Add data to vertex in the usually way

xyz:add(-100, -100, 100)
xyz:add(100, -100, 100)
xyz:add(100, 100, 100)
xyz:add(-100, 100, 100)

xyz:add(100, -100, 100)
xyz:add(100, -100, -100)
xyz:add(100, 100, -100)
xyz:add(100, 100, 100)

xyz:add(-100, 100, 100)
xyz:add(100, 100, 100)
xyz:add(100, 100, -100)
xyz:add(-100, 100, -100)

--Add data to vertex color through Lua table

rgb:add({1, 0, 0, 1,
         1, 0, 0, 1,
         1, 0, 0, 1,
         1, 0, 0, 1,
         0, 1, 0, 1,
         0, 1, 0, 1,
         0, 1, 0, 1,
         0, 1, 0, 1,
         0, 0, 1, 1,
         0, 0, 1, 1,
         0, 0, 1, 1,
         0, 0, 1, 1})

shape:rotatey(-30)
shape:rotatex(30)

render:tofile("shape1.png")

scene:perspective(2)

render:tofile("shape2.png")

shape1.png and shape2.png

The two images look like cubes, but they are not - only three facets are constructed. The illusion is caused by the rotation that makes completed facets facing us. The second figure uses perspective projection. The view depth of the perspective projection can be adjusted by the scale factor.

Even in 2D space, simply assigning different colors to each vertex may produce a wonderful effect.

require("register")

render, scene, node, shape, xyz, rgb
    = zeGrf.new("render" ,"scene", "node", "polygon", "vertex", "color")

render:add(scene)
scene:set{node = node}
node:add(shape)

shape:set{vertex = xyz, vertex_color = rgb, type = "triangles"}

-- Two different ways to call a function that accept Lua table

xyz:add{-100, 100, 0, 100, 100, 0, 0, -100, 0}

rgb:add({1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1})

render:tofile("polygon3.png")