/a-blob

:red_circle: :lips: a (vanilla ) WebGL poc-study with Raymarching & Phong Shading.

Primary LanguageJavaScript

A BLOB

A WebGL blob and how-to.

Hello. You can consider this example as a knowledge base for learning the following topics:

  • how to use webgl vanilla - no frameworks -
  • how to use phong shading in a fragment shader
  • how to approach the SDF/Raymarching in GLSL (Signed Distance Functions)
  • how to control the framerate in a render loop
  • how to use webpack for build quick webgl demos

demo

https://a-blob.surge.sh

setup

# install dependencies
npm i

# serve with hot reload at https://localhost:8080
npm run dev

# build for production with minification
npm run build

references