mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-05 07:37:31 +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>
|