視覺化基礎 （3）

本篇只是讓大家對於webgl 有個大致認知即可，了解他的大致流程；因為我們在專案中的開發都是基於各種封裝好的框架 如 three.js等

基於webgl編寫乙個簡單的例子

lang
="en"
>
>
>
認識webgltitle
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
>
body, html
canvas
style
>
head
>
>
"webgl"
width
="500"
height
="500"
style
="background-color
: blue
">
canvas
>
body
>
html
>

<

!--同canvas2d繪圖一樣，創造乙個繪畫環境--
>
//通過getelementbyid()方法獲取canvas畫布
var canvas=document.
getelementbyid
('webgl');
//通過方法getcontext()獲取webgl上下文
var gl=canvas.
getcontext
('webgl'
);

//頂點著色器定義了頂點的渲染位置和點的渲染畫素大小
var vertexshadersource =''+
'void main()'
;//gl_pointsize、gl_position都是內建變數，
//給內建變數gl_position賦值vec4(0.0,0.0,0.0,1.0)，也就是設定頂點位置座標，vec4代表的是一種資料型別， 在這裡可以理解為vec4()是乙個可以構造出vec4型別資料的建構函式，前三個引數表示頂點座標值xyz。

//片元著色器定義了點的渲染結果畫素的顏色值
var fragshadersource =''+
'void main()'
;//gl_fragcolor都是內建變數， 
//給內建變數gl_fragcolor賦值vec4(1.0,0.0,0.0,1.0)，也就是設定會在螢幕上顯示的畫素的顏色，vec4()建構函式 前三個引數，表示顏色rgb值，最後乙個引數是透明度a。在webgl著色器中顏色值使用[0,1]區間表示。 
<
!--封裝著色器函式--
>
function
initshader
(gl,vertexshadersource,fragmentshadersource)

<

!--繪製圖形--
>
var program =
initshader
(gl,vertexshadersource,fragshadersource)
;//開始繪製，顯示器顯示結果
gl.drawarrays
(gl.
points,0
,1);
方法的作用就是通知gpu執行著色器**，然後根據著色器**在canvas畫布上進行渲染繪製。

完整**

lang
="en"
>
>
charset
="utf-8"
>
>
使用webgl繪製乙個點title
>
head
>
>
"webgl"
width
="500"
height
="500"
style
="background-color
: blue
">
canvas
>
>
//通過getelementbyid()方法獲取canvas畫布
var canvas=document.
getelementbyid
('webgl');
//通過方法getcontext()獲取webgl上下文
var gl=canvas.
getcontext
('webgl');
//頂點著色器原始碼
var vertexshadersource =''+
'void main()'
;//片元著色器原始碼
var fragshadersource =''+
'void main()'
;//宣告初始化著色器函式
function
initshader
(gl,vertexshadersource,fragmentshadersource)
//初始化著色器
var program =
initshader
(gl,vertexshadersource,fragshadersource)
;//開始繪製，顯示器顯示結果
gl.drawarrays
(gl.
points,0
,1);
script
>
body
>
html
>

視覺化 Vue基礎

作者 jeskson 達達前端小酒館 vue框架，框架的作者，尤雨溪，元件化，快速開發的特點。生命週期 beforecreate 元件剛剛被建立 created 元件建立完成 生成beforemount 掛載之前 mounted 掛載之後 成熟beforedestory 元件銷毀前呼叫 destor...

視覺化基礎 基礎語法

2.1 具體應用 2 折線圖 3 柱狀圖 4 餅圖 5 注釋 6 標題 第一部分主要作用是構建出一張空白的畫布，並可以選擇是否將整個畫布劃分為多個部分，方便在同一幅圖上繪製多個圖形的情況。最簡單的繪圖可以省略第一部分，而後直接在預設的畫布上進行圖形繪製。第二部分是繪圖的主體部分。其中新增標題，座標軸...

python資料視覺化3

matplotlib.pyplot是使matplotlib像matlab一樣工作的函式的集合。每個pyplot函式都會對圖形進行一些更改 例如，建立乙個圖形，在圖形中建立乙個繪圖區域，在繪圖區域中繪製一些線條，用標籤裝飾該繪圖等等。import matplotlib.pyplot as plt pl...