Improved boilerplate on new shaders

Open
#10 8 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
three.js
Domain
computer-graphics

Research direction

Start by tracing the editor entry point that creates new shaders and reviewing how the default vertex and fragment shaders expose Three.js varyings and time-related values. Done means newly created shaders include the requested boilerplate, while preserving existing shader behavior and covering the defaults with the project's available checks.

Written by the indexing model from the issue text.

Description

Finally learned enough GLSL and THREE-flavored GLSL to be dangerous!

Went to port over some of my shader-toys and from what I remember the process went something like this.

  1. Created a new shader.
  2. Struggled a bit to hook up some of the usual varyings like vNormal/vPosition/vUv etc....
  3. Couln't figure out how to add iTime.
  4. Bailed lol.

I think some upgraded default boilerplate is gonna go a long way for easier adoption:

  1. Add in all of the default available varyings through threejs vNormal, vPosition, vUv, the vertexColor one. Doesn't have to use all of them per say but just have them declared in the default vertex/frag shaders.
  2. Add a default iTime or iTime equivelant.

As always look up to your stuff Andrew, loved the parrallax demo of recent and can't wait to make some dank frogs.

Dominant language
TypeScript
Stars
60
Forks
11
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ShaderFrog/editor

All issues in ShaderFrog/editor

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.