0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙OS元服務(wù)開發(fā):【W(wǎng)ebGL網(wǎng)頁圖形庫開發(fā)概述】

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-04-02 17:26 ? 次閱讀

WebGL的全稱為Web Graphic Library(網(wǎng)頁圖形庫),主要用于交互式渲染2D圖形和3D圖形。目前HarmonyOS中使用的WebGL是基于OpenGL裁剪的OpenGL ES,可以在HTML5的canvas元素對象中使用,無需使用插件,支持跨平臺。WebGL程序是由JavaScript代碼組成的,其中使用的API可以利用用戶設(shè)備提供的GPU硬件完成圖形渲染和加速?;靖拍钊缦?。

一、著色器

可以理解為運(yùn)行在顯卡中的指令和數(shù)據(jù)。在WebGL中,著色器是用OpenGL ES著色語言(GLSL)編寫的。

完整的著色器包括頂點(diǎn)著色器和片元著色器。頂點(diǎn)著色器和片元著色器的交互則涉及到圖片光柵化。

頂點(diǎn)著色器:最基本的任務(wù)是接收三維空間中點(diǎn)的坐標(biāo),將其處理為二維空間中的坐標(biāo)并輸出。

片元著色器:最基本的任務(wù)是對需要處理的屏幕上的每個像素輸出一個顏色值。

圖片光柵化:將頂點(diǎn)著色器輸出的二維空間中的點(diǎn)坐標(biāo),轉(zhuǎn)化為需要處理的像素并傳遞給片元著色器的過程。

二、緩沖區(qū)

駐存于內(nèi)存中的JavaScript對象,存儲著即將推送到著色器中的attribute對象。

三、著色器程序

將緩沖區(qū)中的數(shù)據(jù)推送到著色器中還需涉及“著色器程序”,一個負(fù)責(zé)關(guān)聯(lián)著色器和緩沖區(qū)的JavaScript對象。一個WebGLProgram 對象由兩個編譯過后的 WebGLShader 組成,即頂點(diǎn)著色器和片段著色器(均由 GLSL 語言所寫)。

四、鴻蒙開發(fā)技術(shù)已更新[qr23.cn/AKFP8k]參考前往。

搜狗高速瀏覽器截圖20240326151450.png

五、運(yùn)作機(jī)制

或者添加mau123789是v直接拿去鴻蒙NEXT技術(shù)文檔

圖1 WebGL運(yùn)作機(jī)制

應(yīng)用前端HTML5繪制界面組件。

Native API完成前端JavaScript與C++代碼交互。

JavaScript engine為圖形框架,為WebGL模塊提供繪制對象Surface。

WebGL模塊對外暴露OpenGL ES的GPU繪制接口。

中間接口層EGL(Embedded Graphics Library)完成不同平臺的適配。

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • gpu
    gpu
    +關(guān)注

    關(guān)注

    28

    文章

    4760

    瀏覽量

    129130
  • HarmonyOS
    +關(guān)注

    關(guān)注

    79

    文章

    1980

    瀏覽量

    30327
  • 鴻蒙OS
    +關(guān)注

    關(guān)注

    0

    文章

    189

    瀏覽量

    4475
收藏 人收藏

    評論

    相關(guān)推薦

    鴻蒙OS服務(wù)開發(fā)案例:【WebGL網(wǎng)頁圖形開發(fā)著色器繪制彩色三角形】

    使用WebGL開發(fā)時,為保證界面圖形顯示效果,請使用真機(jī)運(yùn)行。
    的頭像 發(fā)表于 04-02 15:12 ?1877次閱讀

    鴻蒙原生應(yīng)用/服務(wù)實(shí)戰(zhàn)-Web隱私聲明

    這個位置的隱私申明是需要在WEB網(wǎng)頁下完成的,ArkTS鴻蒙原生應(yīng)用與服務(wù)開發(fā)者,不一定熟悉這塊,一些公司也不一定有自己的
    發(fā)表于 01-24 15:05

    鴻蒙開發(fā)WebGL】簡單了解

    WebGL的全稱為Web Graphic Library(網(wǎng)頁圖形),主要用于交互式渲染2D圖形和3D
    發(fā)表于 02-25 21:56

    鴻蒙原生應(yīng)用服務(wù)開發(fā)-WebGL網(wǎng)頁圖形開發(fā)概述

    WebGL的全稱為Web Graphic Library(網(wǎng)頁圖形),主要用于交互式渲染2D圖形和3D
    發(fā)表于 03-08 14:24

    鴻蒙原生應(yīng)用服務(wù)開發(fā)-WebGL網(wǎng)頁圖形開發(fā)接口說明

    一、場景介紹 WebGL主要幫助開發(fā)者在前端開發(fā)中完成圖形圖像的相關(guān)處理,比如繪制彩色圖形等。目前該功能僅支持使用兼容JS的類Web
    發(fā)表于 03-11 15:51

    鴻蒙原生應(yīng)用服務(wù)開發(fā)-WebGL網(wǎng)頁圖形開發(fā)無著色器繪制2D圖形

    無著色器繪制2D圖形 使用WebGL開發(fā)時,為保證界面圖形顯示效果,請使用真機(jī)運(yùn)行。 此場景為未使用WebGL繪制的2D
    發(fā)表于 03-12 15:42

    HarmonyOS NEXT應(yīng)用服務(wù)開發(fā)Intents Kit(意圖框架服務(wù))本地搜索方案概述

    一、概述 本地搜索是在HarmonyOS歸一化搜索特性,開發(fā)者將應(yīng)用/服務(wù)內(nèi)的功能和內(nèi)容通過意圖框架共享到HarmonyOS,即可實(shí)現(xiàn)“一步搜索,內(nèi)容直達(dá)”。 二、典型場景 以“音樂
    發(fā)表于 11-06 10:59

    鴻蒙原生開發(fā)手記:01-服務(wù)開發(fā)

    簡介 服務(wù)鴻蒙中的一種輕量應(yīng)用形態(tài),無需下載,直接運(yùn)行。類似于微信小程序,但與小程序不同的是,服務(wù)更加輕量。
    發(fā)表于 11-14 17:28

    鴻蒙原生開發(fā)手記:03-服務(wù)開發(fā)全流程(開發(fā)服務(wù),只需要看這一篇文章)

    導(dǎo)讀 本文帶來非常詳細(xì)的服務(wù)開發(fā)及上架全流程介紹包含服務(wù)介紹、創(chuàng)建、服務(wù)卡片、簽名、
    發(fā)表于 11-23 21:52

    鴻蒙 OS 應(yīng)用開發(fā)初體驗(yàn)

    的操作系統(tǒng)平臺和開發(fā)框架。HarmonyOS 的目標(biāo)是實(shí)現(xiàn)跨設(shè)備的無縫協(xié)同和高性能。 DevEco Studio 對標(biāo) Android Studio,開發(fā)鴻蒙 OS 應(yīng)用的 IDE。
    發(fā)表于 11-02 19:38

    鴻蒙原生應(yīng)用/服務(wù)開發(fā)-開發(fā)者如何進(jìn)行真機(jī)測試

    前提條件:已經(jīng)完成鴻蒙原生應(yīng)用/服務(wù)開發(fā),已經(jīng)能相對熟練使用DevEco Studio,開發(fā)者自己有
    發(fā)表于 11-30 09:46

    華為開發(fā)者大會2021鴻蒙os在哪場

    華為開發(fā)者大會2021將在10月22日-24日舉辦,地點(diǎn)為東莞松山湖,鴻蒙os 3.0或?qū)⑴c我們見面,那么華為開發(fā)者大會2021鴻蒙
    的頭像 發(fā)表于 10-22 15:24 ?1926次閱讀

    鴻蒙OS服務(wù)開發(fā)說明:【WebGL網(wǎng)頁圖形開發(fā)接口】

    WebGL主要幫助開發(fā)者在前端開發(fā)中完成圖形圖像的相關(guān)處理,比如繪制彩色圖形等。目前該功能僅支持使用兼容JS的類Web
    的頭像 發(fā)表于 04-02 17:02 ?483次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>OS</b><b class='flag-5'>元</b><b class='flag-5'>服務(wù)</b><b class='flag-5'>開發(fā)</b>說明:【<b class='flag-5'>WebGL</b><b class='flag-5'>網(wǎng)頁</b><b class='flag-5'>圖形</b><b class='flag-5'>庫</b><b class='flag-5'>開發(fā)</b>接口】

    鴻蒙開發(fā)接口圖形圖像:【WebGL

    WebGL提供圖形繪制的能力,包括對當(dāng)前繪制圖形的位置、顏色等進(jìn)行處理。
    的頭像 發(fā)表于 05-30 09:31 ?542次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>開發(fā)</b>接口<b class='flag-5'>圖形</b>圖像:【<b class='flag-5'>WebGL</b>】

    鴻蒙開發(fā)接口圖形圖像:【WebGL2】

    WebGL2支持圖形的繪制,包括對當(dāng)前繪制圖形的位置、顏色等進(jìn)行處理,其中相對WebGL來說對渲染管道和著色語言進(jìn)行了增強(qiáng)。
    的頭像 發(fā)表于 05-30 15:19 ?539次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>開發(fā)</b>接口<b class='flag-5'>圖形</b>圖像:【<b class='flag-5'>WebGL</b>2】