着色器glsl基础

本文介绍了WebGL中的着色器GLSL基础知识,包括顶点着色器和片段着色器的使用,以及如何在Cesium中结合着色器绘制3D模型。着色器是可编辑渲染管线的一部分,允许程序员自定义坐标变换和颜色处理。GLSL基于C语言,通过attribute、uniform和varying修饰符传递和处理顶点信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

阅读需知

webGL是使用js编写的openGL。cesium本身是基于webGL绘制三维实体的,是webGL的地球引擎。WebGL利用的是canvas的绘图区域。也就是说,使用WebGL的网页,HTML里面肯定含有canvas标签。cesium的实体primitve的mateiral材质可以使用canvas提供的材质,也可以直接使用着色器绘制。canvas的绘制是基于webGL的。着色器属于webGL的范畴,用于绘制特殊的纹理材质和图元。

 

固定渲染管线

固定渲染管线,简单来说,就是3d渲染所进行的一连串的计算流程,就像流水线一样。固定渲染管线中,模型,视图,投影的坐标变换都会替我们完成。不需要理解细节,只需要知道所有的这些坐标变换都包含在里面,都会帮我们计算好。

如果有了固定渲染管线,编写程序就比较容易了,因为所有的变换都是由固定渲染管线来完成的,但是缺点就是自由度低。固定渲染管线只能完成一些最基本的操作,如果想要做一些特殊的处理,就比较麻烦了。

WebGL中不存在固定渲染管线。也就是说,坐标变换必须全部由自己来做。而且,这个记述了坐标变换的机制就叫做着色器(Shader)。

这样可以由程序员控制的机制叫做可编辑渲染管线。而着色器又有 处理几何图形顶点的顶点着色器(Vertex shader、vs)和处理像素的片段着色器(Fragment shader,fs)两种类型。

着色器GLSL使用C语言为基础,并且有自己独立的语法,它是一段在GPU上运行的程序,并不是脚本,使用过编译语言的应该明白,C要编译成一个exe需要经过编译、链接这两个步骤,同样的,着色器程序也需要这两个步骤。

着色器引用

着色器就是一个代码段,将这段代码放进cesium或者js代码段中即可。那么该如何表示着色器代码呢?目前我所知有两种方式: 字符串赋值法和js文件保存法; 。

js文件方式

将代码段保存为js文件,为了在javascript中可以调用,给script标签加上了id属性。另外,type属性是和javascript不同的,不要误认为是javascript代码。

<script id="vshader" type="x-shader/x-vertex">
    var vs = `  
attribute vec3 position3DHigh;
attribute vec3 position3DLow;
void main()
{
    vec4 localPoition = vec4(position3DHigh + position3DLow,1.0);
    gl_Position = czm_modelViewProjection *localPoition;
}
`
&l
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值