ts-webgl-template

The preinstalled environment with a lot of awesome things to start working with computer graphics in browser without headache about webpack and other configs.

Installation

• npm install
• npm init (optional)

Scripts

• npm run start for development
• npm run build for release build
• npm run test for unit tests
• npm run lint:styles:fix to fix linting in css
• More in ./package.json

Features:

• Configured webpack.config.ts with detailed comments
• • Using typescript for config
• • Configured source maps
• • Configured minificators for release build
• • Configured SASS
• • Configured GLSL shaders loader webpack-glsl-minify
• Configured unit-test
• • Configured jest
• • Simple example unit-test (example.test.ts)
• Configured vsconfig
• • Use propper linting
• • Launch script to run specific unit test file in debug mode
• • Launch browser attaching to VsCode for debugging right in the IDE
• Configured linting
• • Configured eslint to use google typescript style guide
• • Configured css/sass linting
• • Configured prettier
• Implemented a simple project
• • Simple fullscreen shader render loop
• • Use twgl
• • Use tweakpane

The simple project:

The simple shader equivalent to shadertoy template with Tweakpane tuner