Mesh

Creates a PIXI.Mesh

This component empowers you to have maximum flexibility to render any kind of WebGL visuals you can think of. This component assumes a certain level of WebGL knowledge.

Pretty much all WebGL can be broken down into the following:

  • Geometry - The structure and data for the mesh. This can include anything from positions, uvs, normals, colors etc.
  • Shader - This is the shader that PixiJS will render the geometry with (attributes in the shader must match the geometry)
  • State - This is the state of WebGL required to render the mesh.

Usage

<script>
  import { Mesh, onTick } from 'svelte-pixi'
  import * as PIXI from 'pixi.js'

  let rotation = 0

  const geometry = new PIXI.Geometry()
    .addAttribute('aVertexPosition', // the attribute name
        [-100, -100, // x, y
            100, -100, // x, y
            100, 100,
            -100, 100], // x, y
        2) // the size of the attribute
    .addAttribute('aUvs', // the attribute name
        [0, 0, // u, v
            1, 0, // u, v
            1, 1,
            0, 1], // u, v
        2) // the size of the attribute
    .addIndex([0, 1, 2, 0, 2, 3]);

  const vertexSrc = `
    precision mediump float;

    attribute vec2 aVertexPosition;
    attribute vec2 aUvs;

    uniform mat3 translationMatrix;
    uniform mat3 projectionMatrix;

    varying vec2 vUvs;

    void main() {

        vUvs = aUvs;
        gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);

    }`;

  const fragmentSrc = `
    precision mediump float;

    varying vec2 vUvs;

    uniform sampler2D uSampler2;
    uniform float time;

    void main() {

        gl_FragColor = texture2D(uSampler2, vUvs + sin( (time + (vUvs.x) * 14.) ) * 0.1 );
    }`;

  const uniforms = {
      uSampler2: PIXI.Texture.from('/assets/bg_mesh.jpg'),
      time: 0,
  };

  const shader = PIXI.Shader.from(vertexSrc, fragmentSrc, uniforms)

  onTick((delta) => {
      rotation += 0.01 * delta;
      shader.uniforms.time += 0.1 * delta;
  })
</script>


<Mesh
  x={200}
  y={200}
  scale={2}
  {geometry}
  {shader}
  {rotation}
/>

Component API

Props

Name Type Default Description
drawMode PIXI.DRAW_MODES The way the Mesh should be drawn, can be any of the PIXI.DRAW_MODES constants.
geometry PIXI.Geometry Includes vertex positions, face indices, normals, colors, UVs, and
custom attributes within buffers, reducing the cost of passing all this data to the GPU.
Can be shared between multiple Mesh objects.
instance PIXI.Mesh The PIXI.Mesh instance. Can be set or bound to.
shader PIXI.Shader PIXI.MeshMaterial Represents the vertex and fragment shaders that processes the geometry and runs on the GPU.
Can be shared between multiple Mesh objects.
state PIXI.State Represents the WebGL state the Mesh required to render, excludes shader and geometry.
E.g., blend mode, culling, depth testing, direction of rendering triangles, backface, etc.

Additional props are passed on to Container

Slots

Name Props Fallback
default

Events

Name Type Detail
added forwarded
click forwarded
create forwarded
mousedown forwarded
mousemove forwarded
mouseout forwarded
mouseover forwarded
mouseup forwarded
mouseupoutside forwarded
pointercancel forwarded
pointerdown forwarded
pointermove forwarded
pointerout forwarded
pointerover forwarded
pointertap forwarded
pointerup forwarded
pointerupoutside forwarded
removed forwarded
removedFrom forwarded
rightclick forwarded
rightdown forwarded
rightup forwarded
rightupoutside forwarded
tap forwarded
touchcancel forwarded
touchend forwarded
touchendoutside forwarded
touchmove forwarded
touchstart forwarded