Javascript 在webgl中绘制树时遇到的问题

这次又出现了更多的错误，除了这次是在webgl方面，而不是在mathy算法方面

我之前的文章只是关于绘制一个简单的2d递归树。我现在要做的是在鼠标点击的位置画一棵树，如果左键点击，则画一条红线，如果右键点击，则画一条蓝线。我修复了我以前的问题，并且能够让树显示在我以前构建的程序中。然而，现在当我点击画布时，一棵树甚至没有出现。然而，当我记录存储点的阵列时，所有的点似乎都在那里。我想我遗漏了一些东西，但我对webgl的了解还不够，不知道这可能是什么

我已经制作了一个工作程序，可以根据鼠标点击的位置绘制不同颜色的点，但是我仍然没有足够的经验来理解我在这个程序中有什么可以让它工作，以及为什么这个程序不能显示任何东西

我目前的计划：

// Vertex shader program
var VSHADER_SOURCE =
    'attribute vec4 a_Position;\n' +
    'void main() {\n' +
    '  gl_Position = a_Position;\n' +
    '}\n';

// Fragment shader program
var FSHADER_SOURCE =
    'precision mediump float;\n' +
    'uniform vec4 u_FragColor;\n' +
    'void main() {\n' +
    '  gl_FragColor = u_FragColor;\n' +
    '}\n';

var m = 0;

function main() {
    var canvas = document.getElementById('webgl');
    // Get the rendering context for WebGL
    var uniform1i = 0;

    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    // Initialize shaders
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
    }

    // // Get the storage location of a_Position
    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    if (a_Position < 0) {
        console.log('Failed to get the storage location of a_Position');
        return;
    }

    // Get the storage location of u_FragColor
    var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
    if (!u_FragColor) {
        console.log('Failed to get the storage location of u_FragColor');
        return;
    }

    // Register function (event handler) to be called on a mouse press
    canvas.onmousedown = function (ev) { click(ev, gl, canvas, a_Position, u_FragColor) };

    // Specify the color for clearing <canvas>
    gl.clearColor(1.0, 1.0, 1.0, 1.0);

    // Clear <canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.LINES, 0, 1, m);
}


function click(ev, gl, canvas, a_Position, u_FragColor) {
    var x = ev.clientX; // x coordinate of a mouse pointer
    var y = ev.clientY; // y coordinate of a mouse pointer
    var rect = ev.target.getBoundingClientRect();

    x = ((x - rect.left) - canvas.width / 2) / (canvas.width / 2);
    y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2);


    if (ev.button == 0) {
        var depth = 4;
        gl.uniform4f(u_FragColor, 1.0, 0, 0, 1.0);// Red
        //red tree, 4 steps, length 50, halved each step

        // Write the positions of vertices to a vertex shader
        var n = initVertexBuffers(gl, x, y);
        if (n < 0) {
            console.log('Failed to set the positions of the vertices');
            return;
        }
        m = n;

    }
    if (ev.button == 2) {
        var depth = 6;
        //blue tree, 6 steps, length 40, halved each step
        gl.uniform4f(u_FragColor, 0, 0, 1.0, 1.0);// Blue
        // Write the positions of vertices to a vertex shader
        var n = initVertexBuffers(gl, x, y);
        if (n < 0) {
            console.log('Failed to set the positions of the vertices');
            return;
        }
        m = n;
    }
}


function initVertexBuffers(gl, x, y) {
    let start = [];
    let points = createPoints(x, y, 0.4, 4, Math.PI / 2, start);
    console.log(points);
    var vertices = new Float32Array(points);
    let n = points.length / 2; // The number of vertices
    // Create a buffer object
    var vertexBuffer = gl.createBuffer();
    if (!vertexBuffer) {
        console.log('Failed to create the buffer object');
        return -1;
    }

    // Bind the buffer object to target
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    // Write date into the buffer object
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    if (a_Position < 0) {
        console.log('Failed to get the storage location of a_Position');
        return -1;
    }
    // Assign the buffer object to a_Position variable
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

    // Enable the assignment to a_Position variable
    gl.enableVertexAttribArray(a_Position);

    return n;
}

//var points = [x, y];
//var angle = 0;
//var prevPoints = [];
//var prevPointIndex = 0;
function createPoints(x, y, length, depth, angle, points) {
    if (depth > 0) {
        //draws line
        let x2 = x + length * Math.cos(angle);
        let y2 = y + length * Math.sin(angle);
        points.push(x, y, x2, y2);

        //draw left branch;
        createPoints(x2, y2, length / 2, depth - 1, angle + Math.PI / 4, points);

        //goes back
        //points.push(x2, y2);

        //draw right branch
        createPoints(x2, y2, length / 2, depth - 1, angle - Math.PI / 4, points);

        //goes back
        //points.push(x2, y2);
        //console.log(points);
        return points;
    }
    return;
}

//顶点着色器程序
var-VSHADER_源=
'属性向量4 a_位置\不+
'void main（）{\n'+
'gl\U位置=a\U位置；\n'+
'}\n'；
//片段着色器程序
var FSHADER_源=
'精密中泵浮动\不+
“均匀vec4 u_FragColor\不+
'void main（）{\n'+
'gl_FragColor=u_FragColor；\n'+
'}\n'；
var m=0；
函数main（）{
var canvas=document.getElementById（'webgl'）；
//获取WebGL的渲染上下文
var uniform1i=0；
var gl=getWebGLContext（画布）；
如果（！gl）{
log（'未能获取WebGL的呈现上下文'）；
返回；
}
//初始化着色器
if（！initShaders（gl、VSHADER_源、FSHADER_源））{
log（'初始化着色器失败'）；
返回；
}
////获取\u位置的存储位置
var a_Position=gl.getAttribLocation（gl.program，“a_Position”）；
如果（a_位置<0）{
console.log（'未能获取_位置的存储位置'）；
返回；
}
//获取u_FragColor的存储位置
var u_FragColor=gl.getUniformLocation（gl.program，“u_FragColor”）；
如果（！u_FragColor）{
console.log（'无法获取u_FragColor的存储位置'）；
返回；
}
//鼠标按下时要调用的注册函数（事件处理程序）
canvas.onmousedown=函数（ev）{单击（ev，gl，canvas，a_位置，u_FragColor）}；
//指定要清除的颜色
gl.clearColor（1.0,1.0,1.0,1.0）；
//清楚的
总账清除（总账颜色缓冲位）；
总图绘制阵列（总图线，0,1,m）；
}
功能点击（ev、gl、画布、a_位置、u_FragColor）{
var x=ev.clientX；//鼠标指针的x坐标
var y=ev.clientY；//鼠标指针的y坐标
var rect=ev.target.getBoundingClientRect（）；
x=（（x-rect.left）-canvas.width/2）/（canvas.width/2）；
y=（canvas.height/2-（y-rect.top））/（canvas.height/2）；
如果（电动按钮==0）{
var深度=4；
gl.uniform4f（u_FragColor，1.0,0,0,1.0）；//红色
//红树，4级，长50，每级减半
//将顶点的位置写入顶点着色器
var n=initVertexBuffers（gl，x，y）；
if（n<0）{
console.log（'未能设置顶点的位置'）；
返回；
}
m=n；
}
如果（电动按钮==2）{
var深度=6；
//蓝树，6级，长40，每级减半
gl.uniform4f（u_FragColor，0,0,1.0,1.0）；//蓝色
//将顶点的位置写入顶点着色器
var n=initVertexBuffers（gl，x，y）；
if（n<0）{
console.log（'未能设置顶点的位置'）；
返回；
}
m=n；
}
}
函数initVertexBuffers（gl、x、y）{
让我们开始=[]；
设点=创建点（x，y，0.4，4，Math.PI/2，开始）；
控制台日志（点）；
var顶点=新数组（点）；
设n=points.length/2；//顶点数
//创建缓冲区对象
var vertexBuffer=gl.createBuffer（）；
如果（！vertexBuffer）{
log（'未能创建缓冲区对象'）；
返回-1；
}
//将缓冲区对象绑定到目标
gl.bindBuffer（gl.ARRAY\u BUFFER，vertexBuffer）；
//将日期写入缓冲区对象
gl.bufferData（gl.ARRAY\u BUFFER，顶点，gl.STATIC\u DRAW）；
var a_Position=gl.getAttribLocation（gl.program，“a_Position”）；
如果（a_位置<0）{
console.log（'未能获取_位置的存储位置'）；
返回-1；
}
//将缓冲区对象指定给_位置变量
gl.VertexAttribute指针（a_位置，2，gl.FLOAT，false，0，0）；
//启用对位置变量的赋值
gl.EnableVertexAttributeArray（a_位置）；
返回n；
}
//变量点=[x，y]；
//var角=0；
//var prevPoints=[]；
//var prevPointIndex=0；
函数createPoints（x、y、长度、深度、角度、点）{
如果（深度>0）{
//划线
设x2=x+长度*数学cos（角度）；
设y2=y+length*Math.sin（角度）；
点推（x，y，x2，y2）；
//画左支；
创建点（x2，y2，长度/2，深度-1，角度+Math.PI/4，点）；
//追溯
//点推（x2，y2）；
//画右枝
创建点（x2，y2，长度/2，深度-1，角度-Math.PI/4，点）；
//追溯
//点推（x2，y2）；
//控制台日志（点）；
返回点；
}
返回；
}

---

我打赌我在主函数或单击函数中遗漏了一些内容，但我发布了所有内容，因为我不是100%确定。

您发布的代码只在主函数中调用了

gl.drawXXX

，因此它不会再绘制任何内容

您已经设置好了，因此当按下鼠标时会调用

单击

，但

单击