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

Typescript shaders

With Hology Engine, you can write your shaders directly in Typescript, the same programming languages as the rest of your game play code. You can express any logic that you can do in a lower level language as GLSL while enjoying the benefits of using a higher level language like Typescript.

Internally, typescript code will build up a graph of nodes representing the calculations, which explains the use of the word node. These nodes are then converted to the code that is compiled to run on the GPU so it has no negative effect on performance.

See Creating shaders for how to create a new Typescript shaders that can be used to create materials in the editor.

You can also use this shader library to create shaders for materials that are created directly in code instead of in the editor.

import { rgb, standardMaterial, translateY, sin, float, NodeShaderMaterial, timeUniforms } from "@hology/core/shader-nodes"
import { SphereGeometry, Mesh } from "three"


const time = timeUniforms.elapsed
const diffuse = rgb(0x00ff00)
const color = standardMaterial({ color: diffuse })
const bounce = translateY(sin(time.multiply(float(5))))

const material = new NodeShaderMaterial({
  color,
  transform: bounce
})

const sphere = new SphereGeometry(5, 30, 15)
const mesh = new Mesh(sphere, material)

PreviousShader parametersNextTypes

Last updated 1 year ago