WebGL学习笔记(1)

来源：互联网发布：icmp协议的ip端口号编辑：程序博客网时间：2024/04/29 21:06

 最近正在学习WebGL，为了能够更好地理解它，所以决定写博客记录自己学习的过程。本文可能并不是十分专业，若是其中有错误希望大家及时指正。由于WegGL是基于 OpenGL ES 2.0 的，如果有基础的同学相信会学的相当快。当然咱没有基础就是了。。。

准备工作

WebGL文档：https://www.khronos.org/registry/webgl/specs/1.0/
MDN学习资料（建议）：https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
配置开发环境，我用的是WebStrom。用它打开WebGL提示功能会非常好用。
【file】-【setting】-【Languages & Frameworks】-【Javascript】-【Libraries】-勾选【WebGL】（没有webGL选项的可以点击右边download，有惊喜哦~）

第一个WebGL程序

test01.html

<!DOCTYPE html><html><head lang="zh-cn">    <meta charset="UTF-8">    <title></title>    <style>        #canvas{            width:800px;            height: 600px;            background: #333;;        }    </style></head><body>    <canvas id="canvas"></canvas>    <script src="js/test01.js" type="text/javascript"></script></body></html>

test01.js

// 取得canvas的dom节点var canvas=document.getElementById('canvas');// 取得WebGL实例var gl=canvas.getContext('webgl')|| canvas.getContext("experimental-webgl");// 设置一个类型为Float32Array的颜色到颜色缓冲区COLOR_BUFFER_BIT//  void gl.clearColor(red, green, blue, alpha); 四个参数都是0~1的浮点数，因此如果用的是PS的RGB值，应当除以255gl.clearColor(255/255,150/255,10/255,1.0);//使用颜色缓冲区COLOR_BUFFER_BIT的颜色填充gl.clear(gl.COLOR_BUFFER_BIT);

最终效果
canvas被填充成了橘黄色
这里写图片描述

0 0