時間：2023-08-29 02:18:01 | 來源：網(wǎng)站運營
時間：2023-08-29 02:18:01 來源：網(wǎng)站運營
OpenGL，WebGL基于HTML5/WebGL的建模及構建3D場景：
在線咨詢
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>繪制三角形</title> <link rel="stylesheet" href="styles/app.css"></head><body> <canvas id="canvas"></canvas> <script> const random = Math.random; /** * 獲取隨機顏色 * @returns { Object } 顏色對象 */ function randomColor () { return { r: random() * 255, g: random() * 255, b: random() * 255, a: random() * 1 } } const canvas = document.querySelector('#canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const gl = canvas.getContext('webgl'); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); // 頂點著色器 const vertexShaderSource = ` // 設置浮點數(shù)據(jù)類型為中級精度 precision mediump float; // 接收頂點坐標 (x,y) attribute vec2 a_Position; void main () { gl_Position = vec4(a_Position, 0.0, 1.0); } `; const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); // 片元著色器 const fragmentShaderSource = ` // 設置浮點數(shù)據(jù)類型為中級精度 precision mediump float; // 接收 JavaScript 傳過來的顏色值（rgba） uniform vec4 u_Color; void main(){ vec4 color = u_Color / vec4(255, 255, 255, 1); gl_FragColor = color; } `; const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader,fragmentShaderSource); gl.compileShader(fragmentShader); // 著色器程序 const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); gl.useProgram(program); // 獲取著色器程序中變量的指針位置 const a_Position = gl.getAttribLocation(program, 'a_Position') const u_Color = gl.getUniformLocation(program, 'u_Color'); // 定義三角形的三個頂點 const positions = [ 0, 0.5, // 上頂點 -0.5, -0.5, // 左頂點 0.5, -0.5 // 右頂點 ]; // 創(chuàng)建緩沖區(qū) const buffer = gl.createBuffer(); // 綁定緩沖區(qū)并指定緩沖區(qū)的類型 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 往緩沖區(qū)中寫入數(shù)據(jù) gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // 將屬性綁定到緩沖區(qū) gl.enableVertexAttribArray(a_Position); // 如何讀取緩沖區(qū)數(shù)據(jù) // 指定要修改的頂點屬性的索引（允許哪個屬性讀取當前緩沖區(qū)的數(shù)據(jù)） - a_Position // 指定每個頂點屬性的組成數(shù)量（一次讀取幾個數(shù)據(jù)） - 2 // 指定數(shù)組中每個元素的數(shù)據(jù)類型 - gl.FLOAT（32 位 IEEE 標準的浮點數(shù)，占用 4 個字節(jié)） // 當轉換為浮點數(shù)時是否應該將整數(shù)數(shù)值歸一化到特定的范圍 - false（對于類型 gl.FLOAT 和 gl.HALF_FLOAT，此參數(shù)無效） // 步長（即：每個頂點所包含數(shù)據(jù)的字節(jié)數(shù)）0 表示一個屬性的數(shù)據(jù)是連續(xù)存放的 // 偏移量（指定頂點屬性數(shù)組中第一部分的字節(jié)偏移量）（在每個步長的數(shù)據(jù)里，目標屬性需要偏移多少字節(jié)開始讀取；必須是類型的字節(jié)長度的倍數(shù)）0 * 4 = 0 gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); // 隨機顏色 const { r, g, b, a } = randomColor(); // 向片元著色器傳遞顏色信息 gl.uniform4f(u_Color, r, g, b, a); // 繪制三角形 // 指定繪制圖元的方式 - gl.TRIANGLES（三角形） // 指定從哪個點開始繪制 - 0 // 指定繪制需要使用到多少個點 - 3 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3); </script></body></html>關鍵詞：場景
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。
