j_oop的博客

1.基本步骤： （1）创建着色器对象（gl.createShader()） （2）向着色器对象中填充着色器程序的源代码（gl.shaderSource()） （3）编译着色器（gl.compileShader()） （4）创建程序对象（gl.createProgram()） （5）为程序对象分配着色器（gl.attachShader()） （6）连接程序对象（gl.linkProgram()） （7）使用程序对象（gl.userProgr...

1.点光源产生的漫反射光 <漫反射光颜色>=<入射光颜色>x<表面基底色>x cosB <漫反射光颜色>=<入射光颜色>x<表面基底色>x(<光线方向>x<法线方向>) 由于点光源产生的光线在物体表面任意一点的入射角度都不相同，需要先计算入射方向矢量（由点光源指向顶点），根据矢量做减法在几何中的意义： <光线方向>=<光源位置矢量>-<...

1.基本概念： 着色：根据光照条件，重建“物体表面明暗不一效果”的过程 光源类型： （1）平行光：没有衰减的平行的光线，类似于太阳光。用一个方向和一个颜色定义。 （2）点光源：理想化为质点点光源，类似于人造灯泡，有光线衰减。用光源位置和颜色定义。 （3）环境光：用于模拟真实世界中的非直射光（由光源发出经过墙壁或其他物体反射的光）。只需要指定颜色。 反射光取决于以下两个因素： （1）入射光（入射光的方向和颜色...

1.绘制立方体： 使用gl.drawArrays方法以gl.TRIANGLES方式绘制需要定义36个顶点，以gl.TRIANGLE_FAN绘制需要24个顶点，但是需要调用6次drawArrays方法。WebGL提供了解决方案：gl.drawElements();API：gl.drawElements（mode，count，type，offset），避免重复定义顶点，保持顶点数量最小 mode：指定绘图方式 count：绘制顶点个数（整型） ...

1.隐藏面消除：虽然透视投影已经将场景的深度效果表现了出来，但是要想得到真实的立体效果还需要将物体的前后遮挡关系正确的显示出来。遗憾的是WebGL并没有那么智能 WebGL在默认情况下会按照缓冲区中的顺序绘制图形，而且后绘制的图形覆盖先绘制的图形。但是WebGL提供了隐藏面消除功能： （1）开启隐藏面消除功能：gl.enable(gl.DEPTH_TEST); （2）在绘制之前清除深度缓冲区gl.clear(gl.DEPTH_BUFFER_BIT);2.gl...

1.可视空间：实际观察得到的区域边界。可视空间由水平视角、垂直视角、可视深度（能看多远）定义。2.分类： （1）四棱锥/金字塔可视空间，由透视投影产生。产生的三维场景看上去更有深度感（第一人称射击游戏） （2）长方体可视空间，也称盒状空间，由正射投影产生。物体的大小与其所在位置没有关系，用户可方便地比较场景中地物体（比如建筑平面图）。3.盒状空间（长方体可视空间）盒状空间由前后两个矩形表面确定，分别称为近裁剪面和远裁剪面，前者四个顶点坐标是（right,top,-near），...

1.基本概念： （1）视点：观察者所处的三维空间中的位置称为视点，视点坐标用（eyeX,eyeY,eyeZ）表示 （2）视线：从视点出发沿着观察方向的射线称作视线。 （3）观察目标点：被观察目标所在的点，以此来确定视线。视线穿过观察目标并继续延伸。观察目标点坐标用(atX,atY,atZ)表示 （4）上方向：最终绘制在屏幕上的影像中的向上的方向，用（upX,upY,upZ）表示。（因为仅确定了视点和观察点，观察者还是可能以视线为轴进行旋转） 根据上述三个矢量...

1.数据类型：GLSL ES支持两种数据值类型：数值类型（整型、浮点型）和布尔值类型。GLSL ES不支持字符串类型2.矩阵和矢量：GLSL ES中，矢量和矩阵的初始化方法遵从一般规律，特别的：初始化矢量时，只传入构造器一个参数，那么构造器会自动地将这个参数赋值给新建矢量的所有元素，如果传入不止一个参数且数量少于矢量元素个数，那么报错；初始化矩阵时，向构造器中传入一个参数，该矩阵代表对角线上元素全是该数值，其余元素全部为0的矩阵，如果传入参数数量大于1又没有达到矩阵要求的个数，那么报错。3.

1.纹理坐标：st坐标系统，纹理左边的原点位于图像左下角，图像右上角的坐标始终是（1.0，1.0）2.纹理坐标与WebGL坐标的映射：3.纹理映射：根据纹理图像，为之前光栅化后的每个图元图上合适的颜色，组成纹理图像的元素称为纹素。4.纹理映射的过程： （1）准备好映射到几何图形上的纹理图像 （2）为几何图像配置纹理映射方式（几何图形的某个片元的颜色取决于纹理图像中哪个像素） （3）加载纹理图像，对其进行一些配置，以在WebGL中使用 （4）在片元着色器...

1.几何图形装配（图元装配）：将孤立的顶点坐标装配成几何图形。几何图形的类别由gl.drawArrays()函数的第一个参数决定，装配出来的基本图形（点、线、面）被称为图元2.光栅化：将装配好的几何图形转化为片元。3.几何图形装配和光栅化过程：光栅化完成后程序逐片调用片元着色器 例如下面程序中着色器的执行过程是： （1）顶点着色器执行三次，获得三角形的顶点坐标并存放在图形的装配区（有多少顶点就执行多少次） （2）开始装配图形，使用传入gl_Posit...

1.动画的实现原理就是不停的对canvas进行重绘2.resquestAnimationFrame(func)：请求浏览器在未来某个时刻回调函数func以完成重绘function tick(){ //绘图操作 requestAnimationFrame(tick);} setInterval（)方法可以实现在指定时间间隔调用某方法，但是现代浏览器每个标签页具有独立的JavaScript环境，非激活状态下setInterval（）方法仍然会运行，增加浏览器负荷3.实..

1.逆时针（正旋转）：如果旋转角是正值，观察者在Z轴正半轴某处，视线沿着Z轴负方向进行观察，那么看到的物体是逆时针方向旋转的。2.右手法则旋转：右手握拳，大拇指伸直并使其指向旋转轴的正方向，那么右手其余手指就指明了旋转的方向。3.平移矩阵：如图：x' = x + Tx ; y' = y + Ty ; z' = z + Tz;则平移矩阵就是：4.旋转矩阵：在二维平面中，x' = x * cosB - y * sinB ; y' = y * sinB + y * cosB ;

WebGL提供了方法drawArrays()用于绘制基本图形gl.drawArrays(mode,first,count); mode：指定绘图方式，可接受以下常量 first：指定从哪个点开始绘制 count：指定本绘制需要用到多少个顶点注意：不同的图形类型，点之间的连接方式不同，需要格外注意点的存储顺序...

1.缓冲区对象：缓冲区对象是WebGL系统中的一块内存区域，我们可以一次性向其中填充大量的顶点数据，供顶点着色器使用。2.使用缓冲区对象步骤： （1）创建缓冲区对象//gl是canvas的上下文对象var vertexBuffer = gl.createBuffer(); （2）绑定缓冲区对象gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer); API：gl.bindBuffer( target,buffer )，允许使用buf...

重点：1 . 用户坐标转换成canvas坐标 2 . 为什么使用匿名函数 3 . 为什么每次点击都要设置背景色var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'attribute float a_PointSize;\n' + 'void main(){\n' + 'gl_Position = a_Position;\n' + 'gl_PointSize = a_PointSize;\n' +

1.用户坐标系：右手直角坐标系，原点为左上角，X轴为水平方向（正方向向右），Y轴垂直（正方向向下），Z轴垂直于屏幕（正方向向外）2.canvas坐标系：原点位于canvas中心，X轴水平向右，Y轴垂直向上，canvas左边缘为（1，0，0），上边缘为（0，1，0）3.鼠标事件获取的用户坐标系转换到canvas坐标系： （1）获取触发事件的对象相对于视口（用户坐标系）的大小及位置 （2）将用户坐标转换成相对于canvas左上角位置的坐标 （3）将坐标原点平移至ca...

1.什么是着色器：着色器提供了灵活且强大的绘制二维和三维图形的方法，所有WebGL程序必须使用它。着色器处理完的结果存储在颜色缓冲区中。2.几种着色器： 顶点着色器（Vertex shader）：用来描述顶点特性（如位置、颜色等）的程序。 顶点着色器对图像的顶点逐点进行处理，即要执行n次（n为顶点个数） 片元着色器（Fragment shader）：进行逐片元处理过程如光照的程序。3.JavaScript与着色器程序的执行过程：...

以机械臂为例，当肩关节转动时手臂上的所有部件跟着转动；当前臂转动时，只有前臂、手掌和手指转动，不影响上臂；当手指转动时，只影响手指。也就是说模型之间要存在层次关系，高级别层次对象的变换会影响低层次对象，反之低级别层次对象的变换不会影响高级别层次对象。下面阐述如何在代码中实现。1.发生转动的部位是关节处，为每个部位添加事件监听，并用变量存储旋转角度function keyDown(ev...

1.问题描述：一般来说，我们设置全局变量来保存模型矩阵的参数，当用户输入时改变参数，最后在draw方法中计算矩阵并传入着色器，但是今天我遇到了这样的问题： 在draw方法中，mvpMatrix.multiply(modelMatrix),键盘事件中以步长的方式改变了模型参数，即：Y_ANGLE +=(-=) ANGLE_STEP；实现的效果出错，原因在于： 当modelMatr...