Cesium学习笔记(一) : 使用Cesium.Primitive 的使用。

1. Cesium学习笔记(一) : 使用Cesium.Primitive 的使用

我们以创建一个矩形为例

  1. primivite创建矩形
let rectGeometry2 = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
      115,
      20,
      135,
      30
    ),
    // 挤出高度
    height: 50, // 物体表面的高度
    vertexFormat: Cesium.PreInstanceColorAppearance.VERTEX_FORMAT
  })

创建集合体实例

let instance = new Cesium.GeometryInstance({
    geometry: rectGeometry2,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0.5))
    }
  })

创建图元

let primivite = new Cesium.Primitive({
    geometryInstances: instance,
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true
    })
    // appearance 设置外观
  })

将图元添加到创建中

viewer.scene.primitives.add(primivite)
使用 Cesium.js 进行 WebGL 开发时,如果涉及自定义片段着色器(Fragment Shader)并尝试使用多个输出变量(Multiple Fragment Outputs),可能会遇到类似如下的编译错误: ``` 'customOutput' must explicitly specify all locations when using multiple fragment outputs ``` 此错误通常出现在使用 `#version 300 es` 或更高版本的 GLSL ES 着色语言标准时,该标准要求每个片段着色器的输出变量都必须显式指定其位置(location)[^1]。 ### 解决方法 1. **为每个输出变量指定位置** 在片段着色器中,如果有多个输出变量(如用于 MRT,Multiple Render Targets),每个输出变量必须使用 `layout(location = N)` 指定其输出位置。例如: ```glsl #version 300 es precision highp float; layout(location = 0) out vec4 customOutput; layout(location = 1) out vec4 anotherOutput; void main() { customOutput = vec4(1.0, 0.0, 0.0, 1.0); // 输出红色 anotherOutput = vec4(0.0, 1.0, 0.0, 1.0); // 输出绿色 } ``` 2. **在 Cesium.js 中使用自定义着色器** 在 Cesium 中创建材质或着色器程序时,可以通过 `Cesium.Material` 或 `Cesium.ShaderProgram` 接口注入自定义的片段着色器代码。确保在着色器代码中添加上述 `layout(location = N)` 声明。 示例:通过 `Cesium.Material` 创建自定义片段着色器 ```javascript const material = new Cesium.Material({ fabric: { type: 'CustomFragment', uniforms: {}, source: `#version 300 es precision highp float; in vec2 v_st; layout(location = 0) out vec4 customOutput; void main() { customOutput = vec4(v_st, 0.0, 1.0); }` } }); ``` 3. **检查上下文是否支持多输出** 确保当前 WebGL 上下文支持 `EXT_draw_buffers` 扩展(WebGL 1)或使用 WebGL 2 上下文(默认支持 MRT)。Cesium 默认使用 WebGL 2,因此应支持多输出目标。 4. **兼容性考虑** 如果希望着色器代码在不支持多输出的环境中也能运行,应避免使用多个输出变量或将多个输出合并为个 `vec4` 类型变量的不同分量输出[^1]。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值