| WebGL/WebGPU/three.js Resources | |||||
 | |||||
|
Eric runs across WebGL resources and then tend to lose track of them, so he made this page. Feel free to send him suggestions.
Browser-related
Does this browser support WebGL? Test here.
Reference PagesKhronos Reference cardKhronos Wiki. Blacklist of GPUs that don't run WebGL. Forums and NewsWebGL Dev List on Google GroupsTwitter: #threejs, #webgl Reddit: three.js, WebGL ToolsThere are lots of Javascript development resources. At a minimum, I recommend putting "use strict"; at the top of your programs.Use JSHint to check your code. To develop locally you'll need to use a local servers. Easy ways to start one are ServeZ on the PC, MAMP on Mac. A debugger is built into the browser, e.g., Chrome. Other graphics-specific tools follow. Spector.js for examining renders and state. Documentation. about:tracing in Google Chrome, for examining GPU and CPU usage. Debuggers and profilers, profiling tips, browser editors, Cozzi's list (old) Firefox Canvas Debugger Shader compile/link performance Texture Format Tester Analyzing traces Three.jsHomepage (which includes so very much), Lee Stemkoski's demos, Yomotsu examples, Udacity demos and codeIntroductory tutorial from an free book, with coding inside the browser. API, wiki docs, object overview, (old) quick reference (archived), Thumbnails of examples useful links page More demos: beyond three.js's, find more at Edan Kwan, Fractal Fantasy, and Autodesk Forge. Source code Editor Intro "live" slideset (and my own fork), basics article. Courses and Tutorials for WebGL and Three.jsWebGL Fundamentals and WebGL2 Fundamentals have numerous articles on getting started and specific subjects.The three.js homepage links to
Udacity three.js MOOC course signup, resources (archived), and syllabus (archived) - quite old, but the graphics lectures and general three.js knowledge is still valid (I admit a bias, as I designed it). Barcelona WebGL MOOC course homepage WebGL Lessons: Three.js Shaders on github Steven Wittens' lovely computer graphics lessons using Three.js, and WebGL intro demofest Tarek Sherif's tutorial slide presentation and repository. SIGGRAPH University introduction to WebGL WebGL 2Khronos Reference cardSpecification, related OpenGL ES 3.0 specification How to start using WebGL 2. New features in WebGL 2. Samples and examples, and bugs. PicoGL.js - a minimal WebGL 2 rendering library; tutorial Fun with WebGL 2.0 - short tutorial videos, code repository, and blog SIGGRAPH WebGL BOF videos: 2016, 2017, 2018 Brandon Jones' blog How Cesium creates a WebGL 2 context Many more articles can be found at Jendrik Ullner's site - search on "webgl" File FormatsglTFWebVRWebVR info pageWebGPUWebGPU specChrome ships WebGPU Will Usher's tutorials: Hello world triangle, bind groups and (many!) projects WebGPU Error Handling best practices Many more articles can be found at Jendrik Ullner's site - search on "webgpu" Other FrameworksShadertoy - play with, test, and share procedural shadersbabylon.js glslify - for shaders Polygonjs - node-based shaders and more PlayCanvas WebGLStudio.js A-FRAME - for VR, built atop three.js CesiumJS - for globes and maps Still more options Wikipedia list CompressionOpen3DGCOpenCTM Draco More LinksJust can't get enough? Here are more on WebGL and many other subjects.BooksAn undifferentiated listing of what I've found out there, though not exhaustive - I avoid "web technology" compendiums ("Learn Three.js, WebGL, HTML 5, and everything else in 24 Hours!") and books with no ratings and little information about them. Books are newest to oldest, and those older than five years old have been removed. Some books do come with free sample chapters and code samples (or the whole volume!), and some have extensive samples on Amazon or Google Books, linked.
Thanks to Patrick Cozzi for collecting many of the links to tools.
Contact: Eric Haines
|
|
