<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="300" height="300"></canvas>
<script>
let canvas = document.querySelector('canvas');
let gl = canvas.getContext('webgl');
//在 GLSL 中,attribute 表示声明变量,vec2 是变量的类型,它表示一个二维向量,position 是变量名。接下来我们将 buffer 的数据绑定给顶点着色器的 position 变量。
//着色器 顶点和图元构成
const vertex = `
attribute vec2 position;
varying vec3 color;
void main() {
gl_PointSize = 1.0;
color = vec3(0.5 + position * 0.5, 0.0);
gl_Position = vec4(position * 0.5, 1.0, 1.0);
}
`;
//片元
const fragment = `
precision mediump float;
varying vec3 color;
void main(){
gl_FragColor = vec4(col
初识webGL
最新推荐文章于 2023-09-20 11:05:57 发布