1. 準(zhǔn)備一個HTML文件：創(chuàng)建一個新的HTML文件，將 HTML 文件命名為 `index.html`，并添加一個用于顯示圖形的<canvas>元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple WebGL Rendering</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>2. 創(chuàng)建JavaScript文件：創(chuàng)建一個名為`script.js`的 JavaScript 文件來處理圖形的渲染邏輯。
// 獲取canvas元素
const canvas = document.getElementById("canvas");
// 創(chuàng)建WebGL上下文
const gl = canvas.getContext("webgl");
// 定義頂點(diǎn)著色器代碼
const vertexShaderSource = `
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}
`;
// 創(chuàng)建頂點(diǎn)著色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// 檢查頂點(diǎn)著色器是否編譯成功
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
console.error("Vertex shader compilation error:", gl.getShaderInfoLog(vertexShader));
}
// 定義片段著色器代碼
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// 創(chuàng)建片段著色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// 檢查片段著色器是否編譯成功
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
console.error("Fragment shader compilation error:", gl.getShaderInfoLog(fragmentShader));
}
// 創(chuàng)建著色器程序
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
// 使用著色器程序
gl.useProgram(shaderProgram);
// 渲染圖形
const vertices = [-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
];
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(shaderProgram, "position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);運(yùn)行成功頁面
一個簡單的glsl小實(shí)驗(yàn)成功了，不過我想要這個三角形動起來。
修改后的script代碼如下
// 獲取畫布元素和 WebGL 上下文
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
// 頂點(diǎn)著色器代碼
const vertexShaderSource = `
attribute vec2 a_position;
uniform vec2 u_translation;
void main() {
gl_Position = vec4(a_position + u_translation, 0, 1);
}
`;
// 片段著色器代碼
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0, 1);
}
`;
// 創(chuàng)建著色器程序
var program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
// 獲取頂點(diǎn)位置 attribute 的位置
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
// 創(chuàng)建并綁定頂點(diǎn)緩沖區(qū)
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// 定義一個簡單的三角形頂點(diǎn)位置數(shù)組
var positions = [
0, 0,
-0.5, -0.5,
0.5, -0.5
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
// 設(shè)置頂點(diǎn)屬性指針
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// 清空畫布
gl.clearColor(0, 0, 0, 1);
// 設(shè)置著色器程序
gl.useProgram(program);
// 獲取著色器程序中 uniform 變量的位置
var translationUniformLocation = gl.getUniformLocation(program, "u_translation");
// 更新平移向量
function updateTranslation() {
var time = new Date().getTime() * 0.001; // 獲取時間并轉(zhuǎn)換為秒
var translation = [
Math.sin(time), // x 軸上的移動，使用正弦函數(shù)模擬
Math.cos(time) // y 軸上的移動，使用余弦函數(shù)模擬
];
gl.uniform2fv(translationUniformLocation, translation);
}
// 動畫循環(huán)
function animate() {
// 清空畫布
gl.clear(gl.COLOR_BUFFER_BIT);
// 繪制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);
// 更新平移向量
updateTranslation();
// 請求下一次動畫循環(huán)
requestAnimationFrame(animate);
}
// 開始動畫循環(huán)
animate();
// 創(chuàng)建著色器程序的函數(shù)
function createProgram(gl, vertexShaderSource, fragmentShaderSource) {
// 創(chuàng)建頂點(diǎn)著色器和片段著色器
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
// 創(chuàng)建著色器程序
var program = gl.createProgram();
// 附加著色器到著色器程序
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// 鏈接著色器程序
gl.linkProgram(program);
// 檢查鏈接狀態(tài)
var success = gl.getProgramParameter(program, gl.LINK_STATUS);
if (success) {
return program;
}
// 鏈接錯誤，打印錯誤信息
console.log(gl.getProgramInfoLog(program));
gl.deleteProgram(program);
}
// 創(chuàng)建著色器的函數(shù)
function createShader(gl, type, source) {
// 創(chuàng)建著色器
var shader = gl.createShader(type);
// 附加著色器源代碼到著色器
gl.shaderSource(shader, source);
// 編譯著色器
gl.compileShader(shader);
// 檢查編譯狀態(tài)
var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (success) {
return shader;
}
// 編譯錯誤，打印錯誤信息
console.log(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
}運(yùn)行成功截圖
文章來源：http://www.zghlxwxcb.cn/news/detail-802027.html
他現(xiàn)在就是一個游來游去的紅色三角形了。太神奇了！~文章來源地址http://www.zghlxwxcb.cn/news/detail-802027.html
到了這里，關(guān)于跟隨chatgpt學(xué)習(xí)如何使用GLSL進(jìn)行簡單的圖形渲染的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
