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={360} y={200} anchor={0.5} scale={2} {geometry} {shader} {rotation} />

API

Props

Name	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.ShaderPIXI.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
globalmousemove	forwarded
globalpointermove	forwarded
globaltouchmove	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