mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-04 15:17:36 +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> |