cesium着色器学习系列2-Appearance对象

先查阅API

`translucent`	Boolean	`true`	optionalWhen `true`, the geometry is expected to appear translucent so `Appearance#renderState` has alpha blending enabled.
`closed`	Boolean	`false`	optionalWhen `true`, the geometry is expected to be closed so `Appearance#renderState` has backface culling enabled.
`material`	Material	`Material.ColorType`	optionalThe material used to determine the fragment color.
`vertexShaderSource`	String		optionalOptional GLSL vertex shader source to override the default vertex shader.
`fragmentShaderSource`	String		optionalOptional GLSL fragment shader source to override the default fragment shader.
`renderState`	RenderState		optionalOptional render state to override the default render state.

translucent：开启时，则renderstate可以设置透明度

closed：图形是否自动闭合

material：材质

vertexShaderSource：顶点着色器

fragmentShaderSource：片元着色器。

由上可以看出

材质是必须指定的参数，cesium默认内置了一些材质，常用的就是颜色材质。

除此之外，可以设置顶点着色器和片元着色器。

var appearance = new Cesium.Appearance({renderState: {blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND,  //混合depthTest: { enabled: true }, //深度测试depthMask: true},fragmentShaderSource: f,vertexShaderSource: v
});

renderstate的API没看见。暂时不做研究，主要看两个着色器部分

    let v=`  attribute vec3 position3DHigh;attribute vec3 position3DLow;attribute vec4 color;varying vec4 v_color;attribute float batchId;void main(){vec4 p = czm_computePosition();v_color =color;p = czm_modelViewProjectionRelativeToEye * p;gl_Position = p;gl_PointSize=20.0;}`let f=`  varying vec4 v_color;void main(){float d = distance(gl_PointCoord, vec2(0.5,0.5));if(d < 0.5){gl_FragColor = v_color;}else{discard;}}`

先看顶点着色器：初接触，感觉完全懵逼，尝试删除一些没有用到过的变量，立马报错；如position3DHigh，batchId等。

将着色器中使用的函数拿出来在源码当中搜索，发现，position3Dhigh等信息时cesium框架自动封装进去的

大佬的解释：

position3DHigh与position3DLow是cesium为了降低传输精度降低，将double拆成两个float，用两个float来模拟double，因为js不支持double

虽然代码逻辑里面没有用到这些变量，但是必须得声明

再看看czm_computePosition ，根据源码就可理解为何这样写，就能设置图形的顶点了。

经尝试，还有另一种写法：，这是搜索czm_translateRelativeToEye函数出来的示例

 let v=`attribute vec3 position3DHigh;attribute vec3 position3DLow;// attribute vec3 position2DHigh;// attribute vec3 position2DLow;attribute vec4 color;varying vec4 v_color;attribute float batchId;void main(){vec4 p = czm_translateRelativeToEye(position3DHigh, position3DLow);v_color =color;p = czm_modelViewProjectionRelativeToEye * p;gl_Position =  czm_modelViewProjectionRelativeToEye * p;gl_PointSize=20.0;}`let f=`  varying vec4 v_color;void main(){float d = distance(gl_PointCoord, vec2(0.5,0.5));if(d < 0.5){gl_FragColor = v_color;}else{discard;}}`

至此，顶点着色器的入门函数就理解了

示例中使用的片元着色器就不再赘述了

cesium着色器学习系列2-Appearance对象相关推荐

cesium着色器学习系列3-着色器方式绘制图元
通过前两篇文章的研究,那么就可以基于着色器写自己的图元实现逻辑了 let viewer = new Cesium.Viewer('cesiumContainer', {imageryProvider: ...
cesium着色器学习系列5- 最长的一帧入口理解
cesium大神法克鸡丝在最长的一帧中讲到过,cesium的起始入口点在startRenderLoop 函数中.实际上,就是js中的requestAnimationFrame https://www. ...
Unity初学Shadergraph创建着色器学习教程
MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英文字幕(根据原英文字幕机译更准确) |时长:51节课(4h 44m) |大小解压后:2.55 G ...
曲面细分着色器学习记录
曲面细分着色器学习记录前言: 今天终于走通了Catlike大佬的曲面细分着色器教程,感慨一番,自己的学习之路还很漫长呢今天的博客内容只是简单的记录一下Catlike大佬的教程先上个链接:Catl ...
opengl 设置每个点的颜色_OpenGL学习笔记（四）着色器
本文为学习LearnOpenGL的学习笔记,如有书写和理解错误还请大佬扶正: 教程链接: 着色器 - LearnOpenGL CNlearnopengl-cn.github.io 一,基础概念 1, ...
【我的OpenGL学习进阶之旅】着色器和程序（上）------着色器
着色器和程序一.前言二.着色器和程序 2.1 创建和编译一个着色器 2.1.1 创建着色器 2.1.2 删除着色器 2.1.3 提供着色器源代码 2.1.4 编译色器 2.1.4 查询有关着色器对 ...
基于Cesium使用自定义着色器的资源总结
基于Cesium使用自定义着色器的资源总结二维几何着色器 Cesium.js着色器的简单实现 B站:cesium着色器的介绍及使用 cesium添加自己的着色器(我没复现出来) 基于3DTile着色 ...
【《WebGL编程指南》读书笔记——着色器和程序对象的准备】
本文为<WebGL编程指南>第九章下半部分读书笔记总目录链接:https://blog.csdn.net/floating_heart/article/details/124001572 ...
“着色器”是什么意思？如何使用HTML5和WebGL创建它们
本文是Microsoft的Web开发技术系列的一部分. 感谢您支持使SitePoint成为可能的合作伙伴. 您可能已经注意到,去年我们第一次谈论了babylon.js ,最近发布了带有3D声音定位(使 ...

cesium着色器学习系列2-Appearance对象

cesium着色器学习系列2-Appearance对象相关推荐

最新文章

热门文章