【C++的入门指南】（一）C++的简介与快速入门

• 作者：@Shark-Pem
• 本文章由作者原创编写，转载请注明出处。

 

---

前言

关于本系列文章，17年的时候曾准备一段时间的《C++笔记》，个人感觉达不到复习的效果，加上最近也看了Markdown编辑器，随即决定全部重新开始写，并且命名为《C++快速入门指南》。希望可以指导刚入Cpp坑的新朋友！

首先，本教程主要参考书籍有

• 《Essential C++》
• 《C++ Primer》
• 《C++全方位学习》

《C++全方位学习》也叫《零起点学通C++》是国内一名作者（范磊老师）写的基础C++书籍，如果是真的零基础，连C语言都未曾学习过，建议可以看看这本。

下面就正式进入到我们的学习之路。

一、什么是C++

留坑

代码测试HTML渲染效果

//假如有注释的话
var VSHADER_SOURCE =
    'attribute vec4 a_Position;\n' +
    'attribute float a_PointSize;\n' +
    'void main() {\n' +
    'gl_Position = a_Position;\n' +//float表示浮点，vec4表示由3个浮点数组成的向量，分别代表X、Y、Z轴，第四个分量是齐次坐标，这个知乎有介绍，很关键！通常为1，为0时为无穷大。
    'gl_PointSize=a_PointSize;\n' +
    '}\n'

//片元着色器
var FSHADER_SOURCE =
    'void main() {\n' +
    'gl_FragColor=vec4(1.0,0.0,0.0,1.0);\n'//RGBA值
    + '}\n';

function main() {
    //获取<canvas>元素
    var canvas = document.getElementById('webgl');

    //获取WebGL上下文
    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.log('Failed WebGL');
        return;
    }

    //初始化着色器
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed shaders.');
        return;
    }

    //设置顶点位置（这一节的关键点）
    var n=initVertexBuffers(gl);
    if(n<0){
        console.log('Failed positiong of the vertices');
        return;
    }

    //获取attribute变量
    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
    if (a_Position < 0) {
        console.log('Failed a_Position');
    }
    // //对于顶点着色器，通过attribute变量传入
     gl.vertexAttrib3f(a_Position, 0.5, 0.0, 0.0);
     gl.vertexAttrib1f(a_PointSize, 5.0);


    //设置背景色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //清空<canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);

    //绘制三个点
    gl.drawArrays(gl.POINTS,0,n);
}

function initVertexBuffers(gl){
    var vertices =new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5]);
    var n=3;//点的个数

    //创建缓冲区对象
    var vertexBuffer=gl.createBuffer();
    if(!vertexBuffer){
        console.log('Failed buffer');
        return -1;
    }

    //把缓冲区对象绑定到目标上
    gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);

    //向缓冲区对象写入数据
    gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);

    var a_Position=gl.getAttribLocation(gl.program,'a_Position');
    var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
    if (a_Position < 0) {
        console.log('Failed a_Position');
    }

    //将缓冲区对象分配给a_Position变量
    gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);

    //链接a_Position变量与分配给它的缓冲区对象
    gl.enableVertexAttribArray(a_Position);

    return n;
}