WebGL绘制圆形的点

目录

前言

如何实现圆形的点?

片元着色器内置变量(gl_FragCoord、gl_PointCoord)

gl_PointCoord的含义 

示例程序(RoundedPoint.js) 

代码详解 


前言

本文将讨论示例程序RoundedPoint,该程序绘制了圆形的点,如下图所示。

如何实现圆形的点?

为了绘制一个圆点,我们需要将原先的方点“削”成圆形的。之前说过,顶点着色器和片元着色器之间发生了光栅化过程,一个顶点被光栅化为了多个片元,每一个片元都会经过片元着色器的处理。如果直接进行绘制,画出的就是方形的点;而如果在片元着色器中稍作改动,只绘制圆圈以内的片元,这样就可以绘制出圆形的点了,如下图所示。 

为了将矩形削成圆形,需要知道每个片元在光栅化过程中的坐标。之前的程序在片元着色器中通过内置变量gl_FragCoord来访问片元的坐标。实际上,片元着色器还提供了另一个内置变量gl_PointCoord,如下表所示。这个变量可以帮助我们绘制圆形的点。 

片元着色器内置变量(gl_FragCoord、gl_PointCoord)

gl_PointCoord的含义 

gl_PointCoord变量表示当前片元在所属的点内的坐标,坐标值的区间是从0.0到1.0,如下图所示。为了将矩形削成圆形,需要将与点的中心(0.5,0.5)距离超过0.5,也就是将圆圈外的的片元剔除掉。在片元着色器中,我们可以使用discard语句来放弃当前片元。 

 

示例程序(RoundedPoint.js) 

如下显示了示例程序的代码,该程序以MultiPoint.js为基础修改了片元着色器,将原先的方点绘制成圆点。顶点着色器虽然没有改动,但仍然列出来以供参考。

var VSHADER_SOURCE ='attribute vec4 a_Position;\n' +'void main() {\n' +'  gl_Position = a_Position;\n' +'  gl_PointSize = 10.0;\n' +'}\n';
var FSHADER_SOURCE ='precision mediump float;\n' +'void main() {\n' +  '  float d = distance(gl_PointCoord, vec2(0.5, 0.5));\n' +'  if(d < 0.5) {\n' +  '    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +'  } else { discard; }\n' +'}\n';function main() {var canvas = document.getElementById('webgl');var gl = getWebGLContext(canvas);if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) returnvar n = initVertexBuffers(gl);gl.clearColor(0, 1, 0, 1);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.POINTS, 0, n);
}function initVertexBuffers(gl) {var vertices = new Float32Array([0, 0.5,   -0.5, -0.5,   0.5, -0.5]);var n = 3; // The number of verticesvar vertexBuffer = gl.createBuffer();  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);var a_Position = gl.getAttribLocation(gl.program, 'a_Position');gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);return n;
}

代码详解 

绘制圆点的逻辑发生在片元着色器中,它根据当前片元和点的中心的距离来决定是否舍弃当前片元。gl_PointCoord变量保存了片元在点内的坐标,而点的中心坐标是(0.5,0.5),所以片元着色器:

1. 计算片元距离所属点的中心的距离。

2. 如果距离小于0.5,则绘制该片元,否则舍弃它。

RoundedPoint.js中,实际上只需要计算gl_PointCoord与(0.5,0.5)的距离,前者是vec2变量,所以我们也令(0.5,0.5)为vec2类型的,并调用内置的distance()函数(第10行)。 

计算出片元与所属点中心的距离后,就判断该距离是否小于0.5,即是否在“圆点”之内。如果片元在圆点之内,就照常为gl_FragColor赋值以绘制该片元(第12行),否则就使用discard语句,WebGL会自动地舍弃该片元,直接处理下一个片元。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/141721.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Tomcat 开启远程调试

Tomcat 部署的 war包工程开启远程调试 Linux服务器下&#xff0c;编辑Tomcat bin 目录下的 startup.sh 文件 vim startup.sh在第一行加入&#xff1a;(不换行&#xff0c;在同一行) declare -x CATALINA_OPTS"-server -Xdebug -Xnoagent -Djava.compilerNONE -Xrunjdwp:…

vue3+eleement plus日历选择季度

<template><div class"el-quarter-wrap"><el-popover width"280" v-model"visible"><template #reference><el-input v-model"quarterDate" placeholder"请选择季度" clearable :prefix-icon&qu…

[old]TeamDev DotNetBrowser Crack

TeamDev DotNetBrowser将 Chromium Web 浏览器添加到您的 .NET 应用程序中。在 WPF 和 WinForms 中显示现代网页。使用 DOM、JS、网络、打印等。在 Windows x86/x64/ARM64、macOS x64/Apple Silicon、Linux x64/ARM64 上运行&#xff0c;支持.NET Framework 4.5 特征 HTML5、C…

手机资讯:华为Mate60 Pro上手体验三天的使用体验

最近华为Mate60 Pro开售的消息引爆了整个数码科技圈&#xff0c;毕竟还没开发布会就直接开售新机&#xff0c;这放在整个手机界都是绝无仅有的&#xff0c;并且华为也官方放出了华为Mate60系列的所有参数配置&#xff0c;但唯独没有公开芯片型号和网络信号类型&#xff0c;不免…

图片分割处理(以玉米颗粒的图片分割为例)

问题&#xff1a; 为完成玉米颗粒分类任务&#xff0c;现需要处理训练图片&#xff0c;将以下图片中的玉米颗粒进行分割&#xff1a; 目标&#xff1a; 操作步骤&#xff08;完整代码附在最后&#xff0c;该部分为解释说明&#xff09; 一、提取通道并进行二值化 # 提取蓝…

利用ChatGPT写申请文书?国外大学对此有何看法?

现在&#xff0c;人工智能的发展确实引起了广泛的关注&#xff0c;尤其是在自然语言处理领域。 Chat GPT&#xff08;Generative Pre-trained Transformer&#xff09;作为一种人工智能驱动的自然语言处理工具&#xff0c;具有令人瞩目的功能。 它可以根据用户提出的需求&…

智慧工地工程项目管理平台源码,塔机安全监控管理系统;吊钩可视化管理系统;升降机监控系统;高支模监控系统;

智慧工地是指运用信息化手段&#xff0c;通过三维设计平台对工程项目进行精确设计和施工模拟&#xff0c;围绕施工过程管理&#xff0c;建立互联协同、智能生产、科学管理的施工项目信息化生态圈&#xff0c;并将此数据在虚拟现实环境下与物联网采集到的工程信息进行数据挖掘分…

Netflix 零配置服务网格与按需集群发现

本文翻译自由 David Vroom, James Mulcahy, Ling Yuan, Rob Gulewich 编写的 Netflix 博客 Zero Configuration Service Mesh with On-Demand Cluster Discovery。 Netflix 相信大家并不陌生&#xff0c;在 Spring Cloud 生态中就有 Netflix 全家桶。多年前&#xff0c;我也曾…

【计算机网络】——数据链路层(应用:介质访问控制)

//仅做个人复习和技术交流&#xff0c;图片取自王道考研&#xff0c;侵删 一、大纲 1、介质访问控制 信道划分介质访问控制 随机访问介质访问控制 2、局域网 3、广域网 4、数据链路层设备 二、介质访问控制 省流&#xff1a;把广播信道通过介质访问控制机制 逻辑上转换为 …

C#里面的三种定时计时器:Timer

在.NET中有三种计时器&#xff1a; 1、System.Windows.Forms命名空间下的Timer控件&#xff0c;它直接继承自Componet。Timer控件只有绑定了Tick事件和设置EnabledTrue后才会自动计时&#xff0c;停止计时可以用Stop()方法控制&#xff0c;通过Stop()停止之后&#xff0c;如果想…

vue点击pdf文件直接在浏览器中预览文件

好久没有更新文章了&#xff0c;说说为什么会有这篇文章呢&#xff0c;其实是应某个热线评论的要求出的&#xff0c;不过由于最近很长一段时间没打开csdn现在才看到&#xff0c;所以才会导致到现在才出。 先来看看封装完这个预览方法的使用&#xff0c;主打一个方便使用&#x…

MySQL - 关于约束类型和作用的介绍

约束的概念&#xff1a;约束是作用于表中字段上的规则&#xff0c;用于限制存储在表中的数据。 约束的作用&#xff1a;用于保证数据库中数据的正确性、完整性和一致性。 约束分类&#xff1a; 约束类型作用关键字非空约束限制该字段的数据不能为nullnot null唯一约束保证该…

网络编程-TCP协议(客户端和服务端)

需要了解UDP协议的&#xff0c;可以看往期文章 https://flypeppa.blog.csdn.net/article/details/133273416 TCP/IP参考模型 代码案例 服务端代码 package com.hidata.devops.paas.udp;import java.io.BufferedReader; import java.io.IOException; import java.io.InputStr…

使用Jaeger进行分布式跟踪:学习如何在服务网格中使用Jaeger来监控和分析请求的跟踪信息

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

硬件基本功--MOS管

一、上下拉电阻Rgs的作用 Rgs&#xff1a;经验值&#xff0c;一般取10K左右。 1. 上电时给MOS管的栅极一个确定的电平&#xff0c;防止上电时GPIO为高阻态时&#xff0c;MOS管的栅极电平不确定&#xff0c;从而受到干扰。 2. 断电时&#xff0c;如果MOS管是导通的状态&#xff…

什么是 Redis?

Redis 是一种基于内存的数据库&#xff0c;对数据的读写操作都是在内存中完成的&#xff0c;因此读写速度非常快&#xff0c;常用于缓存&#xff0c;消息队列&#xff0c;分布式锁等场景。 Redis 提供了多种数据类型来支持不同的业务场景&#xff0c;比如 String(字符串)、Has…

基于springboot+vue的大学生创新创业系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建

目录 一、Mock.js 1.1 mockjs介绍 1.2 mock.js安装与配置 1.2.1 安装mock.js 1.2.2 引入mock.js 1.3 mock.js的使用 1.3.1 准备模拟数据 1.3.2 定义拦截路由 1.3.3 测试 二、首页导航栏左侧菜单搭建 2.1 自定义界面组件 (完整代码) 2.2 配置路由 2.3 组件显示折叠和…

矿山定位系统-矿井人员定位系统在矿山自动化安全监控过程中的应用

一&#xff0c;矿井人员定位系统现阶段使用的必要性 1&#xff0c;煤矿开采是一项非常特殊的工作&#xff0c;现场属于非常复杂多变的环境&#xff0c;井下信号极差&#xff0c;数据传输非常不稳定&#xff0c;人员安全难以保证&#xff0c;煤矿企业一直在研究如何使用更合适的…

Linux学习之HIS部署(4)

ElasticSearch部署 ElasticSearch资源 RabbitMQ资源 ElasticSearch服务部署 #OpenJDK环境部署 [rootServices ~]# yum clean all; yum repolist -v ... Total packages: 8,265 [rootServices ~]# yum -y install java-1.8.0-openjdk-devel.x86_64 #安装OpenJDk ... Compl…