import GeometryBase, { GeometryAttribute, GeometryBaseOpts } from './GeometryBase'; import type Matrix4 from './math/Matrix4'; export interface GeometryOpts extends GeometryBaseOpts { } /** * Geometry in ClayGL contains vertex attributes of mesh. These vertex attributes will be finally provided to the {@link clay.Shader}. * Different {@link clay.Shader} needs different attributes. Here is a list of attributes used in the builtin shaders. * * + position: `clay.basic`, `clay.lambert`, `clay.standard` * + texcoord0: `clay.basic`, `clay.lambert`, `clay.standard` * + color: `clay.basic`, `clay.lambert`, `clay.standard` * + weight: `clay.basic`, `clay.lambert`, `clay.standard` * + joint: `clay.basic`, `clay.lambert`, `clay.standard` * + normal: `clay.lambert`, `clay.standard` * + tangent: `clay.standard` * * #### Create a procedural geometry * * ClayGL provides a couple of builtin procedural geometries. Inlcuding: * * + {@link clay.geometry.Cube} * + {@link clay.geometry.Sphere} * + {@link clay.geometry.Plane} * + {@link clay.geometry.Cylinder} * + {@link clay.geometry.Cone} * + {@link clay.geometry.ParametricSurface} * * It's simple to create a basic geometry with these classes. * ```js const sphere = new clay.geometry.Sphere({ radius: 2 }); ``` * * #### Create the geometry data by yourself * * Usually the vertex attributes data are created by the {@link clay.loader.GLTF} or procedural geometries like {@link clay.geometry.Sphere}. * Besides these, you can create the data manually. Here is a simple example to create a triangle. ```js const TRIANGLE_POSITIONS = [ [-0.5, -0.5, 0], [0.5, -0.5, 0], [0, 0.5, 0] ]; const geometry = new clay.GeometryBase(); // Add triangle vertices to position attribute. geometry.attributes.position.fromArray(TRIANGLE_POSITIONS); ``` * Then you can use the utility methods like `generateVertexNormals`, `generateTangents` to create the remaining necessary attributes. * * * #### Use with custom shaders * * If you wan't to write custom shaders. Don't forget to add SEMANTICS to these attributes. For example * ```glsl uniform mat4 worldViewProjection : WORLDVIEWPROJECTION; uniform mat4 worldInverseTranspose : WORLDINVERSETRANSPOSE; uniform mat4 world : WORLD; attribute vec3 position : POSITION; attribute vec2 texcoord : TEXCOORD_0; attribute vec3 normal : NORMAL; ``` * These `POSITION`, `TEXCOORD_0`, `NORMAL` are SEMANTICS which will map the attributes in shader to the attributes in the GeometryBase * * Available attributes SEMANTICS includes `POSITION`, `TEXCOORD_0`, `TEXCOORD_1` `NORMAL`, `TANGENT`, `COLOR`, `WEIGHT`, `JOINT`. * * * @constructor clay.Geometry * @extends clay.GeometryBase */ declare class Geometry extends GeometryBase { mainAttribute: string; /** * Calculated bounding box of geometry. */ attributes: { position: GeometryAttribute<3>; texcoord0: GeometryAttribute<2>; texcoord1: GeometryAttribute<2>; normal: GeometryAttribute<3>; tangent: GeometryAttribute<4>; color: GeometryAttribute<4>; weight: GeometryAttribute<3>; joint: GeometryAttribute<4>; barycentric: GeometryAttribute<3>; [key: string]: GeometryAttribute; }; constructor(opts?: Partial); /** * Update boundingBox of Geometry */ updateBoundingBox(): void; /** * Generate normals per vertex. */ generateVertexNormals(): void; /** * Generate normals per face. */ generateFaceNormals(): void; /** * Generate tangents attributes. */ generateTangents(): void; /** * If vertices are not shared by different indices. */ isUniqueVertex(): boolean; /** * Create a unique vertex for each index. */ generateUniqueVertex(): void; /** * Generate barycentric coordinates for wireframe draw. */ generateBarycentric(): void; /** * Apply transform to geometry attributes. * @param {clay.Matrix4} matrix */ applyTransform(matrix: Matrix4): void; } export { GeometryAttribute }; export default Geometry;