BillBoard shader实现

1623 篇文章 22 订阅
1277 篇文章 12 订阅

BillBoard shader实现
当前效果是Quad始终处于相机正前方,而不只是方向垂直。去掉m_vOffset就是一般意义上的billboard了。

Vert程序

uniform mat4 g_WorldViewProjectionMatrix;
uniform mat4 g_WorldMatrix;
uniform mat4 g_ProjectionMatrix;
uniform mat4 g_ViewMatrix;

uniform vec3 m_vOffset;
uniform vec3 m_CamPos;

attribute vec3 inPosition;
attribute vec2 inTexCoord;

varying vec2 texCoord;


void main(){

//    gl_Position =   g_WorldViewProjectionMatrix * vec4(inPosition, 1.0);

    //  billboard实现
    // Quad中心点的世界坐标
    vec4 vCenter = g_WorldMatrix * vec4(0,0,0,1) + vec4(m_vOffset, 0) ;
    // Quad自身坐标系的Up方向
    vec3 vUp = vec3(0,1,0); 
    // 中心点到相机的LookAt方向
    vec3 vEye = normalize( m_CamPos  - vCenter);
    // Quad自身坐标系的Right方向
    vec3 vRight = cross(vUp, vEye);
    vUp = normalize(cross(vEye, vRight));
    vRight = normalize(vRight);

    // 根据纹理坐标偏移,10为Quad的scale size
    vec3 vTmpPos = vCenter.xyz;
    vTmpPos += (inTexCoord.x - 0.5) *10 * vRight;
    vTmpPos += (inTexCoord.y - 0.5) *10 * vUp;

    gl_Position = g_ProjectionMatrix * g_ViewMatrix * vec4(( vTmpPos), 1);

    texCoord = inTexCoord;  

}

Frag程序

varying vec2 texCoord;
uniform sampler2D m_ColorMap;
uniform vec4 m_Color;

void main(){
    gl_FragColor= texture2D(m_ColorMap, texCoord);
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 可以使用 Cesium 的 `BillboardCollection` 类来实现在 Vue 框架中点击创建 billboard 的功能。 首先,在 Vue 组件的 data 中定义一个变量来存储 billboard 集合: ``` data() { return { billboardCollection: new Cesium.BillboardCollection() } } ``` 然后,在组件的 mounted 钩子函数中,将 billboard 集合添加到场景中: ``` mounted() { this.viewer.scene.primitives.add(this.billboardCollection); } ``` 接着,在组件的 template 中绑定点击事件,在事件处理函数中添加新的 billboard: ``` <template> <div @click="addBillboard">Click to add a billboard</div> </template> <script> export default { methods: { addBillboard() { // 获取鼠标点击的位置 let pickedObject = this.viewer.scene.pick(this.viewer.camera.getPickRay(this.viewer.canvas.clientWidth / 2, this.viewer.canvas.clientHeight / 2)); if (Cesium.defined(pickedObject)) { let position = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(pickedObject.position); // 创建新的 billboard let billboard = this.billboardCollection.add({ position: Cesium.Cartesian3.fromRadians(position.longitude, position.latitude, position.height + 100), image: 'path/to/image.png' }); } } } } </script> ``` 在这个例子中,我们使用了 Cesium 的 `pick` 方法来获取鼠标点击的位置,然后使用 `Cartesian3.fromRadians` 将经纬度坐标转换为笛卡尔坐标,最后使用 `BillboardCollection.add` 方法添加新的 billboard。 希望这些信息能帮助您实现在 Vue 框架中使用 Cesium 创建 billboard 的功能。 ### 回答2: 在Vue框架中实现点击创建billboard功能,可以按照以下步骤进行: 1. 首先,在Vue项目中引入Cesium库,可以通过npm安装或直接引入Cesium.js文件。 2. 在Vue组件中,可以在`mounted`钩子函数中创建Cesium的Viewer对象,并将其初始化为指定DOM元素的父元素,如: ``` mounted() { this.viewer = new Cesium.Viewer(this.$refs.mapContainer); } ``` 其中`$refs.mapContainer`是在模板中定义的一个ref,用于获取地图容器的DOM元素。 3. 在模板中定义一个按钮,并绑定一个点击事件,如: ```vue <template> <div> <button @click="createBillboard">创建Billboard</button> <div class="map-container" ref="mapContainer"></div> </div> </template> ``` 4. 在Vue组件的methods选项中定义`createBillboard`方法,用于创建billboard。在该方法中,可以使用Cesium的`Cesium.Cartesian3`类创建一个位置,然后通过`Cesium.BillboardCollection`类创建一个billboard,并设置其属性,最后将billboard添加到scene中。代码示例如下: ```vue methods: { createBillboard() { // 创建位置 var position = Cesium.Cartesian3.fromDegrees(103, 30); // 创建BillboardCollection并设置属性 var billboard = this.viewer.scene.primitives.add( new Cesium.BillboardCollection() ); billboard.add({ position: position, image: "path/to/billboard-image.png", scale: 1.0, }); }, } ``` 其中,`Cesium.Cartesian3.fromDegrees`根据经纬度创建一个位置,`Cesium.BillboardCollection`用于存储和渲染多个billboard,`image`属性指定billboard的图片路径,`scale`属性用于设置billboard的大小。 5. 最后,通过点击按钮,调用`createBillboard`方法即可在地图上创建一个billboard。 这样,就在Vue框架中实现了点击创建billboard功能。 ### 回答3: 在Vue框架中实现点击创建Billboard功能,可以按照以下步骤实现: 1. 首先,将Cesium集成到Vue项目中。可以通过npm安装Cesium,然后在Vue组件中引入Cesium相关的库文件。 2. 在Vue组件的data选项中添加一个数组billboards,用于存储所有的Billboard对象信息。在初始状态下,该数组为空。 3. 在Vue组件的template中添加一个Cesium的Canvas元素,用于渲染Cesium场景。可以将该Canvas元素的id设为"cesiumContainer"。 4. 在Vue组件的methods选项中添加一个方法handleClick,用于处理点击事件。在该方法内,获取点击事件的坐标,在3D场景中添加一个Billboard对象,并将其位置设为点击坐标。然后,将该Billboard对象的信息添加到billboards数组中保存。 5. 在Vue组件的mounted钩子函数中,通过Cesium的Viewer对象初始化3D场景,并将Canvas元素绑定到该Viewer对象上。同时,监听Canvas元素的点击事件,当点击事件发生时,调用handleClick方法。 6. 在Vue组件的template中,使用v-for指令循环遍历billboards数组,并根据每个Billboard对象的信息,在Canvas中显示对应的Billboard元素。 通过以上步骤,就可以在Vue框架中实现点击创建Billboard功能。当用户在Canvas中点击时,会在点击位置创建一个Billboard,并在屏幕上显示出来。同时,Billboard对象的信息也会保存在billboards数组中,以便后续的操作和管理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值