• Stars
    star
    105
  • Rank 328,196 (Top 7 %)
  • Language
    JavaScript
  • Created over 5 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

代码清晰、直接、可追溯的一系列 WebGL 示例

WebGL Seminar

WebGL 学习小组整理的入门资料

What's This

这个项目提供:

  • 以代码清晰、直接、可追溯为目标而编写的一系列 WebGL 示例。
  • 与示例配套的讲解文档。

图形学的代码以繁冗而著称——从教程中的概念到实际的实现,往往隔着巨大的工程量鸿沟。虽然 WebGL 已经非常方便,但其相关的示例仍往往有着这个领域里常见的潦草感,会让你有停留在上一个时代的错觉。但在今天,我们已经能够在 Web 前端组织出清晰、简洁、模块化的代码了。因此,我们使用现代的前端工程标准重写了一系列经典的 WebGL 示例,这些示例编写的都是「干净」的代码,甚至无需安装依赖,无需构建流程就能查看。

和这些代码配套的,是相应例子的讲解文档。当然,要入门 WebGL,你也许仍然需要一份经典教材,但我们十分相信,这里的内容能帮助你显著地改善入门这一领域时的心情。示例包括:

Run Examples

示例代码均只需在项目根目录下启动静态服务器即可运行,无需构建与依赖管理:

Online Demo

npm i -g http-server && http-server .

在 docs 目录下则包含了每个示例对应的注释资料。

一个非常有意义的事情,是去确认各个示例是如何逐渐从最基本的三角形而演化出来的。这时,你可以使用形如这样的命令:

# 从三角形到立方体
git diff --no-index ./examples/triangle ./examples/cube

# 从立方体到纹理
git diff --no-index ./examples/cube ./examples/texture

# 从立方体到基础光照
git diff --no-index ./examples/cube ./examples/lighting

# 从基础光照到冯氏光照
git diff --no-index ./examples/lighting ./examples/phong

# 从纹理绘制到图像滤镜
git diff --no-index ./examples/texture ./examples/image-filter

# 从纹理绘制到渲染帧缓冲区对象
git diff --no-index ./examples/texture ./examples/fbo

我们对代码的一致性有很高的要求,故而你完全可以将这样的 diff 作为从学习 A 过渡到学习 B 的时候,没有冗余的最短路径。

Enjoy the power of GPU!

More Repositories

1

jshistory-cn

🇨🇳 《JavaScript 二十年》中文版
TypeScript
4,205
star
2

beam

✨ Expressive WebGL
JavaScript
516
star
3

react-ssd1306

📟 A React Renderer for SSD1306 OLED chip on Raspberry Pi.
C
360
star
4

mocha1995

☕️ The world's first JavaScript engine written in 1995 by Brendan Eich, now compiled back to JS and WASM!
C
290
star
5

freecube

⚛ Solve Rubik's Cube with WebGL in 10KB.
JavaScript
127
star
6

sinomap

🌎 Super lightweight canvas map lib.
JavaScript
107
star
7

learn-wgpu-cn

🇨🇳 《Learn Wgpu》中文版
Rust
104
star
8

nativebird

🐦 Bluebird alternative within ~200 loc
JavaScript
78
star
9

minimal-js-runtime

A toy JavaScript runtime based on QuickJS and libuv.
C
66
star
10

bumpover

🚧 Async data transforming with simple rules.
JavaScript
65
star
11

merry8

📺 Chip-8 emulator for web.
JavaScript
53
star
12

vue-cmap

Vue China map visualizing component, supports drilldown and lazy loading.
JavaScript
39
star
13

fe-native-lang

Native language guide for FE developers.
C
31
star
14

crdt-and-local-first

A slide - WIP
Vue
28
star
15

HTML-Toy-Parser

一个玩具级的 HTML 转虚拟 DOM 编译器
JavaScript
27
star
16

ove-lang

👓 ove-lang, a language for his true fans.
HTML
26
star
17

vue-springbud

不是最简洁的 Vue 生产环境模板
JavaScript
24
star
18

MiyooSDK

🐳 Docker environment for developing Miyoo Linux apps.
Dockerfile
23
star
19

blog

📝 My tech blog.
JavaScript
22
star
20

psp-js

Modern JavaScript runtime for Sony PSP, based on rust-psp and QuickJS.
Rust
19
star
21

nano-mvc

Demo MVC framework in 40 lines, 1KB
JavaScript
18
star
22

slate-doc-cn

🇨🇳 Translation of Slate.js official doc.
14
star
23

rx-elevator-demo

Reactive Demo
JavaScript
14
star
24

flylog

Front end AOP logging and monotoring tool.
Vue
13
star
25

naming-style-demo

前端框架命名风格比较
JavaScript
12
star
26

learn-cs

💾 Resources learning basics.
Assembly
11
star
27

ustc-gpa

GPA calculator for USTCers
JavaScript
10
star
28

naiveScroll

Tiny jQuery full page scroll effect plugin.
JavaScript
10
star
29

repeater

📼 Record browser events as visual test case.
JavaScript
9
star
30

js-framework-intro

JavaScript 框架设计入门
9
star
31

render-adapters-poc

POC for customizing UI framework renderers.
JavaScript
6
star
32

gomoku

JavaScript Gomuku AI for Web
JavaScript
5
star
33

eslint-plugin-pangu-comment

Pangu whitespace for Chinese comments.
JavaScript
4
star
34

zlayer

⚡️ Image render layer with GPU acceleration.
JavaScript
4
star
35

psp-test-app

Simple test app based on rust-psp
Rust
4
star
36

icard-ustc

Consume record analyzer for USTCers
Python
3
star
37

examples

Static HTML examples just for fun :)
HTML
2
star
38

pages-cn

My Blog Dist HTML Pages
HTML
2
star
39

compilExpt

Experimental compiler-related JS project.
JavaScript
2
star
40

rollup-scaffold

A simple rollup config scaffold
JavaScript
2
star
41

visue

vue visualizing dev tool
JavaScript
2
star
42

slate-playground

Pluggable editor playground.
JavaScript
1
star
43

sikuli-coc

HTML
1
star
44

ck.js

cookie lib in 2 lines
JavaScript
1
star
45

legs

Light Easy Gulp Scaffold
JavaScript
1
star
46

n7books

Second hand book exchange platform for USTCers
PHP
1
star
47

nano-computed

explain how computed works in 30 lines.
JavaScript
1
star
48

imdoc

markdown documentation generator
CSS
1
star
49

Markdown-Table-Converter

Edit and reformat markdown table.
JavaScript
1
star
50

tennis-match-recorder

Tennis match recorder and more
JavaScript
1
star
51

ustc-ring

Graduation Ring Exchange Platfrom for USTCers
HTML
1
star