Cylinder

Live Editor

function Canvas() {
      const geo = cylinder({ radiusTop: 0.5, radiusBottom: 0.5, height: 1 })
      const mat = rotate3dX(iMouse.y.negate()).mul(rotate3dY(iMouse.x))
      const gl = useGL({
              isWebGL: true,
              isDepth: true,
              count: geo.count,
              vertex: vec4(mat.mul(geo.vertex), 1),
              fragment: vec4(varying(geo.normal), 1),
      })
      return <canvas ref={gl.ref} />
}

Result

Loading...

Cylinder Props

radiusTop	Radius of the cylinder at the top. Default is 1.
radiusBottom	Radius of the cylinder at the bottom. Default is 1.
height	Height of the cylinder. Default is 1.
radialSegments	Number of segmented faces around the circumference. Default is 32.
heightSegments	Number of rows of faces along the height. Default is 1.
openEnded	Whether the ends of the cylinder are open or capped. Default is false.
thetaStart	Start angle for first segment in radians. Default is 0.
thetaLength	Central angle of the circular sector in radians. Default is Math.PI * 2.

Parametric Surface Definition

The cylinder surface is defined as a parametric equation where the radius varies linearly along the height:

$$r(v) = r_{\text{top}} + v \cdot (r_{\text{bottom}} - r_{\text{top}})$$

For parameters $(u, v)$ where $u \in [0, 1]$ represents angular position and $v \in [0, 1]$ represents height position:

$$\begin{align} x &= r(v) \cdot \sin(\theta_{\text{start}} + u \cdot \theta_{\text{length}}) \\ y &= -v \cdot h + \frac{h}{2} \\ z &= r(v) \cdot \cos(\theta_{\text{start}} + u \cdot \theta_{\text{length}}) \end{align}$$

Normal Vector Calculation

Surface normals are computed considering the slope between top and bottom radii:

$$\text{slope} = \frac{r_{\text{bottom}} - r_{\text{top}}}{h}$$

The unnormalized normal vector at any point is:

$$\vec{n} = (\sin\theta, \text{slope}, \cos\theta)$$

Geometric Versatility

Setting different top and bottom radii creates various geometric forms. When $r_{\text{top}} = 0$, the function generates a cone. When $r_{\text{top}} \neq r_{\text{bottom}}$, it produces a truncated cone (frustum).

The angular parameters $\theta_{\text{start}}$ and $\theta_{\text{length}}$ enable partial cylinder generation. Setting $\theta_{\text{length}} = \pi$ creates a half-cylinder, while smaller values generate cylinder segments.

Live Editor

function Canvas() {
      const time = uniform(0)
      const radius1 = sin(time.mul(0.7)).mul(0.4).add(0.6)
      const radius2 = cos(time.mul(0.5)).mul(0.3).add(0.7)
      const angle = time.mul(0.3).add(3.14159)
      const geo = cylinder({
              radiusTop: radius1,
              radiusBottom: radius2,
              height: 2,
              thetaLength: angle
      })
      const mat = rotate3dX(iMouse.y.negate()).mul(rotate3dY(iMouse.x))
      const gl = useGL({
              isWebGL: true,
              isDepth: true,
              count: geo.count,
              vertex: vec4(mat.mul(geo.vertex), 1),
              fragment: vec4(length(geo.vertex.xz).mul(2), varying(geo.normal).y.mul(0.5).add(0.5), angle.div(6.28), 1),
      })
      return <canvas ref={gl.ref} />
}

Result

Loading...