![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webGL
me_badman
IT新人
展开
-
WebGL+JS流程
1.body中定义canvas元素 onload()function<body onload="webGLStart()"><canvas id="tooth-canvas" style="border: none" width="500" height="500"></canvas></body>2.预加载函数 function webGLStart() { var canva原创 2017-02-21 12:55:23 · 2301 阅读 · 0 评论 -
GL_NEAREST和GL_LINEAR的选择
GL_NEAREST和GL_LINEAR前者表示“使用纹理中坐标最接近的一个像素的颜色作为需要绘制的像素颜色”,后者表示“使用纹理中坐标最接近的若干个颜色,通过加权平均算法得到需要绘制的像素颜色”。前者只经过简单比较,需要运算较少,可能速度较快,后者需要经过加权平均计算,其中涉及除法运算,可能速度较慢(但如果有专门的处理硬件,也可能两者速度相同)。从视觉效果上看,前者效果较差,在一些情况下锯齿现象明转载 2017-02-23 10:54:33 · 7322 阅读 · 0 评论 -
WebGL+JS按键事件 +JS键盘码
在onload function中声明 handleKeys(); document.onkeydown = handleKeyDown; document.onkeyup = handleKeyUp;handleKeyDown(event)function handleKeyDown(event) { currentlyPre原创 2017-02-23 11:43:26 · 2231 阅读 · 0 评论 -
WebGL Lighting
Phong Reflection Model 为方便绘制 将光定义为两种: 1.定向光 directional light. 从它出来的方向,只照射到物体的表面(平行光照射) 2.环境光ambient light 光从任意角度照射到物体的整个表面(现实中ambient light 是由directional light的散射 反射等得来的) 光照射在物体表翻译 2017-02-23 17:38:21 · 427 阅读 · 0 评论 -
WebGL写入光照
1.Buffer中每个顶点的法向量数据cubeNormalVertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,cubeNormalVertexBuffer); var normalVertices = [ // Front face 0.0,原创 2017-02-24 08:54:24 · 599 阅读 · 0 评论 -
WebGL写入Alpha
1.drawScene中写入 //设置Alpha var blending = document.getElementById("blending").checked; if (blending) { gl.blendFunc(gl.SRC_ALPHA, gl.ONE); gl.enable(gl.BLEND);原创 2017-02-24 08:58:29 · 1177 阅读 · 0 评论 -
WebGL 写入纹理
1.onload函数中加载initTexture()2.插入纹理var neheTexture; function initTexture() { //创建纹理空间 neheTexture = gl.createTexture(); neheTexture.image = new Image(); neheTexture.image.o原创 2017-02-22 17:54:51 · 666 阅读 · 0 评论 -
webGL+JS鼠标事件
1.在onload()函数中 //按下松开按钮 //document canvas.onmousedown = handleMouseDown; canvas.onmouseup = handleMouseUp; canvas.onmousemove = handleMouseMove; canvas.原创 2017-02-24 13:55:16 · 2439 阅读 · 0 评论