-
-
Notifications
You must be signed in to change notification settings - Fork 205
Open
Description
Any generic type arguments on a Pixi class will not be preserved on the generated React component. An example of this is Mesh. The Pixi class takes two types: <GEOMETRY, SHADER>, but the pixiMesh component takes none. This is an issue because GEOMETRY defaults to MeshGeometry and SHADER defaults to TextureShader, so passing props of type Geometry and Shader throws a TypeScript error.
Example
https://codesandbox.io/p/sandbox/pixi-react-mesh-issue-7dj3d8
import { Geometry, Mesh, Shader } from "pixi.js";
import { Application, extend } from "@pixi/react";
import { useMemo } from "react";
extend({ Mesh });
export default function App() {
// Based on https://pixijs.com/8.x/examples/mesh-and-shaders/triangle
const geometry = useMemo(
() =>
new Geometry({
attributes: {
aPosition: [-100, -50, 100, -50, 0, 100],
},
}),
[]
);
const shader = useMemo(
() =>
Shader.from({
gl: {
vertex: `
in vec2 aPosition;
uniform mat3 uProjectionMatrix;
uniform mat3 uWorldTransformMatrix;
uniform mat3 uTransformMatrix;
void main() {
mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix;
gl_Position = vec4((mvp * vec3(aPosition, 1.0)).xy, 0.0, 1.0);
}
`,
fragment: `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`,
},
resources: {},
}),
[]
);
return (
<Application>
<pixiMesh x={400} y={300} geometry={geometry} shader={shader} />
</Application>
);
}Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels