/gfx-task

Primary LanguageTypeScript

LottieFiles shader challenge starter code

Welcome to the LottieFiles Shader Challenge! This project will help us assess your skills in WebGL graphics and GLSL shader programming. Below are the instructions to get started and the tasks you need to complete.

Get started

  1. Clone this repo.
  2. Install dependencies. (uses pnpm as default, you can use others package managers likes npm or yarn)
  3. Run the development server (pnpm run dev)

What's Provided

  • Starter Code: Renders a red line with a round join type.
  • Control Panel: Located at the top right corner, allowing you to change the line join type.
  • Performance Testing: Option to render 1,000 objects by enabling the renderManyObjects option in the control panel.

Your Tasks

  1. Shader Implementation:
  • Implement shader code to render a line with a miter join type.
  • Bonus: Implement a shader for the bevel join type.
  1. Performance Optimization: Render 1,000 objects Identify and implement optimizations to improve rendering performance.

Evaluation Criteria

  • Correctness: The shaders should accurately render the specified line join types.
  • Performance: Efficient rendering of 1,000 objects with noticeable performance improvements.
  • Code Quality: Clean, readable, and well-documented code.

We look forward to seeing your innovative solutions. Good luck!