textmode.js 0.2.0-beta.2 → 0.2.0-beta.3

package/dist/types/rendering/webgl/types/DrawCommand.d.ts

@@ -1,6 +1,15 @@
 import type { GeometryParams, GeometryType } from './GeometryTypes';
 import type { IRenderState } from '../RenderState';
-export type DrawParams = GeometryParams;
+import type { GLShader } from '../Shader';
+export type CustomRectParams = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    shader: GLShader;
+    uniforms: Record<string, any>;
+};
+export type DrawParams = GeometryParams | CustomRectParams;
 export interface DrawCommand {
     id: number;
     type: GeometryType;

package/dist/types/rendering/webgl/types/RenderTypes.d.ts

@@ -9,4 +9,6 @@ export interface RenderContext {
     shader: GLShader;
     gl: WebGL2RenderingContext;
     viewport: [number, number, number, number];
+    cellWidth?: number;
+    cellHeight?: number;
 }

package/dist/types/textmode/mixins/RenderingMixin.d.ts

@@ -1,11 +1,17 @@
 import type { Mixin } from './TextmodifierMixin';
+import type { GLShader } from '../../rendering/webgl/Shader';
+/**
+ * Supported uniform value types for shader parameters
+ */
+type UniformValue = number | boolean | number[] | Float32Array | Int32Array | WebGLTexture;
 /**
  * Interface for rendering capabilities that will be mixed into Textmodifier
  */
 export interface RenderingCapabilities {
     /**
-     * Sets the rotation angle for subsequent shape rendering operations
-     * @param degrees The rotation angle in degrees
+     * Set a custom shader for subsequent rendering operations.
+     * Pass null to return to the default shader.
+     * @param shader The custom shader to use, or null to use the default shader
      *
      * @example
      * ```javascript
@@ -14,14 +20,219 @@ export interface RenderingCapabilities {
      *   height: 600,
      * })
      *
+     * // Create a custom filter shader
+     * const customShader = t.createFilterShader(`
+     *   // ... fragment shader code ...
+     * `);
+     *
      * t.draw(() => {
      *   t.background(0);
      *
-     *   // todo...
+     *   // Use custom shader
+     *   t.shader(customShader);
+     *   t.setUniform('u_frameCount', t.frameCount);
+     *   t.rect(0, 0, t.grid.cols, t.grid.rows);
+     *
+     *   // Return to default shader
+     *   t.shader(null);
+     * });
+     * ```
+     */
+    shader(shader: GLShader | null): void;
+    /**
+     * Set a uniform value for the current custom shader.
+     * @param name The name of the uniform variable
+     * @param value The value to set
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * const shader = t.createFilterShader(`
+     *   uniform float u_time;
+     *   // ... rest of shader ...
+     * `);
+     *
+     * t.draw(() => {
+     *   t.shader(shader);
+     *   t.setUniform('u_time', t.frameCount * 0.02);
+     *   t.rect(0, 0, t.grid.cols, t.grid.rows);
+     * });
+     * ```
+     */
+    setUniform(name: string, value: UniformValue): void;
+    /**
+     * Set multiple uniform values for the current custom shader.
+     * @param uniforms Object containing uniform name-value pairs
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * const shader = t.createFilterShader(`
+     *   uniform float u_time;
+     *   uniform vec2 u_resolution;
+     *   // ... rest of shader ...
+     * `);
+     *
+     * t.draw(() => {
+     *   t.shader(shader);
+     *   t.setUniforms({
+     *     u_time: t.frameCount * 0.02,
+     *     u_resolution: [t.grid.cols, t.grid.rows]
+     *   });
+     *   t.rect(0, 0, t.grid.cols, t.grid.rows);
+     * });
+     * ```
+     */
+    setUniforms(uniforms: Record<string, UniformValue>): void;
+    /**
+     * Create a custom filter shader from fragment shader source code.
+     * The fragment shader will automatically receive the standard vertex shader inputs
+     * and must output to all 5 MRT attachments.
+     * @param fragmentSource The fragment shader source code
+     * @returns A compiled shader ready for use with shader()
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * const noiseShader = t.createFilterShader(`
+     *   #version 300 es
+     *   precision highp float;
+     *
+     *   in vec2 v_uv;
+     *   in vec3 v_character;
+     *   in vec4 v_primaryColor;
+     *   in vec4 v_secondaryColor;
+     *   in vec2 v_rotation;
+     *   in vec3 v_transform;
+     *
+     *   uniform float u_frameCount;
+     *
+     *   layout(location = 0) out vec4 o_character;
+     *   layout(location = 1) out vec4 o_primaryColor;
+     *   layout(location = 2) out vec4 o_secondaryColor;
+     *   layout(location = 3) out vec4 o_rotation;
+     *   layout(location = 4) out vec4 o_transform;
+     *
+     *   float random(vec2 st) {
+     *     return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
+     *   }
+     *
+     *   void main() {
+     *     vec2 gridPos = floor(gl_FragCoord.xy);
+     *     float noise = random(gridPos + u_frameCount * 0.1);
+     *
+     *     o_character = vec4(noise, 0.0, 0.0, 1.0);
+     *     o_primaryColor = vec4(vec3(noise), 1.0);
+     *     o_secondaryColor = vec4(0.0, 0.0, 0.0, 1.0);
+     *     o_rotation = vec4(0.0, 0.0, 0.0, 1.0);
+     *     o_transform = vec4(0.0, 0.0, 0.0, 1.0);
+     *   }
+     * `);
+     *
+     * t.draw(() => {
+     *   t.shader(noiseShader);
+     *   t.setUniform('u_frameCount', t.frameCount);
+     *   t.rect(0, 0, t.grid.cols, t.grid.rows);
+     * });
+     * ```
+     */
+    createFilterShader(fragmentSource: string): GLShader;
+    /**
+     * Sets the rotation angles for subsequent shape rendering operations
+     * @param degreesX The rotation angle in degrees around the X-axis (optional, defaults to 0)
+     * @param degreesY The rotation angle in degrees around the Y-axis (optional, defaults to 0)
+     * @param degreesZ The rotation angle in degrees around the Z-axis (optional, defaults to 0)
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *
+     *   // Rotate only around Z-axis (backward compatible)
+     *   t.rotate(0, 0, 45);
+     *
+     *   // Rotate around all three axes
+     *   t.rotate(30, 45, 60);
+     *
+     *   t.rect(10, 10, 5, 5);
+     * });
+     * ```
+     */
+    rotate(degreesX?: number, degreesY?: number, degreesZ?: number): void;
+    /**
+     * Sets the X-axis rotation angle for subsequent shape rendering operations
+     * @param degrees The rotation angle in degrees around the X-axis
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.rotateX(45); // Rotate around X-axis
+     *   t.rect(10, 10, 5, 5);
+     * });
+     * ```
+     */
+    rotateX(degrees: number): void;
+    /**
+     * Sets the Y-axis rotation angle for subsequent shape rendering operations
+     * @param degrees The rotation angle in degrees around the Y-axis
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.rotateY(45); // Rotate around Y-axis
+     *   t.rect(10, 10, 5, 5);
+     * });
+     * ```
+     */
+    rotateY(degrees: number): void;
+    /**
+     * Sets the Z-axis rotation angle for subsequent shape rendering operations
+     * @param degrees The rotation angle in degrees around the Z-axis
+     *
+     * @example
+     * ```javascript
+     * const t = await textmode.create({
+     *   width: 800,
+     *   height: 600,
+     * })
+     *
+     * t.draw(() => {
+     *   t.background(0);
+     *   t.rotateZ(45); // Rotate around Z-axis
+     *   t.rect(10, 10, 5, 5);
      * });
      * ```
      */
-    rotate(degrees: number): void;
+    rotateZ(degrees: number): void;
     /**
      * Save the current rendering state to the state stack.
      * Use with {@link pop} to isolate style changes within a block.
@@ -407,3 +618,4 @@ export interface RenderingCapabilities {
  * @returns Extended class with rendering capabilities
  */
 export declare const RenderingMixin: Mixin<RenderingCapabilities>;
+export {};

package/dist/types/textmode/mixins/ShaderMixin.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "textmode.js",
-  "version": "0.2.0-beta.2",
+  "version": "0.2.0-beta.3",
   "description": "Apply real-time ASCII conversion to any HTML canvas.",
   "type": "module",
   "types": "./dist/types/index.d.ts",