webgl的图形装配与光栅化

2024-02-19 19:30
文章标签 图形 webgl 装配 光栅

本文主要是介绍webgl的图形装配与光栅化,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.webgl的图形装配与光栅化

这里讲述的内如是,《webgl编程指南》里的。
在顶点着色器和片元着色器之间还有两个步骤

  1. 图形装配过程,将孤立的顶点坐标装配成几何图形,几何图形的类别是有 gl.drawArrays()函数的第一个参数决定的。
  2. 光栅化:将装配好的图形转换为图元.
    在这里插入图片描述

gl_Position实际上是几何图形装配阶段输入的数据,几何图形装配过程又称为图元装配过程,因为被装配的基本图形(点,线,面)又称为图元

  1. 执行顶点着色器,缓冲区对象的第一个顶点坐标,被传递给attribute变量a_Position。一旦一个顶点坐标被赋值给gl_Position,它就进入了图形装配区域,并暂时储存在哪里。
  2. 当所有的顶点全部传输装配区,顶点着色器就执行完毕了。
  3. 开始装配图形,使用传入的坐标,根据gl.drawArrays()的第一个参数的信息来确定如何装配
  4. 显示在屏幕上的三角形是有由片元(像素)组成,所以还需要将图元转换为片元。这个过程就是光栅化

在这里插入图片描述
图元经过光栅化之后得到片元,生成的片元都是带有坐标信息的。调用片元着色器时这些坐标信息也随着片元传递进去了。
gl_FragCoord

调用片元着色器

一旦光栅化过程结束之后,程序就开始逐片元调用片元着色器。对每个片元,片元着色器会计算出该片元的颜色,并写入颜色缓冲区。

在这里插入图片描述

这篇关于webgl的图形装配与光栅化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/725712

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

第六章习题11.输出以下图形

🌏个人博客:尹蓝锐的博客 希望文章能够给到初学的你一些启发~ 如果觉得文章对你有帮助的话,点赞 + 关注+ 收藏支持一下笔者吧~ 1、题目要求: 输出以下图形

读Spring实战(第四版)概括—装配Bean

很久很久以前读过Spring实战(第三版),因为第三版和第四部差异还是特别明显的,在整体思想上有了比较重大的改变,比如用注解和JavaConfig替换Xml以及现在非常火热的Springboot在书的最后也有提到。OK,开始看书,书本的第一章讲了一下Spring存在的目的(简化Java开发)和Spring的功能,以及Spring3->Spring4增加了哪些功能,那我就从第二章开始概括本书,以给我

一个图形引擎的画面风格是由那些因素(技术)决定的?

可能很多人第一直覺會認為shader決定了視覺風格,但我認為可以從多個方面去考慮。 1. 幾何模型 一個畫面由多個成分組成,最基本的應該是其結構,在圖形學中通常稱為幾何模型。 一些引擎,如Quake/UE,有比較強的Brush建模功能(或應稱作CSG),製作建築比較方便。而CE則有較強的大型地表、植被、水體等功能,做室外自然環境十分出色。而另一些遊戲類型專用的引擎,例

初步了解VTK装配体

VTK还不太了解,根据资料, vtk.vtkAssembly 是 VTK库中的一个重要类,允许通过将多个vtkActor对象组合在一起来创建复杂的3D模型。 import vtkimport mathfrom vtk.util.colors import *filenames = ["cylinder.stl","sphere.stl","torus.stl"]dt = 1.0renW

【Spring Boot】 SpringBoot自动装配-Condition

目录 一、前言二、 定义2.1 @Conditional2.2 Condition2.2.1 ConditionContext 三、 使用说明3.1 创建项目3.1.1 导入依赖3.1.2 添加配置信息3.1.3 创建User类3.1.4 创建条件实现类3.1.5 修改启动类 3.2 测试3.2.1 当user.enable=false3.2.2 当user.enable=true 3.3

最新版 | 深入剖析SpringBoot3源码——分析自动装配原理(面试常考)

文章目录 一、自动配置概念二、半自动配置(误~🙏🙏)三、源码分析1、验证DispatcherServlet的自动配置2、源码分析入口@SpringBootApplication3、@SpringBootConfiguration的@Configuration4、@EnableAutoConfiguration的@AutoConfigurationPackage和@Import5、Auto

「大数据分析」图形可视化,如何选择大数据可视化图形?

​图形可视化技术,在大数据分析中,是一个非常重要的关键部分。我们前期通过数据获取,数据处理,数据分析,得出结果,这些过程都是比较抽象的。如果是非数据分析专业人员,很难清楚我们这些工作,到底做了些什么事情。即使是专业人员,在不清楚项目,不了解业务规则,不熟悉技术细节的情况下。要搞清楚我们的大数据分析,这一系列过程,也是比较困难的。 我们在数据处理和分析完成后,一般来说,都需要形成结论报告。怎样让大

OpenGL/GLUT实践:流体模拟——数值解法求解Navier-Stokes方程模拟二维流体(电子科技大学信软图形与动画Ⅱ实验)

源码见GitHub:A-UESTCer-s-Code 文章目录 1 实现效果2 实现过程2.1 流体模拟实现2.1.1 网格结构2.1.2 数据结构2.1.3 程序结构1) 更新速度场2) 更新密度值 2.1.4 实现效果 2.2 颜色设置2.2.1 颜色绘制2.2.2 颜色交互2.2.3 实现效果 2.3 障碍设置2.3.1 障碍定义2.3.2 障碍边界条件判定2.3.3 障碍实现2.3.

解决TMP_InputField 在WebGL(抖音)上不能唤起虚拟键盘,不能使用手机内置输入法的问题

整整花费了一天时间测试和解决。试验了多个方法,花了不少美刀,最终才发现抖音这个官方文档,哭了: https://partner.open-douyin.com/docs/resource/zh-CN/mini-game/develop/guide/game-engine/rd-to-SCgame/open-capacity/capability-adaptation/sc_webgl_keyboa