草庐IT

一起学 WebGL：改变点的颜色

前端西瓜哥 2023-05-05 原文

大家好，我是前端西瓜哥，上一章我们用 attribute 变量，从外部设置顶点着色器中点的位置信息。

《​​一起学 WebGL：动态绘制点​​》

这次我们把目光投向片元着色器，通过片元着色器修改点的颜色。

片元着色器

片元着色器的代码改一下：

const fragmentShaderSrc = `
precision mediump float;
uniform vec4 u_FragColor;
void main() {
  gl_FragColor = u_FragColor;
}
`;

类似顶点着色器的 attribute，我们在这里声明了一个 uniform 变量 u_FragColor，同样我们使用过的是 vec4 类型，4 个浮点数组成的结构体。

片元着色器中不能设置 attribute 类型的变量，只能用 uniform，或者也能用 varing 变量，支持从顶点着色器传递数据到片元着色器，这个以后西瓜哥会专门讲解。

我们会将这个变量赋值给 WebGL 片元着色器的内置属性 gl_FragColor，确定图形的颜色。

此外，因为使用了变量，所以顶部要加一个 precision highp float; 的玩意。

这是设置片元着色器的 float 精度为高精度。因为现在桌面端浏览器性能都很好，我们直接设置高精度即可。此外还有 mediump 中等精度，和 lowp 低精度，适合用在一些性能羸弱的设备上。精度越低，渲染的效果越差。

然后就是给我们声明的 u_FragColor 传值了，在 JavaScript 里。

修改颜色

/** 修改片元着色器的 uniform **/
const u_FragColor = gl.getUniformLocation(gl.program, "u_FragColor");
gl.uniform4f(u_FragColor, 1, 1, 0, 1); // 绿色

西瓜哥这里通过 gl.getUniformLocation 方法获取对应程序对象中片元着色器的名为 u_FragColor 的 uniform 变量的地址。

然后通过 gl.uniform4f 给这个 uniform 类型赋值。

WebGL 中的颜色分量取值范围是 0 到 1，对应的是一个 比值，比如 vec4(1.0, 0.5, 0, 0.5)​，其实就等价于 rbga(255, 255*0.5, 0, 0.5) 。

渲染结果：

代码实现：

/**
 * wegbl 绘制一个点
 */

/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

const vertexShaderSrc = `
attribute vec4 a_Position;
void main() {
 gl_Position = a_Position;
 gl_PointSize = 30.0;
}
`;

const fragmentShaderSrc = `
precision highp float;
uniform vec4 u_FragColor;
void main() {
  gl_FragColor = u_FragColor;
}
`;

/**** 渲染器生成处理 ****/
// 创建顶点渲染器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
// 创建片元渲染器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
// 程序对象
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;

/** 修改顶点着色器的 attribute */
const a_Position = gl.getAttribLocation(gl.program, "a_Position");
gl.vertexAttrib3f(a_Position, 0, 0, 0);

/** 【本章新增的代码】修改片元着色器的 uniform **/
const u_FragColor = gl.getUniformLocation(gl.program, "u_FragColor");
gl.uniform4f(u_FragColor, 0, 1, 0, 1);

/** 画布绘制 **/
// 清空画布，并指定颜色
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制点
gl.drawArrays(gl.POINTS, 0, 1);

Demo 地址：

https://codesandbox.io/s/xp81lh?file=/index.js。

这个 demo 加了点料，写了个定时器不断修改颜色的函数，将底部的 // changeColor(); 的注释取消掉即可看到颜色变化的效果。

结尾

下一节我们就真正来绘制三角形了。复杂的三维物体，都可以通过一个个很小的三角形组成，三角形越多，三维物体就越精细。

WebGL一起spanstylecolor开发前端片元着色器

有关一起学 WebGL：改变点的颜色的更多相关文章

  1. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  2. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  3. ruby-on-rails - 如果我将 ruby​​ 版本 2.5.1 与 rails 版本 2.3.18 一起使用会怎样？ - 2

    如果我使用ruby​​版本2.5.1和Rails版本2.3.18会怎样？我有基于rails2.3.18和ruby​​1.9.2p320构建的rails应用程序，我只想升级ruby的版本，而不是rails，这可能吗？我必须面对哪些挑战？ 最佳答案 GitHub维护apublicfork它有针对旧Rails版本的分支，有各种变化，它们一直在运行。有一段时间，他们在较新的Ruby版本上运行较旧的Rails版本，而不是最初支持的版本，因此您可能会发现一些关于需要向后移植的有用提示。不过，他们现在已经有几年没有使用2.3了，所以充其量只能让更

  4. ruby 诅咒颜色 - 2

    如何使用Ruby的默认Curses库获取颜色？所以像这样:puts"\e[0m\e[30;47mtest\e[0m"效果很好。在浅灰色背景上呈现漂亮的黑色。但是这个:#!/usr/bin/envrubyrequire'curses'Curses.noecho#donotshowtypedkeysCurses.init_screenCurses.stdscr.keypad(true)#enablearrowkeys(forpageup/down)Curses.stdscr.nodelay=1Curses.clearCurses.setpos(0,0)Curses.addstr"Hello

  5. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基

  6. ruby - 改变替换的大小写 - 2

    我有以下内容:text.gsub(/(lower)(upper)/,'\1\2')我可以将\2替换为大写吗？类似于:sed-e's/\(abc\)/\U\1/'这在Ruby中可行吗？ 最佳答案 查看gsub文档:str.gsub(模式){|匹配|block}→new_str在block形式中，当前匹配字符串作为参数传入，$1、$2、$`、$&、$'等变量将被适当设置。block返回的值将替换为每次调用的匹配项。"alowerupperb".gsub(/(lower)(upper)/){|s|$1+""+$2.upcase}

  7. ruby-on-rails - 如何让 datamapper 与 postgresql 数据库一起工作？ - 2

    我已经找到了几个使用datamapper的示例，并且能够让它们正常工作。不过，所有这些示例都是针对sqlite数据库的。我正在尝试将数据映射器与postgresql一起使用。我将datamapper中的调用从sqlite3更改为postgres，并且我已经安装了dm-postgres-adapter。但它仍然不起作用。我还需要做什么？ 最佳答案 与SQLite不同，PostgreSQL不将数据库存储在单个文件中。在你拥有createdyourdatabase之后，尝试这样的事情:DataMapper.setup:default,{:

  8. ruby - 了解在 Ruby 中与 lambda 一起使用的 inject 行为 - 2

    我经常将预配置的lambda插入可枚举的方法中，例如“map”、“select”等。但是“注入(inject)”的行为似乎有所不同。例如与mult4=lambda{|item|item*4}然后(5..10).map&mult4给我[20,24,28,32,36,40]但是，如果我制作一个2参数lambda用于像这样的注入(inject)，multL=lambda{|product,n|product*n}我想说(5..10).inject(2)&multL因为“inject”有一个可选的单个初始值参数，但这给了我......irb(main):027:0>(5..10).inject

  9. ruby-on-rails - 与 ActiveMerchant 一起使用的最佳支付网关是什么？ - 2

    我需要使用ActiveMerchant库在我们的一个Rails应用程序中设置支付解决方案。尽管这个问题非常主观，但人们对主要网关(BrainTree、Authorize.net等)的体验如何？它必须:处理定期付款。有能力记入个人帐户。能够取消付款。有办法存储用户的付款详细信息(例如Authotize.netsCIM)。干杯 最佳答案 ActiveMerchant很棒，但在过去一年左右的时间里，我在使用它时发现了一些问题。首先，虽然某些网关可能会得到“支持”——但并非所有功能都包含在内。查看功能矩阵以确保完全支持您选择的网关-http

  10. ruby-on-rails - 将 acts_as_list 与 has_many 一起使用 :through in rails - 2

    我有一个Rails应用程序，我正在尝试使用acts_as_list插件设置可排序列表。数据库中的位置字段正在更新，但是在呈现页面时，不考虑顺序。我想我是在寻求帮助。这是我的模型...classQuestionMembership:question_membershipsendclassQuestion:question_membershipsacts_as_listend还有给我列表的草率View代码...>true)%>拖放用于重新排序。数据库中QuestionMembership对象的位置值更新，页面实际上正确显示重新排序。问题是在页面重新加载时，它默认返回到它感觉的任何顺序。我认

随机推荐