计算机图形绘制太阳系

opengl学习笔记（五）:组合变换，绘制一个简单的太阳系

创建太阳系模型描述的程序绘制一个简单的太阳系,其中有一颗行星和一颗太阳,用同一个函数绘制.需要使用glRotate*()函数让这颗行星绕太阳旋转,并且绕自身的轴旋转.还需要使用glTranslate*()函数让这颗行星离开原点,移动到它自己的轨道上.可以在glutWireSphere()函数中使用适当的参数,在绘制球体时指定球体的大小. planet.c #include <GL/glut.h> ,day =; void init(void) { glClearColor(0.0,0.0,0

canvas绘制太阳系

原文地址:http://jeffzhong.space/2017/10/26/solar/ 学习canvas有一段时间了,顺便写个小项目练手,该项目用到的知识点包括: ES6面向对象基本的三角函数 canvas部分有:坐标变换,渐变,混合模式,线条和图形的绘制. 实际效果: solar system(推荐在chrome或safari下运行) 场景首先建立场景类,主要用来组织管理对象,统一更新和绘制对象.这里用到了ES6的类语法,构造函数建立对象列表属性planets,绘制背景方法drawBG

HTML5 之Canvas绘制太阳系

<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title>  <style type="text/css"> * { margin: 0; padding: 0; font-family: YaHei Consolas Hybrid,宋体; font-size: 14px; list-style:

0.1：Why are We Addicted to Games

文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 前言本系列仅用于记录并分享自己的学习过程,以及学习过程中遇到的问题,如有错漏,欢迎讨论.(第0章是Shader系列的引导部分,已经有计算机图形学基本认识.游戏开发基础知识.Unity基础的可以选择性跳过.) 引言从冯诺依曼到现代计算机,从简单的计算结果呈现到丰富多彩的视觉体验,计算机总是在带给我们惊喜.而这一切,都离不开计算机图形学. 什么是计算机图形学?首先,随着硬

OpenGL光照设置

一.设置光源 (1)光源的种类环境光环境光是一种无处不在的光.环境光源放出的光线被认为来自任何方向.因此,当你仅为场景指定环境光时,所有的物体无论法向量如何,都将表现为同样的明暗程度. 点光源由这种光源放出的光线来自同一点,且方向辐射向四面八方. 平行光平行光又称镜面光,这种光线是互相平行的.从手电筒.太阳等物体射出的光线都属于平行光. 聚光灯这种光源的光线从一个锥体中射出,在被照射的物体上产生聚光的效果.使用这种光源需要指定光的射出方向以及锥体的顶角α. (2)光的成分对于每一种光

CSS3动画animation认识，animate.css的使用

CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------------- 首先我们需要创建一个@keyframes规则 @keyframes name{ from{width:1px} to{width:100px} } //或者使用百分比 @keyframes name{ 0%{width:1px} 100{width:100px} } 创建好之后,我们需

NVIDIA Turing Architecture架构设计（上）

NVIDIA Turing Architecture架构设计(上) 在游戏市场持续增长和对更好的 3D 图形的永不满足的需求的推动下, NVIDIA 已经将 GPU 发展成为许多计算密集型应用的世界领先的并行处理引擎.除了渲染高度逼真和身临其境的 3D 游戏外, NVIDIA GPUs 还可以加速内容创建工作流.高性能计算( HPC )和数据中心应用程序,以及众多人工智能系统和应用程序.新的 NVIDIA 图灵 GPU 架构建立在 GPU 长期领导地位的基础上. 图灵代表了十多年来最大的体系结构

太阳系Demo(openGL)

这个是8年前写的demo,提交的一份作业,按照提出的需求点,以最快和最简单的方式完成功能,因此代码比较简单. 1)截图 2) 功能点描述: 1.公转,自传 2.基础的摄像机运动 3.正视和顶视 4.天空盒 5.太阳黑子爆炸 6.彗星带尾巴 7.录制重播 3) 实现代码: 1.简单的摄像机代码(目前仅支持移动,不支持旋转) struct glCamera { vec3 pos;//摄像机的世界空间坐标 ]; vec3 forward; vec3 right; vec3 up; public : g

iOS界面的绘制和渲染

界面的绘制和渲染 UIView是如何到显示的屏幕上的. 这件事要从RunLoop开始,RunLoop是一个60fps的回调,也就是说每16.7ms绘制一次屏幕,也就是我们需要在这个时间内完成view的缓冲区创建,view内容的绘制这些是CPU的工作:然后把缓冲区交给GPU渲染,这里包括了多个View的拼接(Compositing),纹理的渲染(Texture)等等,最后Display到屏幕上.但是如果你在16.7ms内做的事情太多,导致CPU,GPU无法在指定时间内完成指定的工作,那么就会出现卡

Atitit.计算机图形图像图片处理原理与概论attilax总结

Atitit.计算机图形图像图片处理原理与概论attilax总结计算机图形1 图像处理.分析与机器视觉(第3版)1 数字图像处理(第六版)2 图像处理基础(第2版)2 发展沿革 1963年,伊凡·苏泽兰(Ivan Sutherland)在麻省理工学院发表了名为<画板>的博士论文, 它标志着计算机图形学的正式诞生.至今已有五十多年的历史.此前的计算机主要是符号处理系统,自从有了计算机图形学,计算机可以部分地表现人的右脑功能了,所以计算机图形学的建立具有重要的意义.计算机图形学在如下几方面有了长

利用javascript和WebGL绘制地球【翻译】

利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个API我们能够在浏览器中创造出炫酷3D场景的能力.本文将完整的向你展示一些炫酷是如何实现的. 需要特别指出的是,这篇教程我们将会构建一个地球行星模型,这个模型可以像一个兴奋的人一样环绕的旋转,另外,它可能使我们可以获得一些其他程序员的称赞,好吧,就这么多了. 准备这篇教程我们将会用到一个令人着迷的We

HTML5_画布_太阳系

HTML5_画布_太阳系一.canvas属性和方法的简单介绍①对于不支持canvas标签的浏览器需要显示"不支持canvas"使用IE11浏览器的开发人员工具,仿真:文档模式=8,显示:IE8不支持canvas 默认的画布背景是白色的,可以给它加一个背景样式 \App3_HTML5\Module2_Canvas\canvas-1.html <!DOCTYPE html> <html> <head lang="en"> <m

opengl绘制三角形

顶点数组对象:Vertex Array Object,VAO 顶点缓冲对象:Vertex Buffer Object,VBO 索引缓冲对象:Element Buffer Object,EBO或Index Buffer Object,IBO 渲染管线在OpenGL中,任何事物都在3D空间中,而屏幕和窗口却是2D像素数组,这导致OpenGL的大部分工作都是关于把3D坐标转变为适应你屏幕的2D像素.3D坐标转为2D坐标的处理过程是由OpenGL的图形渲染管线管理的.图形渲染管线可以被划分为两个主要部

渲染、render与绘制

渲染是抽象到具体的过程: 抽象:图片信息的描述(比如一条线:两个端点的位置.线粗.颜色等特征): 具体:依据抽象信息得到的可视图片(绘制过程). 渲染是中文翻译的问题,有种添油加醋的感觉.直意就是交与呈现的意思.把内存里的图形图像信息以输出设备(显示器)能够识别的格式呈现出来. 引用我上图形学的时候老师彭群生的话,“render翻译成渲染是不对的,render的翻译应该是绘制” 所以意思很简单明了,就是把场景画出来的意思啊其实"渲染","绘制","画画

基于Opengl的太阳系动画实现

#include <GL\glut.h> float fEarth = 2.0f;//地球绕太阳的旋转角度float fMoon = 24.0f;//月球绕地球的旋转角度 void Init(){ glEnable(GL_DEPTH_TEST);//启用深度测试 glClearColor(0.0f,0.0f,0.0f,0.8f);//背景为黑色} void Reshape(int width, int height){ if (0==height) { height = 1; } glView

理解UIView的绘制

界面的绘制和渲染 UIView是如何到显示的屏幕上的. 这件事要从RunLoop开始,RunLoop是一个60fps的回调,也就是说每16.7ms绘制一次屏幕,也就是我们需要在这个时间内完成view的缓冲区创建,view内容的绘制这些是CPU的工作:然后把缓冲区交给GPU渲染,这里包括了多个View的拼接(Compositing),纹理的渲染(Texture)等等,最后Display到屏幕上.但是如果你在16.7ms内做的事情太多,导致CPU,GPU无法在指定时间内完成指定的工作,那么就会出现卡

three.js 郭先生制作太阳系

今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击博客原文(加载时间比较长,请稍等一下).话不多说先看效果图. 图片有点多,先放三张,相比于上一个版本,这个版本制作更加细致,动画更加流畅.那么下面分析一下主要代码. 1. 先介绍一下变量这里查了一些资料radiuses.distances.pub_rotation.self_rotation.pitchs分别为八大行星半径比.到太阳的距离比.公转比.自转比.自转轴倾角比. radiuse

[计算机图形学]绘制填充模型：重心坐标、z-buffer

目录一.点乘和叉乘 0. 向量表示 1. 点乘 2.叉乘 2.1 坐标运算方式 2.2 向量运算方式 2.3 叉乘的用途二.Bounding Box 三.重心坐标四.z-buffer 五.总结一.点乘和叉乘点乘和叉乘是向量运算中常用的两种运算符(如果没有记错的话,高中数学就涉及到这方面内容,并且本篇文章要介绍的和高中的哪些毫无出入,这里权当复习). 至于矩阵和向量的点乘和叉乘,这里不涉及,毕竟矩阵就是一堆向量的集合而已.同时对于向量运算时的一些注意事项,比如什么样的两个向量才能运算,本

iOS可视化动态绘制连通图

上篇博客<iOS可视化动态绘制八种排序过程>可视化了一下一些排序的过程,本篇博客就来聊聊图的东西.在之前的博客中详细的讲过图的相关内容,比如<图的物理存储结构与深搜.广搜>.当然之前写的程序是比较抽象的.上篇博客我们以可视化的方式看了一下各种排序的过程,今天博客中我们就来可视化的看一下图的相关部分,今天我们要画的图是无向图,并且每个点到其他点都有直接的连线.今天我们就基于此图来做一些事情.当然本篇博客在画图时我们使用的是Bezier曲线来画的,因为之前也聊过关于Bezier的相关东

【AR实验室】OpenGL ES绘制相机（OpenGL ES 1.0版本）

0x00 - 前言之前做一些移动端的AR应用以及目前看到的一些AR应用,基本上都是这样一个套路:手机背景显示现实场景,然后在该背景上进行图形学绘制.至于图形学绘制时,相机外参的解算使用的是V-SLAM.Marker-Based还是GPS的方法,就不一而足了. 所以说要在手机上进行现实场景的展现也是目前AR应用一个比较重要的模块.一般来说,在移动端,基本上都是使用OpenGL ES进行绘制.所以我们优先考虑使用OpenGL ES进行相机的绘制.当然,有些应用直接利用iOS的UIImage进行相机

计算机图形绘制太阳系

热门专题