webgl最短距离
1、刷底色的基本步骤
1、在html中建立canvas画布
<canvas id="canvas"></canvas>
2、在js中获取canvas画布
const canvas = document.querySelector("#canvas");
3、使用canvas获取webgl绘图上下文
const gl = canvas.getContext("webgl")
4、指定将要用来清空绘图区的颜色
gl.clearColor(0,0,0,1);
5、使用之前指定的颜色，清空绘图区
gl.clear(gl.COLOR_BUFFER_BIT);
<style>
body{
margin:0;
overflow:hidden;
}
#canvas{
background-color:antiquewhite;
}
</style>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.querySelector("#canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//canvas里面二维画笔
//const gl = canvas.getContext("2d");
//canvas里面三维画笔
const gl = canvas.getContext("webgl");
//声明颜色rgba
gl.clearColor(0,0,0,1);
//刷底色
gl.clear(gl.COLOR_BUFFER_BIT);
</script>
</body>
css颜色转webgl颜色
将rgba颜色解析成webgl能认识的颜色
<style>
body{
margin:0;
overflow:hidden;
}
#canvas{
background-color:antiquewhite;
}
</style>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.querySelector("#canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//canvas里面二维画笔
//const gl = canvas.getContext("2d");
//canvas里面三维画笔
const gl = canvas.getContext("webgl");
//声明颜色rgba
gl.clearColor(0,0,0,1);
//刷底色
gl.clear(gl.COLOR_BUFFER_BIT);
//css颜色
const rgbaCss = 'rgba(255,0,0,1)'
//正则
const reg = RegExp(/\((.*)\)/)[1]
//捕捉数据
const regbaStr = reg.exec(rgbaCss)
//加工数据
const rgba = rgbaStr.split(',').map(n=>parseInt(n))
const r = rgba[0]/255
const g = rgba[1]/255
const b = rgba[2]/255
const a = rgba[3]
//声明颜色rgba
gl.clearColor(r,g,b,a);
//刷底色
gl.clear(gl.COLOR_BUFFER_BIT);
</script>
</body>
画布
1、引入color对象
import { Color } from "https://unpkg.com/three/build/three.module.js"
2、实例化Color对象
const color = new Color(1,0,0)
3、建立色相偏移动画
!(function ani(){
color.offsetHSL(0.005,0,0)
gl.clearColor(color.r,color.g,color.b,color.a)
gl.clear(gl.COLOR_BUFFER_BIT)
requestAnimationFrame(ani)
})()
<style>
body{
margin:0;
overflow:hidden;
}
#canvas{
background-color:antiquewhite;
}
</style>
<body>
<canvas id="canvas"></canvas>
<script type="module">
import { Color } from "https://unpkg.com/three/build/three.module.js
const canvas = document.querySelector("#canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//canvas里面二维画笔
//const gl = canvas.getContext("2d");
//canvas里面三维画笔
const gl = canvas.getContext("webgl");
//声明颜色rgba
gl.clearColor(0,0,0,1);
//刷底色
gl.clear(gl.COLOR_BUFFER_BIT);
//建立canvas对象
const color = new Color('rgba(255,0,0,1)')
//声明颜色rgba
gl.clearColor(color.r,color.g,color.b,1);
//刷底色
gl.clear(gl.COLOR_BUFFER_BIT);
!(function ani(){
//颜色偏移 色相 饱和度 亮度
color.offsetHSL(0.005,0,0)
gl.clearColor(color.r,color.g,color.b,color.a)
gl.clear(gl.COLOR_BUFFER_BIT)
requestAnimationFrame(ani)
})()
</script>
</body>
webgl坐标系
webgl坐标系的坐标原点在画布中心
webgl绘图原理
浏览器三大线程
webgl的绘图步骤
1、在html中建立canvas画布
<canvas id="canvas"></canvas>
2、在js中获取画布
const canvas = document.getElementById('canvas')
3、使用canvas获取webgl绘图上下文
const gl = canvas.getContext('webgl')
4、在script中建立顶点着色器和片元着色器 glsl es
<script id="vertexShade" type="x-shader/x-vertex">
void main(){
gl_Position = vec4(0.0,0.0,0.0,1.0);
gl_PointSize = 100.0;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
void main(){
gl_FragColor = vec4(1.0,1.0,0.0,1.0)
}
</script>
5、在js中获取顶点着色器和片元着色器
const vsSource = document.getElementById("vertexShade").innerText;
const fsSource = document.getElementById("fragmentShader").innerText;
6、初始化着色器
initShaders(gl,vsSource,fsSource) //TODO
7、指定将要用来清空绘图区的颜色
gl.clearColor(0,0,0,1)
8、使用之前指定的颜色，清空绘图区
gl.clear(gl.COLOR_BUFFER_BIT)
9、绘制顶点
gl.drawArrays(gl.POINTS,0,1)
<style>
body{
margin:0;
overflow:hidden;
}
#canvas{
background-color:antiquewhite;
}
</style>
<body>
<canvas id="canvas"></canvas>
<script id="vertexShade" type="x-shader/x-vertex">
void main(){
//点位
gl_Position = vec4(0.0,0.0,0.0,1.0);//4维向量
//尺寸
gl_PointSize = 100.0;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
void main(){
gl_FragColor = vec4(1.0,1.0,0.0,1.0);
}
</script>
<script>
const canvas = document.querySelector("#canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//获取着色器文本
const vsSource = document.getElementById("vertexShade").innerText;
//获取片元着色器
const fsSource = document.getElementById("fragmentShader").innerText;
//canvas里面三维画笔
const gl = canvas.getContext("webgl");
//初始化着色器
//功能：解析着色器文本，整合到程序对象，关联webgl上下文对象实现两种语言的相互通信
initShaders(gl,vsSource,fsSource)
//声明颜色rgba
gl.clearColor(0,0,0,1);
//刷底色
gl.clear(gl.COLOR_BUFFER_BIT);
//绘制顶点
gl.drawArrays(gl.POINTS,0,1)
</script>
</body>
