songtianqi123的专栏

原创 【OpenGLShader】01.attribute、uniform、varying、in、out

接下来我们要进入OpenGL三部曲的最后一部了，OpenGLShader的语法及案例。

原创 【OpenGL进阶】06.为模型添加光照和贴图

上篇文章介绍了模型的加载，不过太丑了，这篇文章我们给它添加一下光照和纹理，让它好看一点。首先看一下model.h和model.cpp的改动：model.h新增了设置材质属性的接口#pragma once#include "ggl.h"#include "vertexbuffer.h"#include "shader.h"class Model { VertexBuffer*mVertexBuffer; Shader*mShader; glm::mat4 mModelMatrix;

原创 【OpenGL进阶】05.绘制3D模型

这篇文章来绘制3D模型。添加了model.h和model.cpp文件.model.h#pragma once#include "ggl.h"#include "vertexbuffer.h"#include "shader.h"class Model { VertexBuffer* mVertexBuffer; Shader* mShader; glm::mat4 mModelMatrix;public: Model(); void Init(const char* mode

原创 【OpenGL进阶】04.支持多贴图的Shader

这篇文章来实现一下多贴图的效果。在这篇文章中，再次对代码进行了封装，是代码看起来更加清晰明了：shader.h中添加了SetTexture接口:#pragma once#include "ggl.h"struct UniformTexture { GLint mLocation; GLuint mTexture; UniformTexture() { mLocation = -1; mTexture = 0; }};class Shader{public: GLu

原创 【OpenGL进阶】03.绘制地面

这篇文章来讲一下如何绘制一个黑白相间的地面。添加了vertexbuffer和ground以及shader类，Uitls.h里添加了一个创建BufferObject的接口。Utils.h#pragma once#include "ggl.h"unsigned char* LoadFileContent(const char* path, int& filesize);GLuint CompileShader(GLenum shaderType, const char* shaderC

原创 【OpenGL进阶】02.为三角形添加纹理贴图

这篇文章基于上一篇的基础上，为三角形添加纹理贴图。首先我们要解码bmp文件，然后创建纹理对象，再将bmp数据转化成2D贴图，贴到三角形上。在Utils.h中添加所需接口：#pragma once#include "ggl.h"unsigned char* LoadFileContent(const char* path, int& filesize);GLuint CompileShader(GLenum shaderType, const char* shaderCode);

原创 【OpenGL进阶】01.使用Shader绘制三角形

在前一个阶段的文章中，主要是使用OpenGL的固定管线来实现了一系列的操作，内容并不复杂，十分好理解，接下来的进阶系列中，我们将使用shader代码来实现一些效果。首先通过shader来实现一个三角形的绘制。首先来看main.cs，创建窗口以及调用绘制指令都在这个脚本中实现：#include "ggl.h"#include "scene.h"#include "Utils.h"#pragma comment(lib,"opengl32.lib")#pragma comment(lib,

原创 【OpenGL入门】07.实现摄像机的旋转和移动

这篇文章记录的是如何在OpenGL中实现一个摄像机的旋转移动操作，首先我们需要添加监听事件，我们的旋转通过按下鼠标右键触发，W，A，S，D则控制前后左右的移动。这里放一个完整版的Main代码：#include "ggl.h"#include "scene.h"#include "texture.h"#include "Utils.h"#include "objmodel.h"#include "camera.h"Camera camera;#pragma comment(lib,

原创 【OpenGL入门】06.绘制模型

这篇文章来记录一下在OpenGL中是如何绘制模型的，首先我们准备几个模型，obj的文件使用txt打开之后信息如下：我们仅需要v,vt,vn,以及f开头的数据，v代表vertex,vt代表vertextexcoord,vn代表vertexnormal。首先我们将工程中的光源和材质设置全都注释掉。添加objmodel.cpp和objmodel.h以及vertexdata.cpp和vertexdata.h文件。objmodel.h:#pragma once#include "vertexdat

原创 【OpenGL入门】05.纹理贴图

在OpenGL中，我们渲染出来的画面是一张图片，纹理贴图由像素组成，每个像素又包含4个通道的数据，即RGBA，我们能看到RGB的颜色。这篇文章将介绍如何加载图片，解码图片，并把它贴到几何形体上。首先我们需要对原有代码封装一下，添加一个通用工具脚本Utils.h和Utils.h。后续一些通用的方法都放在这里边。Utils.h:#pragma once#include <stdio.h>unsigned char* LoadFileContent(const char* file

原创 【OpenGL入门】04.光照

光照包括环境光、漫反射和镜面反射。在OpenGL中，我们要使用光照，首先要初始化光照信息。//关闭背面渲染，提高效率glEnable(GL_CULL_FACE); //初始化灯光float whiteColor[] = { 1.0f,1.0f,1.0f,1.0f };//灯源位置float lightPos[] = { 0.0f,1.0f,0.0f,0.0f };//环境光glLightfv(GL_LIGHT0, GL_AMBIENT, whiteColor);//漫反射光glLi

原创 【OpenGL入门】03.矩阵的操作

OpenGL中有三大矩阵，分别是模型矩阵（Model Matrix）、视口矩阵（View Matrix）和投影矩阵（Projection Matrix）。模型矩阵是在世界中摆放物体用的，视口矩阵是把物体从世界坐标系转换到视口坐标系中，即摆放虚拟摄像机用的，投影矩阵则是吧摄像机看到的物体的坐标从世界坐标系转换到投影坐标系。三角形的初始状态首先，矩阵的操作有缩放，旋转，平移//缩放坐标，影响下边每一个分量glScalef(0.1f, 0.1f, 0.1f);//旋转glRotatef(9

原创 【OpenGL入门】02.使用OpenGL绘制三角形、多边形

上一篇文章里，我们通过OpenGL绘制了一个点，这篇文章我们绘制三角形和多边形来学习OpenGL中的API。代码变动不大。这里只贴出不一样的地方。首先画线，这里有三个相关的参数，GL_LINES，GL_LINE_LOOP，GL_LINE_STRIP。 glBegin(GL_LINES); //glBegin(GL_LINE_LOOP); //glBegin(GL_LINE_STRIP); glColor4ub(255, 0, 0, 255); glVertex3f(0

原创 【OpenGL入门】01.使用OpenGL绘制一个点

做Unity时间久了，越发觉得仅依赖Unity引擎开发，以后的路会越来越窄，所以笔者打算自己动手做引擎了，提升自己对引擎底层的认识，同时也拓宽自己的职业发展道路。让我们先从OpenGL开始。打算OpenGL分成三个部分学习。文章作为自己的学习笔记进行分享，如有错误，也欢迎大佬指点~我们在Windows平台下，使用Visual Studio来进行开发，这里使用的是VS2019的版本，安装了番茄助手。有需要的可以去下载一下。首先，我们使用vs创建一个空工程。然后添加一个main.cpp文件和ggl.h文件。

原创 Unity图集方案对比

原创 大资源包解决方案对比

如题，最近在做项目的客户端技术选型，记录一些解决方案对比和一些技术点的问题和用法，仅供参考。如有错误或不严谨的地方，欢迎大家指出~

原创 Unity项目架构

整理了一下Unity项目客户端涵盖一些内容。如果有遗漏，欢迎大家指出。感谢~

原创 [游戏更新]游戏更新框架的设计

主要是通过几篇文章来记录一下游戏热更新流程的框架设计、资源打包、资源下载等。热更新的功能框架使用的是XLua,这里不做详细介绍。流程图：因为是海外游戏，考虑到GooglePlay对包体大小的限制。因此，会有一些资源做成压缩包，在特定时间进行下载。即第6，7两个步骤。如果是国内游戏，不考虑控制安装包大小的，可以略过这两个步骤。因为东南亚兄弟的网速和机型十分感人的缘故，AssetBundl...

原创 [ShaderGraph]15.云海效果

ShaderGraph节点图：效果图：节点解析：这个效果涉及到的新节点并不多，但是节点图还是略显复杂。新节点主要是:Scene Depth,Scene Position。这两个节点在后边文档里单独做出解析。...

原创 [ShaderGraph]14.卡通渲染(块阴影)

ShaderGraph节点图：效果图：节点解析：这个效果还是用到了不少新的节点:Remap、Gradient、Sample Gradient。Remap:重映射，根据输入In在InMinMax中的插值，计算输出。比如输入In为0，InMinMax时（-10，10），那么In在InMinMax的位置就是0.5，如果OutMinMax为（0,10）,那么输出out就是5。公式：...

原创 [ShaderGraph]13.雨滴涟漪效果

ShaderGraph节点图：效果图：节点解析：这个效果涉及到的新节点比较多，Normal Strength、Normal Blend、Flipbook、Round、Voronoi。Normal Strength：修改法线贴图的Strength。Strength为1时返回原图，为0时返回纯黑的法线贴图。Normal Blend：混合两个法线。Out = normaliz...

原创 [ShaderGraph]12.水晶效果

边缘发光ShaderGraph节点图:内发光ShaderGraph节点图：透明水晶效果ShaderGraph节点图：效果图：节点解析：边缘光的效果不涉及新节点。自发光的涉及到的新节点是One Minus、透视效果涉及的新节点是View Direction。One Minus：输出Out = 1-输入In。View Direction：获取mesh的顶点或...

原创 [ShaderGraph]11.小草摇曳效果

ShaderGraph节点图：效果图：节点解析：这个效果主要使用了Position，Sample Noise，Time，Tiling And Offset，Add，Subtract，Combine，Split，Lerp。Subtract：减法。输出Out = 输入A - 输入B。...

原创 [ShaderGraph]10.游动的鱼

ShaderGraph节点图：效果图：节点解析：这个效果用到的新节点是Sine，Combine。Sine：Combine：可以从RGBA重新组合一个新的向量。RGBA = float4（R,G,B,A）RGB = float3 (R,G,B)RG = float2 (R,G)...

原创 [ShaderGraph]09.通过Position修改Mesh形状

ShaderGraph节点图：效果图：节点解析:这个效果只涉及到1个新的节点Position。Position：位置。获取mesh的顶点和片段的位置。可选的空间有Object，View，World，Tangent。...

原创 [ShaderGraph]08.石化效果

ShaderGraph节点图：效果图：节点解析：Lerp：线性插值。根据数据A、B和T进行线性插值。T的值会被Clamp到[0,1]。公式是：Out = (1-T)*A + T*B

原创 [ShaderGraph]07.2D和3D流光效果

2D流光ShaderGraph节点图：效果图：3D流光ShaderGraph节点图：效果图:节点解析：本效果不涉及新节点。主要使用了Time，Position，Mulpity，Add，SampleTexture2D，Tiling And Offset等节点。...

原创 [ShaderGraph]06.扰动效果

ShaderGraph节点图：效果图：节点解析：Split:将一个多维向量分割成多个1维的数值。如果输入的向量小于4维，不够的维度会使用默认值分别是（0，0，0，1）。...

原创 [ShaderGraph]05.旋涡效果

ShaderGraph节点图：效果图：节点解析：这个效果设计到的新节点主要有Twirl、Ellipse。Twirl：类似于黑洞的旋转扭曲效果应用于输入的UV。扭曲效果的中心参考点由输入参数Center决定，效果的整体强度由输入参数Strength**决定，输入Offset*可用于便宜结果的各个通道。Ellipse:根据输入的UV生成一个椭圆形状，尺寸由输入参数Width...

原创 [ShaderGraph]04.积雪效果

ShaderGraph节点图：效果图：节点解析：将通用的4个贴图做成了一个Sub-graph(PBRCommon)，方便重复使用。涉及到的新节点：Vector3、Normal Vector、Dot Product。Vector3：3维向量Normal Vector：法线向量，获取Mesh的法线向量。可选的空间有Object，View，World，Tangent。Do...

原创 [ShaderGraph]03.溶解效果

ShaderGraph节点图：效果图：本节涉及到的新节点：Simple Noise：基于输入的UV生成噪点图。Scale控制噪点图大小。Step：阶梯。如果输入In大于等于输入Edge，返回，否则返回0。Subtract:减法：输出Out = 输入A - 输入B。...

原创 [ShaderGraph]02.边缘光效果

ShaderGraph节点图：效果图：节点解析：因为需要受到光照影响，因此，节点选择PBR节点（基于物理渲染的节点。可以用于金属或高光材质）。Normal节点的输入应该是切线空间。可以使用Transform节点转换到切线空间。Fresnel Effect：菲涅尔效应是基于视角的不同对表面反射率的影响，接近掠视射角度时会反射更多光线。菲涅耳效应节点通过计算表面法线和视角方向之间的...

原创 [ShaderGraph]01.全息投影效果

最近在学习ShaderGraph，通过案例来练手，第一个实现全息投影效果。ShaderGraph节点如下：效果如下：节点解析：因为这个效果不需要受到光照的影响，因此创建Shader时选择的是UnlitMaster(不受光照的主节点)。主要用到了ShaderGraph的SampleTexture2D、Tiling And Offset、Time、Position、Multiply节点...

原创 [UnityShader入门精要读书笔记]38.Unity中的渲染优化技术

和PC平台相比，移动平台上的GPU架构有很大的不同。由于处理资源等条件的限制，移动设备上的GPU架构专注于尽可能使用更小的贷款和功能，也由此带来了许多和PC平台完全不同的现象。 例如，为了尽可能移除那些隐藏的表面，减少Overdraw(即一个像素被绘制多次)，PowerVR芯片（通常用于IOS设备和某些Android设备）使用了基于瓦片的延迟渲染（Tiled-bas...

原创 [UnityShader入门精要读书笔记]37.水波效果

在这里，使用一张立方体纹理（cubemap）作为环境纹理，模拟反射。为了模拟折射效果，我们使用GrabPass来获取当前屏幕的渲染纹理，并使用切线空间下的法线方向对像素的屏幕坐标进行偏移，再使用该坐标对渲染纹理进行屏幕采样，从而模拟近似的折射效果。与之前不同的是，水波的法线纹理是由一张噪声纹理生成而得，而且会随着颜色变化不断平移，模拟波光粼粼的效果。除此之外，在这里并没有使用一个定值来混合反射和折...

原创 [UnityShader入门精要读书笔记]36.消融效果

消融效果常见于游戏中的角色死亡、地图烧毁等效果。在这些效果中，消融往往从不同的区域开始，并向看似随机的方向扩张，最后整个物体都将消失不见。其原理非常简单，就是噪声纹理+透明度测试。我们使用对噪声纹理采样的结果和某个控制消融程度的阈值比较，如果小于阈值，就使用clip函数把它对应的像素裁剪掉，这些部分就对应了图中被“烧毁”的区域。而镂空区域边缘的烧焦效果则是将两种颜色混合，再用pow函数处理后，与源...

原创 [UnityShader入门精要读书笔记]35.素描风格渲染

微软研究院的人在一篇文章中提到，他们使用了提前生成的素描纹理来实现实时的素描风格渲染，这些纹理组成了一个色调艺术映射。如下图，从左到右纹理中的笔触逐渐增多，用于模拟不同光照下的漫反射效果，从上到下则对应了每张纹理的多级渐远纹理（mipmaps）。这些多级渐远文理的生成并不是简单的对上一层纹理进行降采样，而是需要保持笔触之间的间隔，以便更真实的模拟素描效果。这本文中，不考虑多级渐远文理的生成，而...

原创 [UnityShader入门精要读书笔记]34.卡通风格渲染

卡通风格是游戏中常见的的一种渲染风格。使用这种风格的游戏画面通常有一些共有的特点，例如物体都被黑色的线条描边，已经分明的明暗变化等。 要实现卡通渲染的方法有很多，其中之一就是使用基于色调的着色技术。在实现中，我们往往会使用漫反射系数对一张一堆纹理进行采样，以控制漫反射的色调。 在实时渲染中，轮廓线的渲染是应用非常广泛的一种效果。近20年来，有许多绘制模型...

原创 [UnityShader入门精要读书笔记]33.全局雾效

雾效是游戏里经常使用的一种效果。Unity内置的雾效可以产生基于距离的线性或指数雾效。然而，要想在自己编写的顶点/片元着色器中实现这些雾效，我们需要在Shader中添加#pragma_multi_compile_fog指令，同事还需要使用相关的内置宏，例如UNITY_FOG_COORDS、UNITY_TRANSFER_FOG和UNITY_APPLY_FOG等。这种方法的缺点在于，不仅需要...

原创 [UnityShader入门精要读书笔记]32.获取深度和法线纹理

深度纹理实际就是一张渲染纹理，只不过它里面存储的像素值不是颜色值，而是一个高精度的深度值。由于被存储在一张纹理中，深度纹理里的深度值范围是[0，1]，而且通常是非线性分布的。总体来说，这些深度值来自于顶点变换后得到的归一化的设备坐标。一个模型要想最终被绘制在屏幕上，需要把它的顶点从模型空间变换到齐次裁剪坐标系下，这是通过在顶点着色器中乘以MVP变换矩阵得到的。在变换的最后一步，我们需要使用一个投影...