Hology
Hology
Hology
  • 👋Welcome to Hology Docs
  • Getting started
    • Introduction to Hology
    • The first steps
    • Editor basics
      • Flying in scenes
      • Placing objects
      • Select objects
      • Transform
      • Grouping objects
      • Duplicate
    • Starter project - Third person shooter
  • Tutorials
    • Rolling ball - Gameplay programming
    • Character movement programming
    • Character AI behavior
  • Release
    • Distribution
      • Discord Activities
      • Facebook Instant Games
      • Upload to Itch.io
      • Host with GitHub Pages
      • Publishing to Steam
      • iOS and Android
  • Assets
    • 3D Models
      • Custom collision shapes
      • Material slots
    • Materials
    • Textures
    • Prefabs
  • Gameplay
    • Actors
      • Creating actor classes
      • Actor parameters
      • Actor components
      • Actor lifecycle
      • Spawning actors
      • Moving actors
    • Services
      • Load assets
    • Player input
    • Collision detection
    • Physics
      • Physics body types
      • Applying forces
      • Ray casting
    • Trigger volumes
    • Character movement
    • Pointer events
    • Animation
      • Animation system
      • Character Animation
      • Animation State Machine
    • Sound
      • Audio parameter
    • World
    • Navigation
  • Shaders
    • Introduction to shaders
    • Creating shaders
    • Shader parameters
    • Typescript shaders
      • Types
      • Math functions
      • Attributes
      • Varying
      • Uniforms
      • Textures
      • Arrays
      • Select
      • Lighting
    • Painted materials
    • Water shader tutorial
  • Level design
    • Landscape sculpting
    • Landscape painting
    • Grass
  • User Interfaces
    • Creating user interfaces
    • Using React
    • VR
  • Visual Effects
    • Introduction to VFX
    • VFX Assets
  • Integrations
    • Arcweave
Powered by GitBook
On this page
  1. Shaders

Shader parameters

Shader parameters are properties on the shader class that you can set in the editor for materials created using the shader. This allows you to customize the shader's appearance from the editor and reuse the code for different materials

Parameters can be created by adding the @Parameter() decorator on a property in your actor class. The type of the parameter will be inferred by your property's type annotation.

The example below shows all currently supported types.

import { rgb, standardMaterial } from "@hology/core/shader-nodes";
import { NodeShader, NodeShaderOutput, Parameter } from "@hology/core/shader/shader";
import { Color, Vector2, Vector3, Color, Euler } from "three";

export class ExampleShader extends NodeShader {
    @Parameter() color: Color = new Color(0xff0000)
    @Parameter() aNumber: number
    @Parameter() aBoolen: boolean
    @Parameter() aString: string
    @Parameter() vec2: Vector2
    @Parameter() vec3: Vector3
    @Parameter() color: Color
    @Parameter() rotation: Euler

    output(): NodeShaderOutput {
        return {
            color: standardMaterial({color: rgb(this.color)})
        }
    }
}
PreviousCreating shadersNextTypescript shaders

Last updated 1 year ago