您發布的代碼僅gl.drawXXX在 main 中調用一次，因此它永遠不會再繪制任何內容。
你已經設置好了，所以當按下鼠標時click將被調用但從click不調用gl.drawXXX
此外，每次click調用時，您都會使用一組新的點創建一個新緩沖區。這不是使用 WebGL 的正常方式。通常的方法是設置你的點一次（每個你想畫的東西一次），然后使用矩陣來改變位置、方向、比例。
我建議你閱讀一些關于 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 = canvas.getContext('webgl');
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) };
}
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;
}
// 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, m);
}
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;
}
main();
//----
function initShaders(gl, vSrc, fSrc) {
const program = twgl.createProgram(gl, [vSrc, fSrc]);
gl.program = program; // THIS IS EXTREMELY BAD AND WRONG CODE!!!
gl.useProgram(program); // THIS IS ALSO WRONG!
return program;
}
canvas { border: 1px solid black; }
<canvas id="webgl"></canvas>
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
代碼有很多問題
gl.program不是一回事。無論你從中學到什么書或教程，都是一件可怕的、糟糕的和錯誤的事情。WebGL 程序通常有多個著色器程序，因此一個函數initShaders需要返回創建的程序，以便您可以使用不同的頂點著色器源和片段著色器源多次調用它來制作多個程序。它不應該將一個創建的程序破解到它不屬于的 webgl 上下文。
注意：即使我實現了initShaders因為你沒有提供它從你的代碼中可以清楚地看出它在做什么gl.program = gl.createProgram。那是無意義的代碼。有多個程序是很常見的。
通話gl.useProgram中initShaders也可以說是錯誤的。（再次清楚，因為它沒有在您的代碼中的任何地方調用您的版本initShaders正在這樣做。同樣，這沒有意義，因為在普通的 WebGL 頁面中，您有多個著色器，因此您需要gl.useProgram多次調用。
您正在閱讀的教程看起來很舊，因為它為 GLSL 連接字符串。制作 GLSL 的最簡單方法是使用多行模板文字
var VSHADER_SOURCE = `
attribute vec4 a_Position;
void main() {
gl_Position = a_Position;
}
`;容易多了
它正在調用一些函數getWebGLContext。不需要那樣的東西。只需使用canvas.getContext('webgl')
調用gl.drawArrays有m錯了地方。正確的調用方式gl.drawArrays是gl.drawArrays(primitiveType, offset, vertexCount)。偏移量幾乎是 0。沒有第四個參數。
請考慮閱讀一些更好的教程，例如上面鏈接的教程。
