Cesium着色器

news2024/11/6 9:45:41

GLSL(OpenGL Shading Language)是用于编写着色器的语言

着色器类型

  1. 顶点着色器:负责处理每个顶点的属性,如位置、颜色等。
  2. 片段着色器(或像素着色器):负责计算最终像素的颜色。
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>测试</title>
      <script src="./lib/webgl-utils.js"></script>
      <script src="./lib/webgl-debug.js"></script>
      <script src="./lib/cuon-utils.js"></script>
    </head>
    
    <body onload="main()">
      <canvas id="canvas" width="400" height="400"></canvas>
    </body>
    
    </html>
    <!--脚本-->
    <script>
      function main () {
        const canvas = document.getElementById('canvas');
        const gl = getWebGLContext(canvas);
        if (!gl) {
          console.log('WebGL初始化失败');
          return;
        }
        //WebGL程序包括运行在浏览器中的JavaScript和 运行在WebGL系统的着色器程序这两个部分。
        // 着色器程序是用GLSL(OpenGL Shading Language)编写的程序,运行在WebGL系统上,负责渲染图形。着色器程序包括顶点着色器和片元着色器两个部分。
        // 顶点着色器
        //  gl_Position = vec4():表示顶点位置,必需要赋值,否则无法渲染 vec4类型
        //  gl_PointSize = 10.0:表示点的尺寸(像素数) float类型
        /*
        float 类型表示单精度浮点数
        vec4 类型表示四维向量,即有四个浮点数组成的矢量,又称齐次坐标
        vec4(v0,v1,v2,v3)表示四维向量,v0,v1,v2,v3分别表示该向量的四个分量
        */
        const vertexShaderSource = `
          void main() {
            gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
            gl_PointSize = 10.0;
          }`;
        // 片元着色器:主要是处理片元,让其显示在屏幕上,从main函数开始执行
        /**
         * gl.drawArrays()函数:绘制图形,参数1:绘制方式,参数2:从哪个点开始,参数3:绘制多少个点
         * **/
        const fragmentShaderSource = `
          void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
          }
          `
        // initShaders函数:将字符串形式的着色器代码从JavaScript传给WebGL系统,并建立着色器
        if (!initShaders(gl, vertexShaderSource, fragmentShaderSource)) {
          console.log('着色器初始化失败');
          return;
        }
        // 设置背景颜色
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        // 清空canvas
        gl.clear(gl.COLOR_BUFFER_BIT);
        // 绘制点
        gl.drawArrays(gl.POINTS, 0, 1);
    
    
      }
    </script>

webGl坐标系

三维坐标系(笛卡尔坐标系)右手坐标系

  • X 轴:水平,从左向右延伸(正方向)。
  • Y 轴:垂直,从下向上延伸(正方向)。
  • Z 轴:从屏幕外向屏幕内(观察者的方向),即从你眼睛到屏幕的方向是 Z 轴的正方向。

Cesium中的着色器:

PostProcessStage

Cesium使用这一类来应用后处理效果,例如模糊、颜色调整等。你可以编写自定义的片段着色器,展示雨天、雪花、雾等效果。

Uniforms和Varyings

  1. Uniforms:全局变量,所有片段共享,通常用于传递常量数据。
  2. Varyings:从顶点着色器传递到片段着色器的变量,每个片段的值可以不同。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2230274.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于SSM医院门诊互联电子病历管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;医生管理&#xff0c;项目分类管理&#xff0c;项目信息管理&#xff0c;预约信息管理&#xff0c;检查信息管理&#xff0c;系统管理 用户账号功能包括&#xff1a;系统首页&…

论文阅读笔记-Get To The Point: Summarization with Pointer-Generator Networks

前言 最近看2021ACL的文章&#xff0c;碰到了Copying Mechanism和Coverage mechanism两种技巧&#xff0c;甚是感兴趣的翻阅了原文进行阅读&#xff0c;Copying Mechanism的模型CopyNet已经进行阅读并写了阅读笔记&#xff0c;如下&#xff1a; 论文阅读笔记&#xff1a;Copyi…

unocss 添加支持使用本地 svg 预设图标,并支持更改大小

安装 pnpm install iconify/utils 在配置文件 unocss.config.ts&#xff1a; presets > presetIcons 选项中 通过 FileSystemIconLoader 加载本地图标&#xff0c;并指定目录。 import presetWeapp from unocss-preset-weapp import { extractorAttributify, transformer…

NineData云原生智能数据管理平台新功能发布|2024年10月版

10 月发布内容 本月发布 7 项更新&#xff0c;其中重点发布 2 项、功能优化 3 项、性能优化 1 项、其他发布 1 项。 重点发布​ 数据库 Devops - 数据生成​ NineData 支持在数据库中自动生成符合特定业务场景的随机数据&#xff0c;用于模拟实际生产环境中的数据情况&…

10种数据预处理中的数据泄露模式解析:识别与避免策略

在机器学习教学实践中,我们常会遇到这样一个问题:"模型表现非常出色,准确率超过90%!但当将其提交到隐藏数据集进行测试时,效果却大打折扣。问题出在哪里?"这种情况几乎总是与数据泄露有关。 当测试数据在数据准备阶段无意中泄露(渗透)到训练数据时,就会发生数据泄露…

<十六>Ceph mon 运维

Ceph 集群有故障了&#xff0c;你执行的第一个运维命令是什么&#xff1f; 我猜测是ceph -s 。无论执行的第一个命令是什么&#xff0c;都肯定是先检查Mon。 在开始之前我们有必要介绍下Paxos协议&#xff0c;毕竟Mon就是靠它来实现数据唯一性。 一&#xff1a; Paxos 协议 1…

Spring Boot的核心优势及其应用详解

目录 前言1. Spring Boot的核心优势1.1 启动依赖的集成1.2 自动化配置 2. 内嵌服务器支持2.1 内嵌Tomcat服务器2.2 独立运行与便捷部署 3. 外部配置管理3.1 多环境支持3.2 配置优先级与外部化配置 4. Spring Boot的应用场景4.1 微服务架构4.2 云原生应用 结语 前言 在现代的Ja…

8进制在线编码工具--实现8进制编码

具体前往&#xff1a;文本转八进制在线工具-将文本字符串转换为8进制编码,支持逗号&#xff0c;空格和反斜杠分隔符

Windows 命令提示符(cmd)中输入 mysql 并收到错误消息“MySQL不是内部或外部命令,也不是可运行的程序或批处理文件?

目录 背景: 过程&#xff1a; 1.找到MySQL安装的路径 2.编辑环境变量 3.打开cmd&#xff0c;输入mysql --version测试成功 总结: 背景: 很早之前安装了Mysql数据库&#xff0c;想查询一下当前安装的MySQL客户端的版本号&#xff0c;我在命令行界面输入mysql --verion命令回…

Python学习的自我理解和想法(22)

学的是b站的课程&#xff08;千锋教育&#xff09;&#xff0c;跟老师写程序&#xff0c;不是自创的代码&#xff01; 今天是学Python的第22天&#xff0c;学的内容是正则表达式&#xff0c;明天会出一篇详细实例介绍。电脑刚修好&#xff01;开学了&#xff0c;时间不多&…

大数据-203 数据挖掘 机器学习理论 - 决策树 sklearn 剪枝参数 样本不均匀问题

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

报错:npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。

报错场景 使用npm run dev 报错 npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 https:/go.microsoft.com/fwlink/?LinkID135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 npm…

Python基于TensorFlow实现双向循环神经网络GRU加注意力机制分类模型(BiGRU-Attention分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景 随着深度学习技术的发展&#xff0c;循环神经网络&#xff08;RNN&#xff09;及其变种如门控循环…

从APP小游戏到Web漏洞的发现

一、前因&#xff1a; 在对一次公司的一个麻将游戏APP进行渗透测试的时候发现&#xff0c;抓到HTTP请求的接口&#xff0c;但是反编译APK后发现没有在本身发现任何一个关于接口或者域名相关的关键字&#xff0c;对此感到了好奇。 于是直接解压后everything搜索了一下&#xff…

C++ | Leetcode C++题解之第525题连续数组

题目&#xff1a; 题解&#xff1a; class Solution { public:int findMaxLength(vector<int>& nums) {int maxLength 0;unordered_map<int, int> mp;int counter 0;mp[counter] -1;int n nums.size();for (int i 0; i < n; i) {int num nums[i];if …

一个月调研分析标的“英伟达”

放在现在依然成立 一、移动网兴起至今的最佳股票与人工智能时代的目标 9 年移动网兴起至今&#xff0c;若选一只股票长期持有&#xff0c;最佳解是 ARM&#xff08;涨了 20 倍&#xff09;&#xff0c;因为无论系统层和应用层谁胜出&#xff0c;底层一定是芯片&#xff0c;而…

5.Java入门笔记--数组

数组就是一个容器&#xff0c;用来存储一批同种类型的数据。 1.静态初始化数组 定义数组的时候直接给数组赋值。 静态初始化数组的格式&#xff1a; //完整格式 数据类型[] 数组名 new 数据类型[]{元素1,元素2,元素3...}; int [] ages new int[]{12,24,36} double[] scor…

SSM学习 day02

一、vue项目开发流程 vue根组件 <template><div><h1>{{ message }}</h1><element-view></element-view></div> </template><script> import ElementView from ./views/Element/ElementView.vue export default {compon…

OpenGL入门003——使用Factory设计模式简化渲染流程

前面两节已经学会了如何使用opengl创建窗口并绘制三角形&#xff0c;我们可以看出有些步骤是固定的&#xff0c;而且都写在main.cpp&#xff0c;这一节我们将了解如何使用Factroy设计模型。将模型渲染逻辑封装在一个单独的类中&#xff0c;简化开发流程&#xff0c;且提高代码复…

【CSS/SCSS】@layer的介绍及使用方法

目录 基本用法layer 的作用与优点分离样式职责&#xff0c;增强代码可读性和可维护性防止无意的样式冲突精确控制样式的逐层覆盖提高复用性 兼容性实际示例&#xff1a;使用 import 管理加载顺序实际示例&#xff1a;混入与 layer 结合使用 layer 是 CSS 中用于组织和管理样式优…