3D視覺化開發(基於頂點著色器和片元著色器)

2021-08-18 07:47:46 字數 1507 閱讀 7649

背景:最近在做大屏的3d地圖視覺化開發,技術採用three.js+glsl這樣的是一種實現方式,其中使用glsl實現頂點著色器和片元著色器。

const indices= float16array(points)

const vertices = float32array(points * 3);

const colors = float32array(points * 3);

const normals = float32array(points * 3);

.......

const geometry = new three.buffergeometry();

geometry.setindex(indices, 1);

geometry.addattribute('position', new three.bufferattribute(vertices, 3)); // vertices是頂點的模型座標

geometry.addattribute('acolor', new three.bufferattribute(colors, 3));

geometry.addattribute('anormal', new three.bufferattribute(normals, 3));

頂點著色器

attribute vec3 acolor;

varying vec3 vcolor;

uniform float u_size;

void main()

片元著色器

varying vec3 vcolor;

void main() else

}

最終效果

開發&&工作

今天週六,上午睡覺、中午睡覺、下午加班,晚上寫blog,現在正在公司工位寫最近的我,10點多啦。接觸3d視覺化乙個月,從15年開始接觸了視覺化,但一直都侷限在2d用於bi分析的圖表,現在工作有3d需求,然後去負責雙11大屏的團隊學習了2周,感覺路還很長,革命尚未成功,還要繼續努力。

生活&&思想

前段時間我告訴大濕胸說我想去做演員,因為演員可以感受很多不同的人生,並且有很多的體驗,每天還可以美美的,看很多的美景,總之感覺就是很好啦。剛好乙個盆友是製片人,我還特地找她說了我的天真的想法,她說可以呀,估計也是覺得不太好拒絕,所以就隨便答應啦…

這個周我告訴大濕胸說我想以後不coding之後去做心理醫生,研究一下神奇的人類,現在越來越好奇。

周四的晚上加班,旁邊乙個小夥伴忽然問我什麼時候結婚,我很懵逼的回答不造啊,估計結不了啦。因為沒時間找男盆友也木有談戀愛,555555…,然後回家路上發了一條憂心忡忡的心情。

3D視覺化 3D視覺化在智慧型園區的應用

隨著5g運用和新基建政策,構建智慧型城市系統成為當下城市管理的熱門需求,智慧型園區建設的核心是3d視覺化平台,利用它可以提高企業園區智慧型化 3d數位化管理服務水平。3d視覺化智慧型園區 以物聯網 雲平台 全面的it建設為基礎,進行園區資源集約化管理,打造綠色園區。準確 直觀地顯示園區執行基礎資料 ...

3D視覺化 3D視覺化在智慧型園區的應用

隨著5g運用和新基建政策,構建智慧型城市系統成為當下城市管理的熱門需求,智慧型園區建設的核心是3d視覺化平台,利用它可以提高企業園區智慧型化 3d數位化管理服務水平。3d視覺化智慧型園區 以物聯網 雲平台 全面的it建設為基礎,進行園區資源集約化管理,打造綠色園區。準確 直觀地顯示園區執行基礎資料 ...

Unity3d 頂點著色器傳入的頂點資料

一 cg頂點程式必須在結構中傳遞頂點資料。幾種常用的頂點結構定義在檔案unitycg.cginc中。在大部分情況下僅僅使用它們就夠了。結構如下 二 如果你想訪問個別的頂點資料,你必須自己宣告頂點結構。結構中的成員必須是屬於以下列表中的 1 float4 vertex position 頂點位置 2 ...