opengl
关注
分享
扫一扫
文章平均质量分 69
土豆丝的逆袭
如果此时此刻的你感到焦虑、恐慌、不安，说明你的内心还不够强大
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
opengl---4.纹理
一、理论基础纹理是一个2D图片（甚至也有1D和3D的纹理），它可以用来添加物体的细节；你可以想象纹理是一张绘有砖块的纸，无缝折叠贴合到你的3D的房子上，这样你的房子看起来就像有砖墙外表了。 为了能够把纹理映射(Map)到三角形上，我们需要指定三角形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会关联着一个纹理坐标(Texture Coordinate)，用来标明该从纹理图像的哪个部分采样（...原创 2018-04-07 17:52:37 · 482 阅读 · 0 评论 -
WebGL---6.3D纹理贴图
一、实例代码<html> <canvas id='c' width='640' height='480'></canvas> <script type="x-shader/x-vertex" id="vertex-shader"> attribute vec4 a_position; attribute vec2 aTextur...原创 2018-10-10 18:29:15 · 2016 阅读 · 2 评论 -
WebGL---5.初入3D
一、索引缓冲对象索引缓冲对象(Element Buffer Object，EBO，也叫Index Buffer Object，IBO)。假设我们不再绘制一个三角形而是绘制一个矩形。我们可以绘制两个三角形来组成一个矩形（OpenGL主要处理三角形）。这会生成下面的顶点的集合：float vertices[] = { // 第一个三角形 0.5f, 0.5f, 0.0f, /...原创 2018-10-10 09:47:02 · 486 阅读 · 0 评论 -
WebGL---4.矩阵的使用
一、坐标系统OpenGL希望在每次顶点着色器运行后，我们可见的所有顶点都为标准化设备坐标，也就是说，每个顶点的x，y，z坐标都应该在-1.0到1.0之间，超出这个坐标范围的顶点都将不可见。我们通常会自己设定一个坐标的范围，之后再在顶点着色器中将这些坐标变换为标准化设备坐标。将坐标变换为标准化设备坐标，接着再转化为屏幕坐标的过程通常是分步进行的，也就是类似于流水线那样子。为了将坐标从一个坐标系变...原创 2018-10-09 17:44:11 · 4243 阅读 · 0 评论 -
WebGL---3.绘制纹理
一、实例代码&amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;canvas id='c' width='480' height='320'&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/canvas&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;原创 2018-09-20 20:34:22 · 1094 阅读 · 0 评论 -
WebGL---2.初步封装
因为每一个WebGL程序都需要以下二个步骤：从canvas获取WebGL上下文创建vertex shader和fragment shader并链接成一个shader program所以这里，我们把这些操作封装成函数并放到webgl_utils.js里面:1. 从canvas里面获取WebGL上下文function createGLContext(canvas_id){ va...转载 2018-09-19 14:30:26 · 652 阅读 · 0 评论 -
WebGL---1.第一个三角形
最近无意中接触到WebGL，之前上半年学了一些opengl方面的知识，但知识这东西就是这样只有温故才能知新，打算正好借助学习WebGL来复习一下opengl方面的知识，顺便比较两者之间的区别。一、获取WebGL上下文一般都把WebGL上下文对象命名为gl。这样做也可以保证 JavaScript 代码与 OpenGL 程序更相近。取得了 WebGL 上下文之后，就可以开始 3D 绘图...原创 2018-09-17 17:15:34 · 660 阅读 · 0 评论 -
cocos-shader---3.实例上手
一、使用内置shader使用内置 shader 非常简单，直接通过一个 key 值从 GLProgramCache 缓冲区取到一个 GLProgram，然后设置给 Node 即可； 默认 shader 的 key 值在 GLProgram 中定义 auto sprite = Sprite::create("colormap.jpg");sprite->setPosition(v...转载 2018-08-12 22:01:08 · 803 阅读 · 0 评论 -
cocos-shader---2.源码解析
一、shader相关源码cocos2d-x 与 shader 相关的代码在 renderer 目录下 |-cocos |-renderer |-CCGLProgram.h |-CCGLProgram.cpp |-CCGLProgramCache.h |-CCGLProgramCache.cpp |-C...转载 2018-08-12 17:07:33 · 662 阅读 · 0 评论 -
cocos---图形渲染的过程
一、渲染概括这里先简单说一下大概流程，Cocos3.x版本的渲染是将所有需要渲染的node先通过各种RenderCommand封装起来，你先不用管RenderCommand是什么，只需要记住它把我们要渲染的node封装起来了就行，然后引擎把这些RenderCommand添加到了一个队列中存了起来，这个队列叫CommandQueue，添加的时候顺便对这些RenderCommand设置了一些参数，...转载 2018-08-09 23:58:13 · 1426 阅读 · 0 评论 -
opengl---7.混合
一、概念“混合”是指两种颜色的叠加方式。在新图片将要渲染画到屏幕上的时候，将用在新图片中的红、绿、蓝和透明度信息，与屏幕上已经存在的图片颜色信息相融合。 说的具体一点，就是把某一像素位置上原来的颜色和将要画上去的颜色，通过某种方式混在一起，从而实现特殊的效果。 新图片颜色被称作“源颜色”，而屏幕上已存在的图片颜色则被称作“目标颜色”。 OpenGL会把源颜色和目标颜色各自取出，并乘以一个...转载 2018-05-27 00:59:15 · 305 阅读 · 0 评论 -
opengl---6.初步封装
一、为何封装通过前面几节的介绍，大家已经知道要想实现一张图片的渲染，从载入到呈现到屏幕上，中间经历了很多过程，还是很繁琐的，这时候我们需要一个框架把这些细节封装起来，更利于我们的理解和使用。二、具体封装1.着色器，shader // 调用之前已经生成的着色器程序Shader &amp;amp;Shader::Use(){ glUseProgram(this-&amp;gt;I...原创 2018-04-22 23:39:40 · 1020 阅读 · 1 评论 -
opengl---3.shader
一、理论概念着色器(Shader)是运行在GPU上的小程序。这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说，着色器只是一种把输入转化为输出的程序。着色器也是一种非常独立的程序，因为它们之间不能相互通信；它们之间唯一的沟通只有通过输入和输出。着色器渲染流程： 二、着色器语言GLSL着色器是使用一种叫GLSL的类C语言写成的。GLSL是为图形计算量身定制的，它包含...原创 2018-04-07 13:37:03 · 442 阅读 · 0 评论 -
opengl---2.图形渲染的过程
一、过程介绍在OpenGL中，任何事物都在3D空间中，而屏幕和窗口却是2D像素数组，这导致OpenGL的大部分工作都是关于把3D坐标转变为适应你屏幕的2D像素。3D坐标转为2D坐标的处理过程是由OpenGL的图形渲染管线。 图形渲染管线可以被划分为两个主要部分： 第一部分把你的3D坐标转换为2D坐标， 第二部分是把2D坐标转变为实际的有颜色的像素。图形渲染管线可以被划分为几个阶段，每...原创 2018-04-07 00:00:11 · 2982 阅读 · 0 评论 -
opengl---1.入门
一、基本概念1.OpenGL：是图形硬件的一种软件接口。通俗点讲就是一套API，调用接口而已，用于图像的渲染。与微软的Direct类似，不过它是跨平台的。 OpenGL自身是一个巨大的状态机(State Machine)：一系列的变量描述OpenGL此刻应当如何运行。OpenGL的状态通常被称为OpenGL上下文(Context)。我们通常使用如下途径去更改OpenGL状态：设置选项，操作...原创 2018-04-06 18:48:34 · 303 阅读 · 0 评论 -
opengl---5.向量
一.向量定义向量V是一个既有大小又有方向的量，在数学上，常用一条有方向的线段来表示向量。 二.向量大小|a⃗&amp;nbsp;a→\vec{a}| = x2+y2−−−−−−√x2+y2\sqrt{x^2+y^2}三.向量加减向量的加法可以被定义为是分量的(Component-wise)相加，即将一个向量中的每一个分量加上另一个向量的对应分量： 两个向量的相减会得到这...原创 2018-04-12 16:02:16 · 412 阅读 · 0 评论 -
WebGL---7.摄像机
一、概念介绍1.产生原理OpenGL本身没有摄像机(Camera)的概念，但我们可以通过把场景中的所有物体往相反方向移动的方式来模拟出摄像机，产生一种我们在移动的感觉，而不是场景在移动。2.制作摄像机1️⃣摄像机位置正z轴是从屏幕指向你的，如果我们希望摄像机向后移动，我们就沿着z轴的正方向移动。var camera_pos = [0,0,3]2️⃣摄像机方向var camera_...原创 2018-10-28 12:16:25 · 1840 阅读 · 0 评论