寫程式有兩個方向,開創者與應用者
傳統學校傳統教法是競賽、開創者的方向,門檻很高
像MIT OCW那樣的教法就是
(不容易畢業,畢業即失業)
但其實很多中小企業要的只是應用者,會寫SQL,EXCEL與巨集,ACCESS就差不多了
教法大多步驟寫得很細
按圖施工,保證成功
而現代Google提供越來越多方便功能
只要不跟大陸打交道,連EXCEL與許多網頁前後端都可以省掉不學
(用Google表單 Google協作平台等就好)
順便避免伺服器資安沒做好,個資外洩的法律問題
而當應用者
主要就是要掌握現有的程式
所謂站在巨人的肩膀上,看不到巨人的腳底
組合語言、編譯原理、線性代數、投影幾何知道與否無所謂
只要能把成品做出來即可
(因此有成品跟是否理解與在行是兩回事
不過至少別人能做出成品,也不方便評斷些什麼
那種狀況還敢評斷的,若自身沒作品就是土匪、地主的行為
土匪、地主在掠奪、壓榨祂人成果時,是不會體會到生產的困難處的
嗯...言多必失,話就僅限於此)
開始今天的抄襲吧!!
看能不能抄出些感覺
首先WebGL內容要寫在
<script>
</srcipt>
裡面
雖然3D技術給人種高深莫測的感覺
但WebGL依然算是Javascript的一部份,只是採用OpenGL的標準
再次重抄
<script>
var vertexShaderText =
//這是javascript宣告物件的寫法,當然有時也拿來宣告變數
//也就是上行是在說,我們宣告個物件是"頂點著色器"
//再次重抄
var vertexShaderText =
[
'precision mediump float;',
//注意,結尾的分號 ; 很重要
//分隔用的逗號,也很重要
'',
'attribute vec2 verPosition;',
//vec是向量vector的簡寫,2代表是二維向量
//注意,這種 [ 內容 , 內容 , 內容 ... ]
//這種寫法惑者說格式叫JSON
//若有玩機器學習、大數據的應該不會太陌生
//唔,不過剛才說頂點著色器物件
//現在又是JSON格式,可能是我記錯或說錯了些什麼
//隱約覺得怪怪的,我太久沒寫Javascript了
//(隔天突然想到,那只是單純的陣列)
//再次重抄
var vertexShaderText =
[
'precision mediump float;',
'',
'attribute vec2 vertPosition;',
'attribute vec3 vertColor;',
'varying vec3 fragColor;',
'',
'void main();',
'{', //注意,這是大括號,這段在彷C語言的寫法或者說是格式規定如此
' fragColor = vertColor;',
' gl_Position = vec4(vertPosition, 0.0, 1.0);',
'}' ].join('\n');
//C語言中,escape character 的\n有換行的意思
//至此,頂點著色器程式碼完成
//但感覺不好背,因為有幾個 '',的作用不明
//個數我也還沒背
//明天抄時再注意看看
var fragmentShaderText =
[
'precision mediump float;',
'',
'varying vec3 fragColor;',
'void main()',
'{',
' gl_FragColor = vec4(fragColor, 1.0);',
'}'].join('\n');
//像素著色器的程式碼部份解決
var InitDemo = function ()
{
var canvas = document.getElementById('game-surface')
var gl = canvas.getContext('webgl');
if (!gl)
{
alert('你的瀏覽不支援WebGL');
}
gl.clearColor(0.75, 0.85, 0.8, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//Create shaders
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(vertexShader, vertexShaderText);
gl.shaderSource(fragmentShader, fragmentShaderText);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS))
{
console.error('ERROR compiling vertex shader', gl.getShaderInfoLog(vertexShader))
}
//fragmentShader的錯誤處理略過(可複製貼上來改)
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
{
console.error('ERROR linking program!', gl.getProgramInfoLog(program));
return;
}
//↑這也是錯誤時的警告
gl. validateProgram(program);
if (!gl.getProgramParameter(program, gl.VALIDATE_STATUS))
{
console.error('ERROR linking program!', gl.getProgramInfoLog(program));
return;
}
var triangleVertices =
[ // X, Y, R, G, B
0.0, 0.5, 1.0, 1.0, 0.0,
-j0.5, -0.5 0.7, 0.0, 1.0,
0.5, -0.5 0.1, 1.0, 0,6
];
var triangleVertexBufferObject = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject);
gl.bindBufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
var positionAttribLocation = gl.getAttribLocation(program, 'vertPosition');
var colorAttribLocation = gl.getAttribLocation(program, 'vertColor');
gl.vertexAttribPointer(
positionAttribLocation,
2,
gl.FLOAT
gl.FALSE,
5 * Float32Array.BYTES_PER_ELEMENT,
0
);
gl.vertexAttribPointer(
colorAttribLocation,
3,
gl.FLOAT,
gl.FALSE,
5 * Float32Array.BYTES_PER_ELEMENT,
2 * Float32Array.BYTES_PER_ELEMENT
);
gl.enableVertexAttribArray(positionAttribLocation);
gl.enableVertexAttribArray(colorAttribLocation);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
嗯,後面有很多行不太清楚具體作用
留待明天研究
希望API網頁還不錯
最後
若程式碼
如果是用Notepad++寫的話
Ctrl-D可以複製這行到下行去
創作內容
11/11,第二篇,抄WebGL程式碼之進展(抄程式碼於23:13結束),更正,著色器寫法為陣列
單機版網頁遊戲系列相關 (20)
