mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-04 23:27:30 +00:00
102 lines
3.1 KiB
HTML
102 lines
3.1 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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设置点并加入顶点缓冲区：使用attribute和uniform传递数据（这里没有用缓冲区、因为只有一个点）
|
|||
|
|
function initBuffer() {
|
|||
|
|
let pointPosition = new Float32Array([100.0, 100.0, 0.0, 1.0]);
|
|||
|
|
let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
|
|||
|
|
webgl.vertexAttrib4fv(aPsotion, pointPosition);
|
|||
|
|
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.POINTS, 0, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body onload="init()">
|
|||
|
|
<canvas id="myCanvas" width="1024" height="768"></canvas>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|