webgl画点

作者: antlove | 来源:发表于2019-03-10 11:29 被阅读0次

webgl画点
webgl 8.画一个正方形
WebGL漫游之旅（一）
threejs Light
threejs Light
WebGL
webgl
JavaScript第十五章节使用Canvas绘图（W
WebGL简易教程地理地形绘制
WebGL学习笔记（一）

index.html

<!DOCTYPE html>
<html>

<head>
    <meta lang="en">
    <meta charset="UTF-8">
    <title>WebGL</title>
    <style>
        body{
            margin:0;
        }
        canvas{
            border:1px solid #999;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>

<script type="text/javascript" src="index.js"></script>

</html>

index.js

// 顶点着色器程序
var VSHADER_SOURCE =`
    void main() {
        //设置坐标
        gl_Position = vec4(0, 0.0, 0.0, 1.0); 
        //设置尺寸
        gl_PointSize = 10.0; 
    } 
`;

// 片元着色器
var FSHADER_SOURCE =`
    void main() {
        //设置颜色
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;


// 获取canvas元素
var canvas = document.getElementById('canvas');

// 获取绘制二维上下文
var gl = canvas.getContext('webgl');

if (!gl) {
    console.log("Failed");
}

/* 编译着色器 */
var vertShader = gl.createShader(gl.VERTEX_SHADER); // 创建Shader对象 
gl.shaderSource(vertShader, VSHADER_SOURCE); // 将写好的着色器附加到Shader上
gl.compileShader(vertShader); // 编译程序

var fragShader = gl.createShader(gl.FRAGMENT_SHADER); // 创建Shader对象 
gl.shaderSource(fragShader, FSHADER_SOURCE); // 将写好的着色器附加到Shader上
gl.compileShader(fragShader); // 编译程序

/* 合并程序 */
var shaderProgram = gl.createProgram(); // 创建一个程序对象
gl.attachShader(shaderProgram, vertShader); // 附加着色器
gl.attachShader(shaderProgram, fragShader); // 附加着色器
gl.linkProgram(shaderProgram); // 链接着色器
gl.useProgram(shaderProgram); // 使用程序

/* 绘制一个点 */
gl.drawArrays(gl.POINTS, 0, 1);