html5的webgl制作,使用WebGL绘制一个点

WebGL绘制一个点(HTML框架文件)

源码下载

学习建议

初学者，前几十节入门课程一定要按照顺序学习，不要跳过

学习前面入门课程，可以不求甚解，有个整体印象即可

学习前面入门课程，可以不用动手写代码，但是一定要动手改代码，做到复制、粘贴、替换就可以

后面关于WebGL硬件、渲染管线、着色器语言、数学、光照模型等章节根据需要可以随时阅读，对照前面的入门案例与后面的系统总结学习更好

明白自己欠缺哪些知识，有选择地学习本教程

本教程入门部分以具体案例作为驱动学习，面向工程编程，不面向科学编程

本节课不需要记住具体知识，有个框架印象即可，尝试更改几个参数，体验效果，互动学习，可以让自己更沉浸其中

本着先实验，后讲解的学习精神，先给大家列出一个完整的WebGL代码，麻雀虽小，五脏俱全，可以通过上面链接下载源码，是一个.html格式文档，也就是浏览器可以打开并解析的文档。

这一节课涉及的关键词有超文本语言HTML、脚本语言Javascript、着色器语言GLSL ES和WebGL API。学习之前先看看自己懂什么知识，不懂什么知识，课程尽

量在新知识学习时照顾不同专业和领域的人，但是个人最起码有基本的编程能力。对于编程基础非常好只是恰好之前没接触WebGL的相关知识，建议可以利用本教程的源代码边修改边测试边学习，没必要

上来就先把各个模块的知识补充完再来学习。如果你擅长java、Python等语言，学习Javascript语言也不是什么难事，你对C语言非常了解，与C一样是强类型的着色器语言GLSL ES也很好理解。对于经常用

C++和OpenGL API开发基于操作系统应用的工程师来说，学习WebGL只是迁移一个生态系统，切换到了互联网生态圈，图形学本质的东西没有变。对于你来说，主要是了解前端的一些知识，网上关于html和Javascript

的教程非常多，但是都是侧重于网页设计，对于你来说很多知识是冗余的，教程又臭又长，估计也没有学习的心情。本教程为了照顾这部分人的需求会讲解html的知识，但是仅仅讲解本节课会用到的，多余的不会讲解，

遇到不懂得，不必深究，互联网是一个大生态，不可能什么都会。大家可以把这节课的html文档当成WebGl开发的一个HTML框架，平时只需要写关于图形学的内容，对于body、head、meta等名词不用管什么意思。你当它

不存在，每一次写程序直接拿过来补充添加就行。

1使用WebGL绘制一个点

41//创建顶点着色器对象varvertexShader = gl.createShader(gl.VERTEX_SHADER);//创建片元着色器对象varfragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//引入顶点、片元着色器源代码46 gl.shaderSource(vertexShader,vertexShaderSource);47 gl.shaderSource(fragmentShader,fragmentShaderSource);//编译顶点、片元着色器49 gl.compileShader(vertexShader);50 gl.compileShader(fragmentShader);//创建程序对象programvarprogram = gl.createProgram();//附着顶点着色器和片元着色器到program55 gl.attachShader(program,vertexShader);56 gl.attachShader(program,fragmentShader);//链接program58 gl.linkProgram(program);//使用program60 gl.useProgram(program);//返回程序program对象returnprogram;