Lesson01-变换

Jul 9, 2016

 osgjs官方教程笔记  osgjs官方教程笔记

万事开头难，第一课内容虽然有点多，但是里面讲到的东西再后面都会重复出现，碰到不明白的内容多查看资料，先打好地基，以后再慢慢盖楼～～

首先来看官方效果展示

知识点

获取全局变量

// from require to global var
var OSG = window.OSG;
OSG.globalify(); //把openSceneGraph 的变量全局化
var osg = window.osg;
var osgViewer = window.osgViewer;

来看一下globalify 函数的源码，就很好理解了

// for backward compatibility
openSceneGraph.globalify = function () {
    namespaces.forEach( function ( namespace ) {
        window[ namespace ] = openSceneGraph[ namespace ];
    } );
};

矩阵使用

// Here we create a special Node
// that will hold the transformation.
var group = new osg.MatrixTransform();  //创建单位矩阵
group.setMatrix( osg.Matrix.makeTranslate( -5, 10, -5, osg.Matrix.create() ) );  //平移矩阵
var size = 5;
// that node will be the geometry
var ground = osg.createTexturedBox( 0, 0, 0, size, size, size );  //中心点，长宽高
//We add geomtry as child of the transform
// and now it's transformed magically
group.addChild( ground );
group.getOrCreateStateSet().setAttributeAndModes( new osg.CullFace( 'DISABLE' ) );

矩阵作用：场景对象的旋转、平移、缩放、倾斜、映射等操作都是通过矩阵运算来实现的。

原理：

  1. 图形实例：

    平移

  2. 公式

x' = x+ Tx

y' = y+Ty

z' = z +Tz

  1. 带入矩阵公式

    image

  2. webGL和OpenGL里的矩阵都是列主序的，所以这里参与运算的矩阵表示为[1,0,0,0,0,1,0,0,0,0,1,0,Tx,Ty,Tz,1]

回过头来看osgjs里面矩阵的使用步骤：

  1. 先声明矩阵变换对象，它的矩阵的是单位矩阵 var group = new osg.MatrixTransform(); 创建单位矩阵

  2. 设置矩阵(变换方式) group.setMatrix([1,0,0,0,0,1,0,0,0,0,1,0,Tx,Ty,Tz,1])

  3. 添加几何形状进行运算 group.addChild( ground );

  4. 再使用group时，它里面包含的就是平移过后的 ground 对象

几何形状的创建

  1. 创建立方体 osg.createTexturedBox( 0, 0, 0, size, size, size ) 来看看这个函数的源码：
var createTexturedBox = function ( centerx, centery, centerz,
	sizex, sizey, sizez ) {
	Notify.log( 'createTexturedBox is deprecated use instead createTexturedBoxGeometry' );
	return createTexturedBoxGeometry( centerx, centery, centerz,
		sizex, sizey, sizez );
};

可以知道传入的六个参数分别是，物体中心点的xyz坐标以及长宽高(函数调用的createTexturedBoxGeometry内容是创建物体的顶点，面，连接顺序等等，请参照《WebGL 编程指南》)

设置状态

1.group.getOrCreateStateSet().setAttributeAndModes( new osg.CullFace( ‘DISABLE’ ) )

状态集合（StateSet） ：OSG 在 StateSet 类中保存一组定义状态数据（模式和属性） 。 场景图形中的任何 osg::Node 都可以与一个 StateSet 相关联。

CullFace是一个属性类， 派生自StateAttribute类。它的构造函数有一个参数：一个用于指定剔除表面是正面还是反面的枚举量， 可选的值有： FRONT， BACK，FRONT_AND_BACK。这些枚举量在 CullFace 的头文件中定义，它们等价于OpenGL 的枚举量 GL_FRONT，GL_BACK 和 GL_FRONT_AND_BACK。

可以理解成是正面渲染还是反面渲染，还是正反都渲染 osgjs里面CullFace的枚举值为：

  • CullFace.DISABLE = 0x0;
  • CullFace.FRONT = 0x0404;
  • CullFace.BACK = 0x0405;
  • CullFace.FRONT_AND_BACK = 0x0408;

灯光

var mainNode = new osg.Node();
var lightnew = new osg.Light();
mainNode.light = lightnew;
mainNode.addChild( group );

用户程序可以使用 其方法设置光的环境色，散射颜色，镜面反射颜色。 以后用到再说

参考资料

  • 《WebGL编程指南》
  • 《OpenSceneGraph快速入门指南》
  • 《OpenSceneGraph程序设计》
 Toc
 Tags
 Related