Vertices

Draw vertices with texture mapping and color interpolation

Draws vertices, which are useful for creating custom shapes with texture mapping and color blending.

Properties

Name	Type	Description
vertices	Point[]	Vertices to draw
mode?	VertexMode	triangles, triangleStrip, or triangleFan (default: triangles)
indices?	number[]	Indices for vertices that form triangles
textures	Point[]	Texture mapping coordinates
colors?	string[]	Optional colors for each vertex
blendMode?	BlendMode	Blend mode for colors (default: dstOver with colors, srcOver without)

Using Texture Mapping

Texture mapping allows you to apply shaders to custom shapes:

import { 
  Canvas, 
  Group, 
  ImageShader, 
  Vertices, 
  vec, 
  useImage 
} from "@shopify/react-native-skia";

const VerticesDemo = () => {
  const image = useImage(require("./assets/squares.png"));
  const vertices = [vec(64, 0), vec(128, 256), vec(0, 256)];
  const colors = ["#61dafb", "#fb61da", "#dafb61"];
  const textures = [vec(0, 0), vec(0, 128), vec(64, 256)];
  
  if (!image) {
    return null;
  }
  
  return (
    <Canvas style={{ flex: 1 }}>
      <Group>
        <ImageShader image={image} tx="repeat" ty="repeat" />
        {/* With colors, default blendMode is dstOver */}
        <Vertices vertices={vertices} colors={colors} />
        <Group transform={[{ translateX: 128 }]}>
          {/* Without colors, default blendMode is srcOver */}
          <Vertices vertices={vertices} textures={textures} />
        </Group>
      </Group>
    </Canvas>
  );
};

Using Indices

Indices allow you to define triangles without duplicating vertex data. In this example, four vertices define two triangles:

import { Canvas, Vertices, vec } from "@shopify/react-native-skia";

const IndicesDemo = () => {
  const vertices = [
    vec(0, 0),      // 0: top-left
    vec(256, 0),    // 1: top-right
    vec(256, 256),  // 2: bottom-right
    vec(0, 256)     // 3: bottom-left
  ];
  const colors = ["#61DAFB", "#fb61da", "#dafb61", "#61fbcf"];
  
  // First triangle: 0, 1, 2 (top-left, top-right, bottom-right)
  const triangle1 = [0, 1, 2];
  // Second triangle: 0, 2, 3 (top-left, bottom-right, bottom-left)
  const triangle2 = [0, 2, 3];
  const indices = [...triangle1, ...triangle2];
  
  return (
    <Canvas style={{ flex: 1 }}>
      <Vertices 
        vertices={vertices} 
        colors={colors} 
        indices={indices} 
      />
    </Canvas>
  );
};

Vertex Modes

Triangles

Each set of 3 vertices forms an independent triangle:

const vertices = [
  vec(0, 0), vec(50, 0), vec(25, 50),  // Triangle 1
  vec(50, 0), vec(100, 0), vec(75, 50), // Triangle 2
];

Triangle Strip

Each vertex after the first two creates a new triangle with the previous two vertices:

const vertices = [
  vec(0, 0), vec(50, 0), vec(0, 50),   // Triangle 1
  vec(50, 50),  // Triangle 2 uses previous 2 vertices
];

Triangle Fan

All triangles share the first vertex:

const vertices = [
  vec(50, 50),  // Center point (shared by all)
  vec(0, 0), vec(100, 0),   // Triangle 1
  vec(100, 100),  // Triangle 2
  vec(0, 100),    // Triangle 3
];

Use Cases

• Custom shapes - Create complex geometric shapes
• Texture mapping - Apply textures to arbitrary polygons
• Gradients - Smooth color transitions across surfaces
• 3D meshes - Render 3D-like objects
• Terrain - Height maps and landscapes

Related

• Patch - Coons patches for curved surfaces
• Image Shaders - Apply textures
• Atlas - Efficient sprite rendering