WebGL进阶(五)-可视域

理论基础:

顶点着色器 Vertex Shader

主要是负责处理顶点位置、顶点颜色、顶点向量等顶点的数据;处理一些顶点的变换:例如在进行视图变换和投影变换时MVP矩阵会改变顶点的位置信息。

输入:

顶点着色器输入部分主要是声明:

①储存着每个顶点属性的attribute变量;

②所有顶点都会实现的(例如MVP矩阵、透视变换矩阵等)全局的uniform变量;

③一些会传递给片元着色器的varying变量。

// 变量
attribute vwc3 aVertexPosition; // 顶点位置
attribute vec3 aNormalPosition; // 法线
attribute vec2 aTextureCoord; // uv坐标varying highp vec2 vTextureCoord; // 顶点着色器传递给片元着色器
varying highp vec3 vFragPos;
varying highp vec3 vNormal;// 矩阵
uniform mat4 uModelViewMatrix; // 视图变换矩阵
uniform mat4 uProjectionMatrix; // 透视变换矩阵
输出:

①顶点坐标gl_Position;

②给输入部分声明的varying变量赋值;

矩阵运算从右往左运算

vFragPos = aVertexPosition;
vNormal = aNormalPosition;// 计算点坐标
gl_Position = uProjextionMatrix * uModelViewMatrix * vec4(aVertexPosition,1.0);vTextureCoord = aTextureCoord;
片元着色器 Fragment Shader

用于颜色、贴图、光照阴影等

//除了上述出现的“着色器不支持高精度,限定浮点类型为中精度”
precision mediump float;//还有表示支持高精度的:“着色器支持高精度,限定浮点类型为高精度”
precision highp float;//以及仅支持低精度的:
prcision lowp float; 
输入: 

uniform声明

/声明一个纹理相关的变量,sampler2D 也是一种数据类型
//它是一种取样器类型的变量,该变量对应传入的纹理2D图片的像素数据
uniform sampler2D uSampler;
//Blinn-Phong需要的漫反射项kd、高光项ks、光源位置、相机位置、光强
uniform vec3 uKd;
uniform vec3 uKs;
uniform vec3 uLightPos;
uniform vec3 uCameraPos;
uniform float uLightIntensity;
// 这个TextureSample参数作用应该是:
// 以左上角为原点,通过UV截取图片,如果==1,则正常取值
uniform int uTextureSample; 

 varing变量

//继承varying参数
varying highp vec2 vTextureCoord;
varying highp vec3 vFragPos;
varying highp vec3 vNormal; 
输出: 

一般设置为gl_FragColor

参考:GAMES101-现代计算机图形学入门-闫令琪_哔哩哔哩_bilibili

gl.compileShader(shader), 传递需要编译的着色器,函数实现着色器编译。
gl.getShaderParameter(shader,COMPILE_STATUS),COMPILE_STATUS为:

  • gl.DELETE_STATUS:标示着色器是否被删除,删除(GL_TRUE)未删除(GL_FALSE).
  • gl.COMPILE_STATUS: 标示着色器是否编译成功,是(GL_TRUE)不是(GL_FALSE
  • gl.SHADER_TYPE: 标示着色器类型,是顶点着色器 (gl.VERTEX_SHADER) 还是片段着色器 (gl.FRAGMENT_SHADER)
WebGLRenderingContext.enableVertexAttribArray()

在 WebGL 中,作用于顶点的数据会先储存在attributes。这些数据仅对 JavaScript 代码和顶点着色器可用。属性由索引号引用到 GPU 维护的属性列表中。在不同的平台或 GPU 上,某些顶点属性索引可能具有预定义的值。创建属性时,WebGL 层会分配其他属性。

类型为GLuint 的索引,指向要激活的顶点属性。可以使用getAttribLocation方法来获取索引.

WebGLRenderingContext.vertexAttribPointer(index,size,type,normalized,stride,offset)

打开属性数组列表中指定索引处的通用顶点属性数组,

index:定要修改的顶点属性的索引。

size:指定每个顶点属性的组成数量,必须是 1,2,3 或 4。

type:

指定数组中每个元素的数据类型可能是:

  • gl.BYTE: signed 8-bit integer, with values in [-128, 127] 有符号的 8 位整数,范围 [-128, 127]

  • gl.SHORT: signed 16-bit integer, with values in [-32768, 32767] 有符号的 16 位整数,范围 [-32768, 32767]

  • gl.UNSIGNED_BYTE: unsigned 8-bit integer, with values in [0, 255] 无符号的 8 位整数,范围 [0, 255]

  • gl.UNSIGNED_SHORT: unsigned 16-bit integer, with values in [0, 65535] 无符号的 16 位整数,范围 [0, 65535]

  • gl.FLOAT: 32-bit IEEE floating point number 32 位 IEEE 标准的浮点数

  • When using a WebGL 2 context, the following values are available additionally: 使用 WebGL2 版本的还可以使用以下值:

    • gl.HALF_FLOAT: 16-bit IEEE floating point number 16 位 IEEE 标准的浮点数

normalize:

         当转换为浮点数时是否应该将整数数值归一化到特定的范围。

  • or types gl.BYTE and gl.SHORT, normalizes the values to [-1, 1] if true. 对于类型gl.BYTEgl.SHORT,如果是 true 则将值归一化为 [-1, 1]
  • For types gl.UNSIGNED_BYTE and gl.UNSIGNED_SHORT, normalizes the values to [0, 1] if true. 对于类型gl.UNSIGNED_BYTEgl.UNSIGNED_SHORT,如果是 true 则将值归一化为 [0, 1]
  • For types gl.FLOAT and gl.HALF_FLOAT, this parameter has no effect. 对于类型gl.FLOATgl.HALF_FLOAT,此参数无效

stride:

一个 GLsizei,以字节为单位指定连续顶点属性开始之间的偏移量 (即数组中一行长度)。不能大于 255。如果 stride 为 0,则假定该属性是紧密打包的,即不交错属性,每个属性在一个单独的块中,下一个顶点的属性紧跟当前顶点之后。

offset:

指定顶点属性数组中第一部分的字节偏移量。必须是类型的字节长度的倍数。

WebGLRenderingContext.uniformMatrix[234]fv(location,transpose,value)

该方法的 3 个版本(uniformMatrix2fv()uniformMatrix3fv() 和 unifomMatrix4fv()),分别以二阶、三阶和四阶方阵作为输入值,它们应是分别具有 4、9、16 个浮点数的数组。

WebGLRenderingContext.uniformMatrix2fv(location, transpose, value);
WebGLRenderingContext.uniformMatrix3fv(location, transpose, value);
WebGLRenderingContext.uniformMatrix4fv(location, transpose, value);

location

WebGLUniformLocation 对象包含了要修改的 uniform attribute 位置。位置使用 getUniformLocation()获得。

transpose

GLboolean 指定是否转置矩阵。必须为 false

value

Float32Array 型或者是 GLfloat 序列值。这些值被假定按列主序(column major order)的方式提供。

源码:


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="gl-matrix.js"></script><script>let vertexstring = `attribute vec4 a_position;uniform mat4 u_formMatrix;uniform mat4 proj;attribute vec4 a_color;varying vec4 color;void main(void){gl_Position =  u_formMatrix * a_position;color = a_color;} `;let fragmentstring = `precision mediump float;varying vec4 color;void main(void){gl_FragColor =color;}`;var webgl;var near=0;var far= 50;function init() {initWebgl();initShader();initBuffer();draw();inittext(near,far)initEvent();}function inittext(near,far){document.getElementById("text").innerHTML = "near:"+near +"<br/>"+ "far:"+far;}function initEvent() {document.onkeydown = handleKeyDown;}function handleKeyDown(event) {if (String.fromCharCode(event.keyCode) == 'W') {near += 1;}else if (String.fromCharCode(event.keyCode) == 'S') {near -=1;}else if (String.fromCharCode(event.keyCode) == 'A') {far -= 1;}else if (String.fromCharCode(event.keyCode) == 'D') {far += 1;}inittext(near,far)initBuffer();draw();}function initWebgl() {let webglDiv = document.getElementById('myCanvas');webgl = webglDiv.getContext("webgl");webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);}function initShader() {let vsshader = webgl.createShader(webgl.VERTEX_SHADER);let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);webgl.shaderSource(vsshader, vertexstring);webgl.shaderSource(fsshader, fragmentstring);webgl.compileShader(vsshader);webgl.compileShader(fsshader);if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(vsshader);alert(err);return;}if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(fsshader);alert(err);return;}let program = webgl.createProgram();webgl.attachShader(program, vsshader);webgl.attachShader(program, fsshader)webgl.linkProgram(program);webgl.useProgram(program);webgl.program = program}function initBuffer() {let ProjMatrix = glMatrix.mat4.create();glMatrix.mat4.identity(ProjMatrix);glMatrix.mat4.ortho(ProjMatrix,-100,100,-100,100,near,far)    //修改可视域范围let arr = [0.0, 70, -40, 1,      1, 0,  0, 1,-50, -30, -40, 1,     1, 0,  0, 1, // 绿色50, -30, -40, 1,      1, 0,  0, 1,50, 40, -20, 1, 1.0, 1.0,  0.4, 1,-50, 40, -20, 1, 1.0, 1.0,  0.4, 1,0.0, -60,-20, 1, 1.0, 1.0,  0.4, 1,// 黄色0.0, 50, 0.0, 1,  0.4,  0.4, 1.0, 1,-50, -50, 0.0, 1,  0.4,  0.4, 1.0, 1,50, -50, 0.0, 1,  0.4,  0.4, 1.0, 1, // 蓝色]let pointPosition = new Float32Array(arr);let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");let triangleBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aPsotion);webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 8 * 4, 0);let aColor = webgl.getAttribLocation(webgl.program, "a_color");webgl.enableVertexAttribArray(aColor);webgl.vertexAttribPointer(aColor, 4, webgl.FLOAT, false, 8 * 4, 4 * 4);let uniformMatrix1 = webgl.getUniformLocation(webgl.program, "u_formMatrix");webgl.uniformMatrix4fv(uniformMatrix1, false, ProjMatrix)}function draw() {webgl.clearColor(0.0, 1.0, 0.0, 1.0);webgl.clear(webgl.COLOR_BUFFER_BIT);webgl.drawArrays(webgl.TRIANGLES, 0, 9);}</script>
</head><body onload="init()"><canvas id='myCanvas' width="1024" height='768'></canvas><div id="text"></div>
</body></html>

效果展示:

可操作键盘方向键进行显示变换。 

复盘:

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

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

相关文章

Android中常用adb命令

目录 1.adb连接安卓模拟器 2.adb列出所有已经连接的设备 3.adb显示设备的日志信息 4.adb 电脑文件推送到安卓模拟器中 5.adb 手机传送文件到电脑 6.adb获取安卓应用的包名和Activity名 附录 1--命令 1&#xff09;adb devices 2&#xff09;adb install 路径> 3&#xff09;…

Django-cookie,session

Cookie简介 Cookie&#xff0c;有时也用Cookies&#xff0c;是指web程序为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据&#xff08;通常经过加密&#xff09;&#xff0c;一般是以键值对的形式存在&#xff0c;Cookie具有不可跨域名性 Cookie是http协议中…

智能工厂的设计软件 谓述词(遗传/继承)的前述谓经验: 认知系统架构和灵活模块化框架的实现原理 之1

&#xff08;备忘 1)三组词&#xff1a;先天的和先验的&#xff0c;天生的和本能的&#xff0c;遗传的/继承的 以及三种“学习”&#xff1a;经验学习/数据学习和知识学习。 --本文中提到的“实践常识” 不直接 属于“学习”需要进一步澄清&#xff09; Q1、考虑一个问题&a…

【ARM 嵌入式 编译系列 10.4.1 -- ELF 文件结构详细介绍】

文章目录 ARM GCC ELF 文件结构详细介绍1. ELF 文件概述2. ELF 文件结构2.1 ELF 头部(ELF Header)2.2 ELF 数据(ELF Data)2.2.1 程序头表(Program Headers)2.2.2 节头表(Section Headers)2.2.3 实际数据(Data)3. 示例和工具3.1 详细解释4. Program Headers 概述4.1 .…

windows 下安装 make

Error running ‘docs’: Cannot run program “\usr\bin\make” (in directory “F:\xx\goland-api\xxxx-go”): CreateProcess error2, 系统找不到指定的文件。 windows上安装&#xff1a;chocolatey github地址&#xff1a; https://github.com/chocolatey/choco/releases然…

PAT甲级-1052 Linked List Sorting

题目 题目大意 给定一个链表&#xff0c;要求按链表中的数值从小到大排序生成新的链表。输出有效节点的个数和链表的起始地址&#xff0c;以及链表本身。 思路 链表用结构体数组来表示&#xff0c;然后用sort自定义排序。需要注意的是&#xff0c;链表中存在无效节点&#x…

【CSS in Depth 2 精译_055】8.3 伪类 :is() 和 :where() 的正确打开方式

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 【第三部分 现代 CSS 代码组织】 ✔️【第八章 层叠图层及其嵌套】 ✔️ 8.1 用 layer 图层来操控层叠规则&#xff08;上篇&#xff09; 8.1.1 图层的定义&#xff08;上篇&#xff09;8.1.2 图层的…

React基础语法

1.React介绍 React由Meta公司开发&#xff0c;是一个用于构建Web和原生交互界面的库 1.1 React优势 相较于传统基于DOM开发的优势 1.组件化的开发方式 2.不错的性能 相较于其他前端框架的优势 1.丰富的生态 2.跨平台支持 1.2React的时长情况 全球最流行&#xff0c;大厂…

C语言数据结构:排序(2)

文章目录 4.选择排序4.1 基本思想4.2 排序实现 5.快排5.1 基本思想5.2 递归实现快排5.3 快排优化5.4 双指针法完成快排5.5 快排的非递归 6.归并排序6.1 基本思想6.2 排序的实现6.3 归并排序的非递归 7. 计数排序7.1 基本思想7.2 排序实现7.3 排序的优缺点 8.排序总结 4.选择排序…

C++初阶教程——C++入门

一、本章主要内容 C在C的基础之上&#xff0c;加入了面向对象编程的思想&#xff0c;并增加了许多有用的库以及编程范式。可以说&#xff0c;C是C的子集。在这章的内容中&#xff0c;笔者将会为诸位读者讲C如何补充C语言的一些不足。比如&#xff1a;作用域、IO、函数、指针等。…

【Golang】Go语言中如何进行包管理

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

JetBrains IDE中GPU进程(JCEF)重启问题(Too many restarts of GPU-process)解决方案

目录 前言1. GPU进程重启问题概述1.1 什么是GPU进程重启问题&#xff1f;1.2 该问题带来的影响 2. GPU进程重启问题的原因分析2.1 显卡驱动的兼容性问题2.2 系统资源的限制2.3 JCEF组件的设置不合理 3. 解决方案3.1 方法一&#xff1a;通过自定义属性禁用GPU加速3.2 方法二&…

20241028在荣品PRO-RK3566开发板的预置Android13下用iperf3测试AP6256的WIFI网速

20241028在荣品PRO-RK3566开发板的预置Android13下用iperf3测试AP6256的WIFI网速 2024/10/28 18:17 荣品PRO-RK3566开发板作为服务器端&#xff1a; 笔记本电脑作为客户端。 接公司的网络。 在笔记本电脑的ubuntu20.04下&#xff0c;通过nethogs实测iperf3的发送速度大概是10MB…

410wifi的正确利用之路——debian 11

装上openwrtadguard太卡了&#xff0c;10min自启一次&#xff0c;当无线网卡都费劲。 网桥、USB千万网段要和主网独立 wifi连接激活后再改静态ip 高通410 修复debian 11的环境 1 换debian11源 &#xff08;1&#xff09;切换为国内的软件源&#xff08;可以加快软件更新时的…

如何快速删除node_modules依赖包的方法。

可以通过下载rimraf命令行工具进行删除。 1.通过npm下载rimraf命令行工具 npm install -g rimraf2.通过命令行进行删除node_modules依赖包 rimraf node_modules3.删除完成后&#xff0c;你可以进行选择重新下载node_modules依赖包 npm install此场景适用于你想重置node_modu…

压力测试Monkey命令参数和报告分析!

adb的操作命令格式一般为&#xff1a;adb shell monkey 命令参数 PART 01 常用参数 ⏩ -p <测试的包名列表> 用于约束限制&#xff0c;用此参数指定一个或多个包。指定包之后&#xff0c;Monkey将只允许系统启动指定的APP。如果不指定包&#xff0c;Monkey将允许系统…

Vue中使用 vuedraggable进行拖拽

本文主要记录下 vuedraggable拖拽 在 vue2 和 vue3 中使用上的区别。 一、安装 vue2 安装命令 npm i vuedraggable -S vue3 安装会报错&#xff1a;Cannot read property header of undefined。安装最新版本的vuedraggable即可&#xff0c;命令行如下 vue3 安装命令 npm i…

shodan-5

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 视频地址&#xff1a;shodan(5)_哔哩哔哩_bilibili 一、shodan语法 1、net shodan search --limit 10 --fields ip_str, port net:208.88.84.0/24 搜索一个网段内的I…

SSA-CNN-LSTM-MATT多头注意力机制多特征分类预测

SSA-CNN-LSTM-MATT多头注意力机制多特征分类预测 目录 SSA-CNN-LSTM-MATT多头注意力机制多特征分类预测分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现SSA-CNN-LSTM-MATT麻雀算法优化卷积神经网络-长短期记忆神经网络融合多头注意力机制多特征分类预测&…

Ubuntu:通过ssh链接另外一台Ubuntu

本文将介绍通过ssh链接另外一台Ubuntu的方法。 一、安装openssh-server sudo apt update sudo apt install openssh-server二、查看SSH是否运行 sudo systemctl status ssh三、链接 ssh usernameremote_ip_address四、复制A电脑的文件到本地 scp usernameremote_ip_addres…