【WebGL编程指南理论分析之物体层次模型（局部运动）】的更多相关文章

WebGL编程指南理论分析之物体层次模型（局部运动）

书中340页,开始讲到层次模型(关节模型),也就是整个物体,可以自由控制其各部位单独运动,就像关节一样,互不干扰或者有一定关联. 就像图中,左右键控制整个物体(arm1和arm2)的Y轴旋转,上下键控制arm2的X轴旋转. 如果你只是扣教程上的字眼的话,会指出上面这句话是错的,但是如果你理解了教程中的代码之后,你会说我是对的. 一.教程中的相关代码 对于两段手臂,分别是这样画的,首先,传入一个位于(0,0,0)立方体cube的顶点和其他数据(处理颜色的相关数据,如基色.环境色.向量等,这里不做讨…

WebGL编程指南理论分析之物体的运动和点光源

之前的所有案例中物体都是静止的并且是平行光照射,这里我们来讨论一下运动物体和点光源. 一.运动物体 我们知道对于一个提供原始顶点坐标和原始顶点法向量数据的着色器绘制出来的图形看上去是这样的: 看上去很有立体感,但是如果把颜色去掉之后: 立体感全无,这是因为没有对光线做出反映. 通过前面的学习,我们知道, ①在平行光下:最终颜色(漫反射光颜色 )= 入射光线颜色 x 表面基底色 x (光线方向 · 法线方向) 顶点着色器变量:物体基色.光线颜色.点的法向量.归一化的光线坐标 当物体运动的时候,上述…

【WebGL】《WebGL编程指南》读书笔记——第6章

一.前言        最近重感冒发烧,妈蛋好难受,请假了3天,驾校也没去,简直僵硬!今天继续WebGL的学习. 二.正文        A. GLSL支持两种数据值类型: 整数型(int)与浮点型(float),没小数点的就是整数,反之则是浮点数: 支持布尔值类型(bool): GLSL ES不支持字符串类型 转换方式:转换类型(被转换类型),如:int(float) B. [] 运算符 []运算符通过数组下标来访问矢量或矩阵的元素,例: float m23 = m4[1][2]; m4的第2…

【WebGL】《WebGL编程指南》读书笔记——第5章

一.前言        终于到了第五章了,貌似开始越来越复杂了. 二.正文         Example1:使用一个缓冲区去赋值多个顶点数据(包含坐标及点大小) function initVertexBuffers(gl) { var verticesSizes = new Float32Array([ 0.0, 0.5, 10.0, -0.5, -0.5, 20.0, 0.5, -0.5, 30.0 ]); ; var vertexSizeBuffer = gl.createBuffer()…

【WebGL】《WebGL编程指南》读书笔记——第3章

一.前言 根据前面一章的内容,继续第三章的学习. 二.正文       一起绘制三个点,这里要使用到缓存了 var n = initVertexBuffers(gl); //返回绘制点的个数 n ) { console.log('Failed to set the positions of the vertices'); return; } gl.clearColor(, , , ); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.POINTS,…

【WebGL】《WebGL编程指南》读书笔记——第2章

一.前言 最近看了<WebGL编程指南>这本书,发现还是很有意思的,故每章阅读后做个笔记. 二.正文 Example1:在canvas中绘制矩形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Draw a blue rectangle (canvas version)</title> &…

WebGL编程指南案例解析之平移和旋转的矩阵实现

手写各种矩阵: //矩阵 var vShader = ` attribute vec4 a_Position; uniform mat4 u_xformMatrix; void main(){ gl_Position = u_xformMatrix * a_Position; } `; var fShader = ` void main(){ gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `; function main(){ //获取canvas元素 v…

WebGL编程指南案例解析之绘制一个点

<!DOCTYPE html> <html> <head> <title>webgl</title> <style type="text/css"> #webgl{ border:1px solid; } </style> </head> <body> <canvas id="></canvas> <!-- WebGL编程指南作者提供的开发…

WebGL编程指南高级技术篇（常见需求的处理）

一.鼠标控制模型旋转 实质的根据鼠标移动前后的位置比较得出x,y轴的旋转角度: 图中是一个屏幕,有一个模型(恩,他是一个模型),鼠标由P点移动到P1点,我们假定移动单位步长旋转β角度: P(x1,y1)--->P1(x2,y2),x轴移动(x2-x1),y轴移动(y2-y1),所以x轴旋转 (x2-x1)β度,y轴旋转(y2-y1)β度: 二.判断物体被点击 当鼠标点击的时候,将物体颜色全置为红色,然后取鼠标点击坐标点的颜色,然后将物体颜色还原,再将之前获取的坐标点颜色做判断: 如果颜色为红色,…

WebGL编程指南案例解析之3D视图视区问题

var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'attribute vec4 a_Color;\n' + 'uniform mat4 u_MvpMatrix;\n' + 'varying vec4 v_Color;\n' + 'void main() {\n' + ' gl_Position = u_MvpMatrix * a_Position;\n' + ' v_Color = a_Color;\n' + '}\n'; // Fra…