WebGL程式設計指南案例解析之繪製乙個點

"webgl

" width="
400" height="
400">

首先讓我們來看webgl1.js:

//

第一章.繪製乙個點，通過頂點著色器和片元著色器傳參
//頂點著色器，接收attribute型變數a_position
var vshader =`
attribute vec4 a_position;
void
main()
`;//
片元著色器,接收uniform型變數u_fragcolor
var fshader =`
precision mediump 
float
; uniform vec4 u_fragcolor;
void
main()
`;//
注意：頂點著色器利用外部資料來初始化gl_position變數
//gl_position變數（座標）將輸出到片元著色器，告訴片元著色器哪些座標需要被著色
//片元著色器對gl_position中的座標進行一一渲染（染色），並將顏色輸出，這個顏色就是gl_fragcolor
//同樣，這個輸出的顏色，也是可以由外部資料初始化的
function main()
//初始化著色器
if(!initshaders(gl,vshader,fshader))
//獲取shaderprogram中attribute變數a_position的位址和uniform變數u_fragcolor的位址
var a_position = gl.getattriblocation(gl.program,'
a_position');
var u_fragcolor = gl.getuniformlocation(gl.program,'
u_fragcolor');
canvas.onmousedown =function(ev)
var g_points =;
var g_colors =;
function click(ev,gl,canvas,a_position)else
if(x < 0.0 && y <0.0
)else
//用指定顏色填充webgl容器，就是設定背景
gl.clearcolor(0.4,0.5,0.0,1.0
); gl.clear(gl.color_buffer_bit);
var len =g_points.length;
//根據已有的點和對應的顏色繪製圖形（點）
for (var i = 0; i < len; i++) 
}}main();

WebGL程式設計（1） 學習總結之WebGL常用方法

webgl簡介 webgl，是一項使用canvas在網頁上繪製和渲染複雜三維圖形 3d圖形 並允許使用者與之進行互動的技術，webgl的技術規範繼承自免費和開源的opengl標準，而後者在計算機圖形學 電子遊戲 計算機輔助設計等領域已被廣泛使用多年。由於webgl處理的是三維圖形，所以它使用的是三維...

WebGL程式設計指南高階技術篇（常見需求的處理）

一 滑鼠控制模型旋轉 實質的根據滑鼠移動前後的位置比較得出x，y軸的旋轉角度 圖中是乙個螢幕，有乙個模型 恩，他是乙個模型 滑鼠由p點移動到p1點，我們假定移動單位步長旋轉 角度 p x1,y1 p1 x2,y2 x軸移動 x2 x1 y軸移動 y2 y1 所以x軸旋轉 x2 x1 度，y軸旋轉 y...

00 《WebGL程式設計指南》解讀2 1繪製2D矩形

演示效果如下 講解 please use a browser that supports canvas 在html中的body中定義了canvas標籤中載入的函式為main 使用onload標籤定義。其中canvas是html5標籤，並不是所有的瀏覽器都支援，倘若不支援將會輸出please use ...