太阳系:Solar System 以太阳(Sun)为中心,由内到外分别是: 水星(Mercury) 金星(Venus) 地球(Earth) 火星(Mars) 木星(Jupiter) 土星(Saturn) 天王星(Uranus) 海王星(Neptune) 冥王星(Pluto) 原来是太阳系九大行星,但是最后一个冥王星被除名,就变成八大行星了~  main.cpp  1234567891011121314151617181920212223242526272829303132333435363738…

Modern OpenGL用Shader拾取VBO内单一图元的思路和实现 什么意思? 拾取 最简单的理解拾取的方式大概是到(http://www.yakergong.net/nehe/course/tutorial_32.html)玩一下NEHE的拾取游戏.用鼠标点击飞过屏幕的物体就会击中它,这就是拾取的意义. Legacy OpenGL VS Modern OpenGL Legacy OpenGL就是使用glTranslate.glRotate.gluScale.gluLookAt.glPer…

Modern OpenGL用Shader拾取VBO内单一图元的思路和实现(3) 到上一篇为止,拾取一个VBO里的单个图元的问题已经彻底解决了.那么来看下一个问题:一个场景里可能会有多个VBO,此时每个VBO的gl_VertexID都是从0开始的,那么如何区分不同VBO里的图元呢? 指定起始编号 其实办法很简单.举个例子,士兵站成一排进行报数,那么每个士兵所报的数值都不同:这时又来了一排士兵,需要两排都进行报数,且每个士兵所报的数值都不同,怎么办?让第二排士兵从第一排所报的最后一个数值后面接着报就…

本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一些比较特别的动画. 太阳系最终的效果图如下: css3的animation是通过关键帧的形式做出来的,首先设定一个动画的运行时间,然后在这个时间轴上的若干位置处插入关键帧,浏览器根据关键帧设定的内容做过渡动画.animation常结合transform属性进行制作.以一个简单的例子说明,以一个div…

1. Opengl中的渲染模式有三种:(1)渲染模式,默认的模式:(2)选择模式, (3)反馈模式.如下 GLint glRenderMode(GLenum mode) mode可以选取以下三种模式之一:绘制模式(GL_RENDER),选择模式(GL_SELECT),反馈模式(GL_FEEDBACK). 函数的返回值可以确定选择模式下的命中次数或反馈模式下的图元数量. 2. OpenGL进行图形编程的时候,通常要用鼠标进行交互操作,比如用鼠标点选择画面中的物体,我们称之为拾取(Picking).…

在上一篇<html+ccs3太阳系行星运转动画>中实现了太阳系八大行星的基本运转动画. 太阳系又何止这些内容,为丰富一下动画,接下来增加“土星环”和“月球”来充盈太阳系动画. 下面是充盈后的动画效果静态图. 一.土星环 修改原来土星的div,在外面放一个包裹层div,class设成saturn-container. 内部放4个div,一个用来显示土星这个圆球,3个用来显示土星环. <div class='saturn-container'> <div class="…

Modern OpenGL用Shader拾取VBO内单一图元的思路和实现(2) 上一篇里介绍了Color-Coded Picking的思路和最基本的实现.在处理GL_POINTS时已经没有问题,但是处理GL_LINES.GL_TRIANGLES等时会遇到同一图元的各个顶点颜色不同的问题,这就不能正确拾取了,本篇来解决这个问题. 对于GL_LINES,可以用 ; 来使得每个线段图元的两个顶点颜色分别相同:对于GL_TRIANGLES,则用 ; .但是这个方法无法应用到存在共享顶点的GL_LINE_…

概况如下: 1.SphereGeometry实现自转的太阳: 2.RingGeometry实现太阳系星系的公转轨道: 3.ImageUtils加载球体和各行星贴图: 4.canvas中createRadialGradient实现太阳发光效果: 5.THREE.Sprite精灵实现太阳系行星. 效果图如下: 初始化场景.相机.渲染器,设置相机位置. // 初始化场景 var scene = new THREE.Scene(); // 初始化相机,第一个参数为摄像机视锥体垂直视野角度,第二个参数为摄…

做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转. 效果静态图: 动画中包括:太阳及各行星,运行轨道,行星公转动画. 先画好草图,设计好大小和位置,根据公转周期计算好动画执行的时间. html的结构: 一个class为solarsys的div,作为太阳系容器元素,该div的position为relative. 行星轨道和行星都用div,position为absolute. 容器用relative和内部元素采用absolute的定位方式,比较简单的…

1. 简单介绍一下OpenGL可编程渲染管线的流程 顶点着色 --> 细分着色 --> 几何着色 --> 片元着色 --> 计算着色 一般我们主要参与的阶段是顶点着色和片元着色过程 2.shader编程语法 基本和C语言一致,类型转换比C语言更加严格,和C语言区别较大之处就是矩阵,一个矩阵的定义要遵循列主序原则 --也就是说传入的数据要先填充列然后再填充行 mat3 M = (1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0); 结果得到的矩阵…