WebGL 绘制圆点

这篇具有很好参考价值的文章主要介绍了WebGL 绘制圆点。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

这篇文章不说WebGL相关概念了,初学者先到网上看看WebGL相关概念。这里着重写一下在vue3前端框架下,如何通过webGL绘制圆点。

着色器代码(画点)

画点相关的着色器代码有顶点着色器和片元着色器,代码如下:

顶点着色器:

const vertexShaderSrc = `
    void main() {
     gl_Position = vec4(0, 0, 0, 1.0);
     gl_PointSize = 20.0;
    }
`;

片元着色器:

const fragmentShaderSrc = `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

初始化着色器

在网上找的一个通用的初始化着色器代码,如下所示:



function loadShader(gl, type, source) {
  //根据着色类型,建立着色器对象
  const shader = gl.createShader(type);
  //将着色器源文件传入着色器对象中
  gl.shaderSource(shader, source);
  //编译着色器对象
  gl.compileShader(shader);
  //返回着色器对象
  return shader;
}
export function initShaders(gl, vsSource, fsSource) {
  //创建程序对象
  const program = gl.createProgram();
  //建立着色对象
  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
  //把顶点着色对象装进程序对象中
  gl.attachShader(program, vertexShader);
  //把片元着色对象装进程序对象中
  gl.attachShader(program, fragmentShader);
  //连接webgl上下文对象和程序对象
  gl.linkProgram(program);
  //启动程序对象
  gl.useProgram(program);
  //将程序对象挂到上下文对象上
  gl.program = program;
}

代码中注释蛮详细的。

vue3框架使用webGL画点

这里直接贴上全部代码了,如下所示:

<template>
  <div class="point-wrapper">
    <div style="margin-bottom: 20px">绘制点</div>
    <canvas id="point" width="100" height="100"></canvas>
  </div>
</template>

<script>
export default {
  name: "point",
};
</script>


<script setup>
import { onMounted } from "vue";
import { initShaders } from "@/utils/myGL.js";

const vertexShaderSrc = `
void main() {
 gl_Position = vec4(0, 0, 0, 1.0);
 gl_PointSize = 20.0;
}
`;

const fragmentShaderSrc = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

const fragmentShaderSrcCircle = `
precision mediump float;
void main() {
  float d = distance(gl_PointCoord, vec2(0.5, 0.5));
  if(d < 0.5) {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  } else { 
    discard; 
  }
}
`;

onMounted(() => {
  const canvas = document.getElementById("point");
  // webgl画笔
  const gl = canvas.getContext("webgl");
  // 初始化着色器
  initShaders(gl, vertexShaderSrc, fragmentShaderSrc);
  // 指定将要用来清理绘图区的颜色
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // 清理绘图区
  gl.clear(gl.COLOR_BUFFER_BIT);
  // 绘制顶点
  gl.drawArrays(gl.POINTS, 0, 1);
  setTimeout(() => {
    initShaders(gl, vertexShaderSrc, fragmentShaderSrcCircle);
    // 指定将要用来清理绘图区的颜色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    // 清理绘图区
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 绘制顶点
    gl.drawArrays(gl.POINTS, 0, 1);
  }, 5000);
});
</script>

<style lang="scss" scoped>
.point-wrapper {
  width: 200px;
  height: 200px;
  background-color: gray;
}
</style>

myGL.js中放的是初始化着色器initShaders 接口。

大家可以拷贝代码运行一下,刚开始出现一个正方形点,5秒后变成圆点文章来源地址https://www.toymoban.com/news/detail-670159.html

到了这里,关于WebGL 绘制圆点的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WebGL前言——WebGL相关介绍

    第一讲内容主要介绍WebGL技术和相应的硬件基础部分,在初级课程和中级课程的基础上,将技术和硬件基础进行串联,能够对WebGL从产生到消亡有深刻全面的理解。同时还介绍WebGL大家在初级课程和中级课程中的一些常见错误以及错误调试的办法。 先热身一下吧,看个问题:如

    2023年04月08日
    浏览(46)
  • WebGL系列教程:WebGL基础知识

    下面我们来正式学习WebGL开发中的一些基本的概念和知识。 为了在 Web 上创建图形应用程序,HTML5 提供了一组丰富的功能,例如 2D Canvas、WebGL、SVG、3D CSS 转换和 SMIL。要编写 WebGL 应用程序,就需要用到 HTML5 的画布元素。 HTML5 的标签提供了一个简单而强大的选项来实现 JavaSc

    2024年02月14日
    浏览(47)
  • 【WebGL系列-01】获取WebGL上下文

    WebGL上下文是从 canvas 标签中获取到的,通过 canvas 对象的 getContext() 函数可以获取 WebGLRenderingContext 。 跟据参数的不同, getContext() 函数可以获取不同种类的渲染上下文。 canvas.getContext(contextType: String, contextAttributes ?: Object) contextType : \\\'2d\\\' :建立一个 CanvasRenderingContext2D 二维渲染

    2024年02月16日
    浏览(43)
  • Unity WebGL 关于构建webgl应用模板设置

    如果你想要修改unity 自带的webgl 启动样式,那么你需要在unity Assets 文件夹目录下添加如下目录   WebGLTemplates 目录是 unity 指定名称的目录,你可以在这个目录下新建你自己的模板目录 名字随意,然后在你需要找一下 你unity 的Default模板文件 ,在你unity 安装目录的  EditorDat

    2024年02月12日
    浏览(44)
  • WebGL入门之基于WebGL的3D可视化引擎介绍

    WebGL(Web Graphics Library)是一个JavaScript API,用于在任何兼容的Web浏览器中渲染高性能交互式3D和2D图形,而无需使用插件。WebGL通过引入一个非常符合OpenGL ES 2.0的API来实现这一点,该API可以在HTML 元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。WebGL完全集

    2024年02月11日
    浏览(51)
  • unity webgl 系列(2):从webgl内存中下载文件到本地硬盘

    前面是将文件上传到webgl进程,本篇是将文件从webgl进程中下载文件到浏览器的下载目录中。 通用,只需要 二进制数组和文件名。 添加一段代码 解释:接收三个字符串:由文件二进制转换出来的二进制字符串、xxx.yy文件名、文件类型。 统一经过Pointer_stringify转化为js字符串,

    2024年04月17日
    浏览(38)
  • 快速上手WebGL,代码+图解手把手教你使用WebGL一步步实现热力图

    大家好,我是南木元元,热衷分享有趣实用的文章。 项目中需要绘制热力图,热力图其实就是数值大小用颜色来进行区分,每个点的数值需根据颜色映射表(调色板)映射为指定颜色。需要3个数值字段,可绘制在平行坐标系中(2个数值字段分别确定x、y轴,1个数值字段确定

    2024年01月18日
    浏览(56)
  • unity发布WebGl在手机上的横屏适配,webgl横版游戏在手机上直接转横屏

    unity版本2020.1 问题:webgl的横版游戏 1920*1080,在手机上适配的不好,还是竖屏显示, 使用官方的说明,说是只在全屏模式下能旋转,也不好用,可能直接旋转也不会达到理想的效果 解决方案: 1.我这边使用的方案是UI的适配,UGUI,采用的是两套UI,根据不同平台加载不同的资源

    2024年02月02日
    浏览(47)
  • webgl-图形非矩阵旋转

    知识拓展 由(x1,y1)旋转β角度到(x2,y2) 根据圆极坐标方程 x1 = r*cosα y1 = r*sinα 可得 x2 =r*cos(α + β)= r*cosα*cosβ - r*sinα*sinβ,因为x1 = r*cosα,y1 = r*sinα,所以x2 = x1*cosβ -y1*sinβ y2 = r*sin(α + β) = r*sinα*cosβ + r*cosα*sinβ,因为x1 = r*cosα,y1 = r*sinα,所以y2 = y1* cosβ + x1*sinβ 因此 (

    2024年02月01日
    浏览(40)
  • WebGL基础概念

    WebGL基础概念 WebGL需要提供成对的方法。没对方法中一个叫做顶点着色器,一个叫做片段着色器。再着色器语言中使用给GL着色语言(GLSL) 顶点着色器的作用是计算顶点位置(包括了根据三角形的三个顶点进行三角形内部各种属性的插值计算) 对图元进行光栅化处理时需要使

    2024年02月22日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包