Sphere

Live Editor

function Canvas() {
      const geo = sphere({ radius: 1 })
      const mat = rotate3dX(iDrag.y).mul(rotate3dY(iDrag.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...

Sphere Props

radius	The sphere radius. Default is 1.
widthSegments	The number of horizontal segments. Minimum value is 3. Default is 32.
heightSegments	The number of vertical segments. Minimum value is 2. Default is 16.
phiStart	The horizontal starting angle in radians. Default is 0.
phiLength	The horizontal sweep angle size. Default is Math.PI*2.
thetaStart	The vertical starting angle in radians. Default is 0.
thetaLength	The vertical sweep angle size. Default is Math.PI.

Spherical Coordinate Mathematics

The sphere buffer generates vertices using spherical coordinate transformations. Each point $(x,y,z)$ on the sphere surface follows the mathematical relationship:

$$\begin{align} x &= r \sin(\theta) \cos(\phi) \\ y &= r \cos(\theta) \\ z &= r \sin(\theta) \sin(\phi) \end{align}$$

Where $r$ represents radius, $\theta$ spans from thetaStart to thetaStart + thetaLength controlling vertical positioning, and $\phi$ spans from phiStart to phiStart + phiLength controlling horizontal rotation.

The parametric equations enable precise control over sphere sections. Setting thetaLength to $\pi/2$ generates hemispheres. Adjusting phiLength creates spherical wedges for architectural visualization or pie chart representations.

Segment Density Control

Triangle density follows the relationship $T = 2 \times \text{widthSegments} \times \text{heightSegments}$ for triangle count. Higher segment values produce smoother curvature but increase vertex buffer size.

The vertex grid structure creates $(widthSegments + 1) \times (heightSegments + 1)$ points. Each grid cell generates two triangles, except at polar regions where triangle fans prevent degenerate geometry.