mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-04 15:17:36 +00:00
108 lines
3.4 KiB
HTML
108 lines
3.4 KiB
HTML
<!--********************************************************************
|
||
* by jiawanlong
|
||
*********************************************************************-->
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<title>绘制三角形</title>
|
||
<script src="./glMatrix-0.9.6.js"></script>
|
||
<script>
|
||
|
||
var projMat4 = mat4.create(); // 第三方库：投影影矩阵转换功能
|
||
var webgl;
|
||
|
||
// 顶点着色器的配置
|
||
let vertexstring = `
|
||
attribute vec4 a_position;
|
||
uniform mat4 proj;
|
||
void main(void){
|
||
gl_Position =proj * a_position;
|
||
gl_PointSize=60.0;
|
||
}
|
||
`;
|
||
|
||
// 片元着色器的配置
|
||
let fragmentstring = `
|
||
void main(void){
|
||
gl_FragColor = vec4(0,0,1.0,1.0);
|
||
}
|
||
`;
|
||
|
||
|
||
function init() {
|
||
initWebgl();
|
||
initShader();
|
||
initBuffer();
|
||
draw();
|
||
}
|
||
|
||
// canvas中初始化webgl上下文
|
||
function initWebgl() {
|
||
let webglDiv = document.getElementById("myCanvas");
|
||
webgl = webglDiv.getContext("webgl");
|
||
webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);
|
||
mat4.ortho(
|
||
0,
|
||
webglDiv.clientWidth,
|
||
webglDiv.clientHeight,
|
||
0,
|
||
-1.0,
|
||
1.0,
|
||
projMat4
|
||
);
|
||
}
|
||
|
||
// 配置顶点vertex_shader、片元着色器fragment_shader，建立渲染项目program
|
||
function initShader() {
|
||
let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
|
||
let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);
|
||
|
||
webgl.shaderSource(vsshader, vertexstring);
|
||
webgl.shaderSource(fsshader, fragmentstring);
|
||
|
||
webgl.compileShader(vsshader);
|
||
webgl.compileShader(fsshader);
|
||
|
||
let program = webgl.createProgram();
|
||
webgl.attachShader(program, vsshader);
|
||
webgl.attachShader(program, fsshader);
|
||
|
||
webgl.linkProgram(program);
|
||
webgl.useProgram(program);
|
||
|
||
webgl.program = program;
|
||
}
|
||
|
||
function initBuffer() {
|
||
let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
|
||
let arr = [100.0, 100.0, 0, 200.0, 200.0, 0, 300.0, 200.0, 0, 400, 600, 0];
|
||
let vertexArr = new Float32Array(arr);
|
||
let trangleBuffer = webgl.createBuffer();
|
||
webgl.bindBuffer(webgl.ARRAY_BUFFER, trangleBuffer);
|
||
webgl.bufferData(webgl.ARRAY_BUFFER, vertexArr, webgl.STATIC_DRAW);
|
||
webgl.enableVertexAttribArray(aPsotion);
|
||
webgl.vertexAttribPointer(aPsotion, 3, webgl.FLOAT, false, 0, 0);
|
||
|
||
let uniformProj = webgl.getUniformLocation(webgl.program, "proj");
|
||
webgl.uniformMatrix4fv(uniformProj, false, projMat4);
|
||
}
|
||
function draw() {
|
||
webgl.clearColor(0.0, 0.0, 0.0, 1.0);
|
||
webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
|
||
webgl.drawArrays(webgl.TRIANGLES, 0, 3);
|
||
// webgl.drawArrays(webgl.TRIANGLE_STRIP,0,4);
|
||
// webgl.drawArrays(webgl.TRIANGLE_FAN,0,4);
|
||
}
|
||
|
||
|
||
</script>
|
||
</head>
|
||
|
||
<body onload="init()">
|
||
<canvas id="myCanvas" width="1024" height="768"></canvas>
|
||
</body>
|
||
|
||
</html> |