Less than 1 minute
WebLG 容器
在浏览器使用 canvas 作为 weblg 容器
<canvas id="canvas"> </canvas>
About 1 min
::: vue-playground webgl 绘制一个点
<template >
<canvas
ref="canvasDOM"
:canvas-id="canvasId"
:width="props.width"
:height="props.height"
/>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
// 定义 props
export interface Props {
canvasId?: string,
width?: number,
height?: number
}
const props = withDefaults(defineProps<Props>(), {
width: 150,
height: 150
})
// 定义 canvasId
const canvasId = props.canvasId
// 定义 canvasDOM
const canvasDOM = ref<HTMLCanvasElement>()
// 定义 canvas 上下文对象
let ctx:WebGLRenderingContext | null = null
onMounted(() => {
// 获取 canvas 上下文对象
ctx = canvasDOM.value?.getContext("webgl") as WebGLRenderingContext;
// 定义顶点着色器 GLSL
const vertexShaderSource = `
void main (){
gl_PointSize=20.0;
gl_Position=vec4(0.0,0.0,0.0,1.0);
}
`
// 定义片源着色器 GLSL
const framgmentShaderSource = `
void main (){
gl_FragColor=vec4(1.0,0.0,0.0,1.0);
}
`
// 调用初始化着色器函数
const program = initShaber(ctx, vertexShaderSource, framgmentShaderSource)
// 渲染到canvas中
ctx.drawArrays(ctx.POINTS,0,1)
})
// 声明初始化着色器函数
function initShaber(gl: WebGLRenderingContext, vertexShaderSource: string, framgmentShaderSource: string ){
// 创建顶点着色器
let vertexShader = gl.createShader(gl.VERTEX_SHADER) as WebGLShader
// 创建片着色器
let framgmentShader = gl.createShader(gl.FRAGMENT_SHADER) as WebGLShader
// 引入着色器源
gl.shaderSource(vertexShader,vertexShaderSource)
gl.shaderSource(framgmentShader,framgmentShaderSource)
// 编译着色器
gl.compileShader(vertexShader)
gl.compileShader(framgmentShader)
// 创建程序对象
const program = gl.createProgram() as WebGLProgram
// 附着着色器到program
gl.attachShader(program, vertexShader)
gl.attachShader(program, framgmentShader)
// 链接program
gl.linkProgram(program)
// 链接program
gl.useProgram(program)
return program
}
</script>
{
"imports": {
"@vueuse/core": "https://unpkg.com/@vueuse/core/index.mjs",
"@vueuse/shared": "https://unpkg.com/@vueuse/shared/index.mjs",
"vue-demi": "https://unpkg.com/vue-demi/lib/index.mjs"
}
}
{
"showCompileOutput": true
}
:::
::: vue-playground webgl 绘制一个矩形
About 2 min