WebGL自学教程——关于WebGL着色器中的自定义函数

最新推荐文章于 2024-09-04 07:59:59 发布
最新推荐文章于 2024-09-04 07:59:59 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： 编程：Web 文章标签： im 汇编 优化 工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tiewen/article/details/6955910
版权
本文探讨了在WebGL着色器中遇到的自定义函数问题，特别是与返回值临时变量相关的编译和链接错误。通过分析DirectX HLSL的类似bug，作者提出不使用返回值临时变量的解决方案，展示了如何修改函数以避免寄存器数量过多，从而提高性能。
摘要由CSDN通过智能技术生成

首先看看下面的两个自定义函数：

vec2 GetV2TexCoord(void)

{
    if(u_im4Modes[1][0] == EJSWEBGLTEXTURECOORDTYPE._2D_TEXCOORD) return a_v2TexCoord;
    if(u_im4Modes[1][0] == EJSWEBGLTEXTURECOORDTYPE._2D_SRC_POSITION_XY) return v_v4SrcPosition.xy;
    if(u_im4Modes[1][0] == EJSWEBGLTEXTURECOORDTYPE._2D_SRC_POSITION_XZ) return v_v4SrcPosition.xz;
    if(u_im4Modes[1][0] == EJSWEBGLTEXTURECOORDTYPE._2D_SRC_POSITION_YZ) return v_v4SrcPosition.yz;
    if(u_im4Modes[1][0] == EJSWEBGLTEXTURECOORDTYPE._2D_POSITION_XY) return v_v4Position.xy;
    if(u_im4Modes[1][0] == EJSWEBGLTEXTURECOORDTYPE._2D_POSITION_XZ) return v_v4Position.xz;
    if(u_im4Modes[1][0] == EJSWEBGLTEXTURECOORDTYPE._2D_POSITION_YZ) return v_v4Position.yz;
    if(u_im4Modes[1][0] == EJSWEBGLTEXTURECOORDTYPE.CUBE_TEXCOORD) return a_v2TexCoord;
    if(u_im4Modes[1][0] == EJSWEBGLTEXTURECOORDTYPE.CUBE_SRC_POSITION) return v_v4SrcPosition.xy;
    if(u_im4Modes[1][0] == EJSWEBGLTEXTURECOORDTYPE.CUBE_POSITION) return v_v4Position.xy;
    return vec2(0.0, 0.0);//EJSWEBGLTEXTURECOORDTYPE.NONE或未知
}
vec3 GetV3TexCoord(void)
{
    if(u_im4Modes[1][1] == EJSWEBGLTEXTURECOORDTYPE._2D_TEXCOORD) return vec3(a_v3TexCoord.xy, 1.0);
    if(u_im4Modes[1][1] =&
最低0.47元/天 解锁文章
铁文
关注
专栏目录
WebGL基础：着色器基础知识
七脉神剑科技博客
06-03 497
今天由字节跳动的"yancy"童鞋给大家重磅推出一篇WebGL的干货接下来让我们开启奇幻旅程，进入 3D 的世界。 本文作者：yancy 1. 认识3D 首先我们要介绍的是几个概念，这是我们要进入到 3D 不可或缺的内容。认识一下它们吧。 1.1 视点，视线，目标点，上方向 这几个概念在WebGL中属于最常见的内容。 视点：可以简易的理解为眼睛，也叫观察点 目标点：可以理解为我们要看的物体（任何物体） 上方向：头顶的方向。 实际生活中，我们的目光总是以我们的眼睛为起始点，到达我们想
WebGL着色器函数声明
u014291990的博客
11-22 444
函数 本文是WebGL教程(电子书)的2.13节内容 WebGL着色器和javascript语言、C语言一样可以声明函数，着色器声明函数方式类似C语言。 有返回值 把函数计算后需要返回的值通过关键字return返回，注意声明函数时候，函数名称前需要声明return返回值的数据类型。 // 声明一个函数 float add(float x,float y){ return x + y } voi...
WebGL Shader 入门教程
最新发布
gitblog_00085的博客
09-04 463
WebGL Shader 入门教程 jam3-lesson-webgl-shader-introA brief introduction to fragment shaders.项目地址:https://gitcode.com/gh_mirrors/ja/jam3-lesson-webgl-shader-intro 1. 项目的目录结构及介绍 jam3-lesson-webgl-shader-i...
threejs(webgl)-shader入门教程-粒子入门(2)
stonerao
06-22 1947
回顾 1.shader基本使用 粒子
threejs(webgl)-shader入门教程(1)
stonerao
06-16 4199
简介 shader是什么？ shader是一个用GLSL编写的小程序，也就是着色器语言，我们可以通过shader来编写顶点着色器和片元着色器，在WEBGL编程一书中 25-26页有详细说明 shader在Three.js中如何使用？ threejs提供了关于shader的材质 RawShaderMaterial 和 ShaderMaterial 两种编写shader的材质。 RawShaderMaterial：不内置uniforms和attributes ShaderMaterial：内置一些需要的参数，
WebGl Shader 学习
ChenXiaoTemp的专栏
03-06 972
http://www.tuicool.com/articles/I7fU7n 这是一个很好的深度讲解Webgl Shader的文章，非常不错。
WebGL自学教程——WebGL示例：11. 交互：更好的鼠标控制
tiewen的专栏
10-28 7684
11. 交互：更好的鼠标控制 　     在《9. 交互：这次我们用鼠标》中，键盘和鼠标都只控制了立方体绕z轴和x轴的旋转。在从正面观察的情况下，总是无法同时显示立方体的三个面。本章，我们介绍用鼠标拖动实现立方体的3D旋转。     一个旋转对应一个方向向量。如果把所有的方向向量转换为固定的模长，假设为r，并且把向量(x,y,z)当成一个3D坐标，那么，把这些坐标聚集在一起，就形成了一个以(
webgl函数库.rar
09-03
这个“webgl函数库.rar”压缩包包含了一些关键的JavaScript库，帮助开发者更轻松地处理WebGL编程中的各种任务。下面我们将深入探讨这些库及其在WebGL开发中的作用。 1. **cuon-utils.js** Cuon_Utils是一个实用...
webGL教程教程教程
05-05
学习WebGL的过程中，你将接触到一些关键概念，如视口、投影和模型变换，它们用于将3D空间中的物体映射到2D屏幕。此外，理解向量和矩阵运算对于操作几何体的位置、旋转和缩放至关重要。 在“WebGL教程”中，你可能还...
WebGL学习教程之Three.js学习笔记(第一篇)
12-04
然而，WebGL的原生API对开发者来说是相当复杂的，涉及到顶点着色器和片元着色器的编程，需要掌握一定的数学知识（如线性代数和向量几何）以及图形学原理。这不仅需要耐心，也需要相当的学习投入。 Three.js则是一个...
WebGL-Shader入门（1.着色器语言GLSL ES数据类型介绍与使用）
点燃火柴的博客
07-03 1409
使用CSS2DRenderer创建文字说明标签1. GLSL ES介绍2. 变量定义3. 变量类型3.1 基本类型3.1.1 基本类型的介绍3.1.2 基本类型的赋值和类型转换3.2 矢量和矩阵3.2.1 矢量和矩阵类型3.2.2 矢量构造和赋值3.2.3 矩阵构造和赋值3.3 结构体3.4 数组3.5 取样器3.1 void3.2 bool3.2 int3.2 float3.2 vec2, vec3, vec43.2 bvec2, bvec3, bvec43.2 ivec2, ivec3, ivec
WebGL-Shader入门（4.着色器语言GLSL ES函数定义与流程控制）
点燃火柴的博客
07-06 762
函数定义与流程控制1. 序2 参数限定词 1. 序 GLSL ES 中提供了三类限定词，参数限定词、存储限定词和精度限定词，通过这些限定词可以控制参数的行为、限定变量的类型以及限定数据的精度来提高运行效率，减少内存开销，首先从参数限定词说起 2 参数限定词 ...
4.WebGL+Shader课程基础
code for life
05-31 1405
变量名只能包含英文字符、数字和下划线即(a-z、A-Z、0-9、_)变量名的首字母不能是数字不能以 gl_ 、webgl_ 或 webgl 开头，这些前缀已经被OpenGL ES 保留了不能是GLSL ES内置的关键字和保留的关键字变量类型说明具有2、3、4个浮点数元素的矢量具有2、3、4个整形元素的矢量具有2、3、4个布尔值元素的矢量。
webgl shader学习笔记1
weixin_43444009的博客
07-19 412
webgl学习笔记
WebGL - 着色器 简单使用
ithanmang
04-24 3490
1、着色器 webgl绘图必须依赖于 着色器，这是一种新的绘图机制，它可以灵活而且强大的绘制二维和三维图形。 首先，需要了解以下什么是着色器 着色器代码写在javaScript中，以字符串的形式存在。 webgl需要两种着色器代码： 顶点着色器 片元着色器 1.1 顶点着色器 首先来看一下代码 // 顶点着色器 var vertex_shader_source = 'void main...
WebGL着色器快速教程
新缸中之脑
08-11 3328
现在我们已经将着色器、所有坐标和图像加载到 GPU 中，我们已经准备好实际运行着色器程序并让它将我们的图像绘制到画布上。这告诉 WebGL 使用我们的点数组和纹理坐标数组来绘制三角形。这里的数字6意味着我们数组中的每 6 个数字定义一个三角形。每个三角形都有 3 个角，每个角（或顶点）都有一个 x 和 y 坐标。...
webgl旧版 shader注意
weixin_44127535的博客
06-22 152
gl_Position gl_Position往往需要坐标变换,需要用uniform float u_width,也就是canvas.width, " float x = -1.0 + 2.0*(a_coords.x / u_width);\n" + " float y = 1.0 - 2.0*(a_coords.y / u_height);\n" + u_width和canvas.width没有int,float的区别,但如果直接除300,就会导致强制转换,x=-.
GLSL-WebGL着色器语言语法详解
weixin_44384273的博客
09-13 980
WebGL着色器语言-GLSL
WebGL实战：FBO实现立方体贴图与环境映射教程
本文是一篇关于WebGL技术的实践教程，着重讲解如何利用帧缓冲对象（FBO，Framebuffer Object）在WebGL环境中实现立方体贴图的效果。作者首先强调了WebGL与OpenGL的相似性，指出大部分功能由着色器处理，而非传统的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值