Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/huangcongqing/webgl

WebGL（全写Web Graphics Library）是一种3D绘图协议，可利用canvas,three.js,ECharts进行3D动态绘制，下为学习代码
https://github.com/huangcongqing/webgl

3d-graphics canvas echarts js opengl threejs webgl

Last synced: 6 days ago
JSON representation

WebGL（全写Web Graphics Library）是一种3D绘图协议，可利用canvas,three.js,ECharts进行3D动态绘制，下为学习代码

Host: GitHub
URL: https://github.com/huangcongqing/webgl
Owner: HuangCongQing
License: mit
Created: 2018-03-26T08:03:44.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-06-25T06:29:54.000Z (over 1 year ago)
Last Synced: 2024-11-02T12:42:43.940Z (13 days ago)
Topics: 3d-graphics, canvas, echarts, js, opengl, threejs, webgl
Size: 11.7 KB
Stars: 9
Watchers: 5
Forks: 2
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# WebGL
WebGL（全写Web Graphics Library）是一种3D绘图协议，可利用**canvas,three.js,ECharts**进行3D动态绘制，下为学习代码
有任何问题，欢迎@[双愚](https://github.com/HuangCongQing)，交流讨论。
>其实三者是有联系的
// HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。
// Threejs，一个用于在浏览器中绘制3D图像的WebGL第三方JS库,Threejs在底层其实还是调用html5中的canvas api来实现绘图的。
// ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
```
　WebGL是一种免费的、开放的、跨平台的技术；WebGL派生于OpenGL ES，后者是专用于嵌入式计算机、智能手机、家用游戏机等设备；WebGL基于OpenGL ES 2.0。下图显示了OpenGL、OpenGL ES 和 WebGL的关系：
```
![image.png](https://upload-images.jianshu.io/upload_images/4340772-c7ebc9c79f1ec9d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

[记录几个 *OpenGL* 学习的靠谱网站](https://blog.csdn.net/korekara88730/article/details/79333683)
```

从2.0版本开始，OpenGL支持了一项非常重要的特性，即可编程着色器方法。该特性被OpenGL ES 2.0继承，并成为了WebGL 1.0标准的核心部分。

　　着色器，使用一种类似于C的编程语言实现了精美的视觉效果。编写着色器的语言又称为着色器语言。WebGL基于OpenGL ES 2.0，使用GLSL ES语言编写着色器。

　　虽然WebGL强大到令人惊叹，但使用这项技术进行开发却异常简单：只需要一个文本编辑器（Notepad或TextEdit）和一个浏览器（Chrome）即可；并且不需要去搭建开发环境，因为WebGL是内嵌在浏览器中的。

　　下图显示了WebGL程序的结构：
```
![image.png](https://upload-images.jianshu.io/upload_images/4340772-934f74a820d743c6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

OpenGL自学网站：https://learnopengl-cn.github.io/

## 学习教程

### canvas
>HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。

* [HTML 5 *Canvas* 参考手册](http://www.w3school.com.cn/tags/html_ref_canvas.asp)

### three.js
>Threejs，一个用于在浏览器中绘制3D图像的WebGL第三方JS库,Threejs在底层其实还是**调用html5中的canvas api**来实现绘图的。

* [英文官网：*three.js* - Javascript 3D library](https://threejs.org/)

* [英文：*three.js* / examples](https://threejs.org/examples/)

* [*threejs*基础教程 - WebGL中文网](http://www.hewebgl.com/article/articledir/1)

* [*Three.js* 中文教程 | 参考手册 | 使用指南 | 动画特效实例 | 踏得网](http://techbrood.com/threejs/docs/)
* [*Three.js*中文网](http://hypnosnova.github.io/)

* [郭隆邦_技术博客](http://www.yanhuangxueyuan.com/)

### ECharts
>ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
* [*ECharts*](http://echarts.baidu.com/)[官网](http://trust.baidu.com/vstar/official/intro?type=gw)
* [*ECharts* · Example](http://echarts.baidu.com/echarts2/doc/example.html)

* [*ECharts* Demo](http://www.echartsjs.com/gallery/)

### *HT* *for* *Web*
* [*ht* *for* *web*官网](http://www.hightopo.com/cn-index.html)
>ht是基于HTML5标准的企业应用图形界面一站式解决方案，其包含通用组件、拓扑组件和3D渲染引擎等丰富的图形界面开发类库，提供了完全基于HTML5的矢量编辑器、拓扑编辑器及 3D场景编辑器等多套可视化设计工具，和完善的类库开发手册、工具使用手册、及针对HTML5技术如何进行大规模团队开发的客户深度培训手册。”

* 入门手册 [入门手册 - HT for Web](http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html)
* 矢量手册 [矢量手册 - HT for Web](http://www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html)
* 数据绑定 [数据绑定手册 - HT for Web](http://www.hightopo.com/guide/guide/core/databinding/ht-databinding-guide.html)
* 数据模型 [数据模型手册 - HT for Web](http://www.hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html)

学习三维的话,可以关注以下几点

* 3D 入门手册 [3D 手册 - HT for Web](http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html)
* 建模手册 [建模手册 - HT for Web](http://www.hightopo.com/guide/guide/plugin/modeling/ht-modeling-guide.html)
* OBJ 导入 [OBJ手册 - HT for Web](http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html)

### G2

[G2 4.0 正式版发布](https://www.yuque.com/antv/blog/g2-4.0-released)

### 可视化-热力图

* [pa7](https://github.com/pa7)/**[heatmap.js](https://github.com/pa7/heatmap.js)**
* website：https://www.patrick-wied.at/static/heatmapjs/

## 学习方法
* [如何系统的学习*three.js*? - 知乎](https://www.zhihu.com/question/36367846?from=profile_question_card)
...
## TODO
待续... ...

## LICENSE
本项目全部内容遵守 [MIT 许可协议](https://github.com/HuangCongQing/WebGL/blob/master/LICENSE).