需要源码可以Q群:828202939 或者点击这里 <https://jq.qq.com/?_wv=1027&k=5NiS63x> 
希望可以和大家一起学习、一起进步!!纯手打!!

书籍是PDF电子档,也在Q群里,所有的课程源代码在我上传的资源
<https://download.csdn.net/user/weixin_39452320/uploads>里面,本来想设置开源,好像不行!

如有错别字或有理解不到位的地方,可以留言或者加微信15250969798,在下会及时修改!!!!!

本文开始涉及着色器,开始看不懂没关系,后面博客会详细讲解

目前阶段你只要知道用就可以了!

代码展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
<title>绘制一个点</title> </head> <body onload="main()"> <canvas id="webgl"
width="400" height="400"> 请使用支持的webgl的浏览器 </canvas> <script
src="../lib/webgl-utils.js"></script> <script
src="../lib/webgl-debug.js"></script> <script
src="../lib/cuon-utils.js"></script> <script src="HelloPoint1.js"></script>
</body> </html> // 顶点着色器程序 var VSHADER_SOURCE = 'void main() {\n' + '
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // 设置点的顶点坐标 ' gl_PointSize =
10.0;\n' + // 设置点大小 '}\n'; // 片元着色器程序 var FSHADER_SOURCE = 'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // 定义绘制的点的颜色 '}\n'; function
main() { // 获取canvas元素 var canvas = document.getElementById('webgl'); //
获取webgl绘图上下文 var gl = getWebGLContext(canvas); //检测浏览器是否支持webgl if (!gl) {
console.log('Failed to get the rendering context for WebGL'); return; } //
初始化着色程序 if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.'); return; } // 设置canvas的背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清空canvas gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制一个点,这个点是10个像素点大小的矩形,之所以是这样,是因为绘制矩形要比圆形快 gl.drawArrays(gl.POINTS, 0, 1); }
 

             运行结果:


友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信