鸿蒙原生应用元服务开发-WebGL网页图形库开发概述

WebGL的全称为Web Graphic Library(网页图形库),主要用于交互式渲染2D图形和3D图形。目前HarmonyOS中使用的WebGL是基于OpenGL裁剪的OpenGL ES,可以在HTML5的canvas元素对象中使用,无需使用插件,支持跨平台。WebGL程序是由JavaScript代码组成的,其中使用的API可以利用用户设备提供的GPU硬件完成图形渲染和加速。基本概念如下。

一、着色器

可以理解为运行在显卡中的指令和数据。在WebGL中,着色器是用OpenGL ES着色语言(GLSL)编写的。

完整的着色器包括顶点着色器和片元着色器。顶点着色器和片元着色器的交互则涉及到图片光栅化。

顶点着色器:最基本的任务是接收三维空间中点的坐标,将其处理为二维空间中的坐标并输出。

片元着色器:最基本的任务是对需要处理的屏幕上的每个像素输出一个颜色值。

图片光栅化:将顶点着色器输出的二维空间中的点坐标,转化为需要处理的像素并传递给片元着色器的过程。

二、缓冲区

驻存于内存中的JavaScript对象,存储着即将推送到着色器中的attribute对象。

三、着色器程序

将缓冲区中的数据推送到着色器中还需涉及“着色器程序”,一个负责关联着色器和缓冲区的JavaScript对象。一个WebGLProgram 对象由两个编译过后的 WebGLShader 组成,即顶点着色器和片段着色器(均由 GLSL 语言所写)。

四、运作机制

图1 WebGL运作机制

应用前端HTML5绘制界面组件。

Native API完成前端JavaScript与C++代码交互。

JavaScript engine为图形框架,为WebGL模块提供绘制对象Surface。

WebGL模块对外暴露OpenGL ES的GPU绘制接口。

中间接口层EGL(Embedded Graphics Library)完成不同平台的适配。

本文参考引用HarmonyOS官方开发文档,基于API9。

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图|dfs bfs|最小生成树|最短路|一篇搞定图的所有知识点

文章目录 图前言项目代码仓库图的基本概念图的表示方法邻接矩阵邻接表图的一些相关概念 图的遍历bfsdfs如果给的图不是连通图? 最小生成树Kruskal算法Prim算法 最短路径单源最短路径--Dijkstra算法单源最短路径--Bellman-Ford算法多源最短路径--Floyd-Warshall算法 …

代码理解 eq

import torchls2 torch.Tensor([0.2,0.2,0.1])print(ls2.eq(0.2)) print(ls2.eq(0.2).float())

Centos7安装Gogs完整教程

前言 本文章讲的是如何在Centos7下安装git服务器Gogs,本文参考了网络上的文章和官方文档。根据本文来操作可以完美安装Gogs,如果有其他问题或者看法,可以在评论区留下你的问题或看法。如果觉得本文对你有用,还请点赞和收藏一下。…

CorelDRAW Essentials2024使用简单易学的图形软件,让设计充满乐趣

CorelDRAW Essentials 2024使用简单易学的图形软件,让设计充满乐趣 创作引人注目的海报、卡片、社交媒体图片等。 增强功能!支持文件导入/导出新增功能!支持 WebP 文件,提高网页兼容性并优化图像交付增强功能!显著的…

sizeof辨析——二维数组(超级详细)

二维数组加sizeof的知识如果基础不扎实,上面的代码恐怕很难区分,这篇文章就深度解析一下有关问题 我们在分析之前,要提及一些基础的前提知识 前提知识: 一: &数组名 和 sizeof(数组名)这…

CSS3基础2

CSS3 用户界面 resize 示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>…

MybatisPlus知识点总结(基于黑马2023MybatisPlus课程)

MybatisPlus知识点总结 配套资料 黑马微服务框架笔记&#xff0c;内含mpMybatisPlus.pptxMyBatis-Plus &#xff08;mp中文官网&#xff09; 快速入门 入门案例 使用MybatisPlus的基本步骤&#xff1a;1.引入MybatisPlus依赖&#xff0c;代替Mybatis依赖2.定义Mapper接口并继…

代码随想录算法训练营第36天—动态规划04 | ● 背包问题 ● 01背包 ● 滚动数组 ● 416. 分割等和子集

背包问题 常见的背包问题类型&#xff08;大厂面试重点掌握01背包和完全背包即可&#xff09;题目描述&#xff1a;有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品能用*次&#xff0c;求解怎么装物品使得装入…

Echarts 报提示 There is a chart instance already initialized on the dom.

问题原因&#xff1a; 每次执行 Echarts图例方法都会拿到相关的dom元素执行Echarts图例初始化操作 但是每次执行的时候拿到的dom元素又是相同的&#xff0c;Echarts初始化执行的时候检查到这个dom上面已经有了一个 图表了 就不会再重新拿到这个dom元素执行初始化操作 解决方案&…

Vue.js数据绑定解密:深入探究v-model和v-bind的原理与应用

hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验&#xff01;希望我的分享能帮助到您&#xff01;如需帮助可以评论关注私信我们一起探讨&#xff01;致敬感谢感恩&#xff01; Vue.js数据绑定解密&#xff1a;深入探究v-model和v-bind的原理与应用 一、引言 Vue.…

如何打sap NOTE

文章目录 1 Introduction2 Method2.1 search note2.2 download note2.3 upload note 3 Summarry 1 Introduction SAP Notes is a set of instructions to remove known errors from the SAP systems. Using the Note Assistant tool, SAP Notes can be applied to the system.…

云服务器Linux环境部署mall电商项目完整实践教程

云服务器Linux环境部署mall电商项目完整实践教程 引言JDK8 安装Docker 环境安装MySQL安装rpm 包安装 Mysql5.7 Redis 安装RabbitMQ 安装ElasticSearch 与 Kibana 安装MongoDB安装Nacos 安装安装 Nginx 服务部署后端SpringCloud微服务jar包站点效果结语阿里云服务器推荐 引言 在…