mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-11-03 16:54:16 +00:00
87 lines
2.4 KiB
HTML
87 lines
2.4 KiB
HTML
<!--********************************************************************
|
|
* by jiawanlong
|
|
*********************************************************************-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
#canvas{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<canvas id="canvas" ></canvas>
|
|
|
|
<script type="text/javascript">
|
|
|
|
const ctx = document.getElementById('canvas')
|
|
const gl = ctx.getContext('webgl')
|
|
|
|
// 创建着色器源码
|
|
const VERTEX_SHADER_SOURCE = `
|
|
// 只传递顶点数据
|
|
attribute vec4 aPosition;
|
|
void main() {
|
|
gl_Position = aPosition; // vec4(0.0,0.0,0.0,1.0)
|
|
gl_PointSize = 30.0;
|
|
}
|
|
`; // 顶点着色器
|
|
|
|
const FRAGMENT_SHADER_SOURCE = `
|
|
void main() {
|
|
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
|
|
}
|
|
`; // 片元着色器
|
|
|
|
const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
|
|
|
|
const aPosition = gl.getAttribLocation(program, 'aPosition');
|
|
|
|
let x = 0;
|
|
setInterval(() => {
|
|
x += 0.1;
|
|
if (x > 1.0) {
|
|
x = 0;
|
|
}
|
|
// 只改变x值
|
|
gl.vertexAttrib1f(aPosition, x)
|
|
|
|
gl.drawArrays(gl.POINTS, 0, 1);
|
|
}, 200)
|
|
|
|
function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
|
|
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
|
|
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
|
|
|
|
gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE) // 指定顶点着色器的源码
|
|
gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE) // 指定片元着色器的源码
|
|
// 编译着色器
|
|
gl.compileShader(vertexShader)
|
|
gl.compileShader(fragmentShader)
|
|
// 创建一个程序对象
|
|
const program = gl.createProgram();
|
|
gl.attachShader(program, vertexShader)
|
|
gl.attachShader(program, fragmentShader)
|
|
gl.linkProgram(program)
|
|
gl.useProgram(program)
|
|
return program;
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |