Shader 编程：绘制心形

最新推荐文章于 2025-02-06 23:55:56 发布
最新推荐文章于 2025-02-06 23:55:56 发布
阅读量3.1w 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： OpenGL Shader 编程 文章标签： OpenGLES 图形渲染 着色器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Kennethdroid/article/details/132529580
本文探讨了使用Shader在OpenGLES中绘制心形的两种方法，通过讲解ShaderToy上的代码展示了如何利用反正切函数和有向距离场（SDF）算法来定义心形边界。同时提到了通过函数曲线绘制心形的另一种思路，并预告了OpenGL & Metal Shader编程系列的后续主题，包括内置变量、函数、图形、距离场和特效等。

该原创文章首发于微信公众号：字节流动
未经作者（微信ID：Byte-Flow）允许，禁止转载

今天讲一下绘制心形的两种方式，主要是为了扩展一下绘制复杂形状的思路，为后面讲特效做一些简单的铺垫。

心形绘制可以参考 ShaderToy 上的代码：
https://www.shadertoy.com/view/XsfGRn
在这里插入图片描述

上述代码绘制心形,首先将原点从左下角移至屏幕坐标系中央，这样所有片元的向量均以屏幕中心为起点，则向量 uv 就是画布中心与像素点坐标之间的方向向量。

然后利用反正切函数值和当前片元（像素）与屏幕中心点的距离相比较，来确定心形状的边界。GLES 中的反正切函数 atan(p.x,p.y) 取值范围是[-π, π]，然后除以 PI 后，取值范围变成了 [-1, 1] 。

void mainImage(out vec4 fragColor, in vec2 fragCoord
了解本专栏 订阅专栏 解锁全文 超级会员免费看
C++ Opengl绘制3D源码
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-13 2691
项目开发环境： 开发语言:C++和IDE:VS2017,操作系统Windows版本windows SDK8.1,三方库:OpenGL。 项目功能： 绘制3D图形并且旋转。 项目源码如下： /*********************包含链接的库文件*******************************************************************************************/ #pragma comment( lib, "opengl32.lib" )
ShaderJoy —— “爱心 ❤️ 转场” 的实现 【GLSL】
ShaderJoy 的兴趣技术杂货铺
02-02 2388
效果视频 Shader特效——“爱心❤的变换” 的实现 【GLSL】 静态效果图 ❤ 设计思路与核心代码 首先我们将纹理坐标 p 换算为以 center 为中心的坐标系，如下所示 float inHeart (vec2 p, vec2 center, float size) { // 奇异值的处理 if (size == 0.0) ...
OpenGL绘制律动爱心
qq_39540537的博客
07-20 642
仔细观察这两个shader，发现iq大神只用了两个shadertoy内置的uniform输入变量，分别为iTime和iResolution，他们分别代表程序运行的时间和程序的像素大小，我们只需要在自己的shader中加入这两个变量并且在源文件中传递这两个变量的值给着色器就可以，当然fragCoord作为mainImage的输入只需要在顶点着色器中传递给片段着色器。把这款编译好的3D心型shader打包发送给你的女朋友，让她感受一下数学的浪漫吧~基本的使用VSCode编写C/C++代码的经验。
unity中 构建三维动画心形shader
qq_22160145的博客
12-03 1146
unity中实现三维心形 动画shader二维构建过程三维构建动画顶点动画膨胀程度总结： 基于shadertoy网站上二维心形的构建，进行改造 二维构建过程 -x轴拉伸，y=sqrt(abs(x))得到心形，再进行细节调整。 三维构建 在二维基础上，同样xy轴进行相应的操作，得到如图： 很明显能看出，心形在下面尖角处太厚。因为至此为止，尚未对z方向进行改进。 选取函数z = xx+yy;(尝...
[opengl3.x] OVA,OBA,Shader绘制爱心
...
04-10 870
目录 0. heart_data.py 2. shader.cpp 3. shader.hpp 4.ColorFragmentShader.fragmentshader 5.TransformVertexShader.vertexshader python数据离散化脚本： 0. heart_data.py import numpy as np import rando...
shader中绘制一个心
lj820348789的专栏
12-02 629
很早以前做cocos2dx的时候就看到官方着色器代码中已经有了一个现成的心型代码，故而网上也是有很多基于这个代码的，不过我觉得那个例子并不方便理解，所以就动手写一个容易理解的心型，核心数学公式是利用了笛卡尔的心型公式r=a(1-sinθ）。首先是最终结果示意图 下面是完整的着色器代码： Shader "Custom/Heart" { Properties { _MainTex
opengl shader 绘制心形
hgl868的专栏
03-26 3714
顶点着色器 uniform mat4 uMVPMatrix; //总变换矩阵 attribute vec3 aPosition;  //顶点位置 attribute vec2 aTexCoor;    //顶点纹理坐标 varying vec2 vTextureCoord;  //用于传递给片元着色器的变量 varying vec2 vPosition; void main()
shadertoy 跳动的心
zceng的博客
07-28 1207
shadertoy
心形线方程-Geek献给女友的爱意情人节
热门推荐
Forget Everything In My Life.
02-14 16万+
(一下内容源自网络) 说到心形线不得不提到一个人——勒内·笛卡尔。可以说笛卡尔是心形线的创始人，在笛卡尔游历欧洲各国时，认识了瑞典一个小公国的公主克里斯汀，并成为了公主的数学老师，渐渐地彼此产生了爱慕之心，但是在国王的阻挠下笛卡尔被流放回法国，体弱多病无法抵挡日夜的思念，在给公主寄出十三封信后便与世长辞，第十三封信仅有一个公式，那边是心形线的起源。下面看下各种各样的心形线吧！ 1、笛卡尔的心
Unity Shader学习8：缩放星星特效 - ShaderForge + ParticleSystem
weixin_63623077的博客
12-16 524
这里借助的原理是粒子系统的custom data1（vector）的数据可以对应shader中的uv1，所以可以将原shader中控制缩放的滑条 改为uv1（利用其中值为0-1的一个通道即可），通过在粒子系统中控制这个自定义数据的z值 来控制控制u通道的值 进而控制星星的缩放。
shader实现星空效果
a_codecat的博客
10-30 1151
shader实现星空效果
Unity Shader Graph 2D - 使用DeepSeek协助绘制一个爱心
最新发布
Giver的博客
02-06 1540
最近十分流行使用DeepSeek AI，于是想尝试着能不能用DeepSeek来帮助我实现一些Shader Graph效果，正好之前看到了爱心图形，就说干脆用DeepSeek来告诉我怎么使用Shader Graph来绘制一个爱心。
【ShaderToy】跳动的心❤️
weixin_33896069的博客
03-04 965
写在前面注：如果你还不了解ShaderToy，请看开篇。作为ShaderToy系列的第一篇，我们先来点简单的。下面是效果：（优快云目前不能传gif文件了，暂时空缺，可以看下面的原shader效果，是一样的）原Shader地址：https://www.shadertoy.com/view/XsfGRn代码我们使用了之前的开篇中的基础模板。这里仅仅给出main函数的代码： vec4 main(...
【OpenGL】Shader实例分析（二）－ Heart
stalendp的专栏
03-26 2万+
转发请保持地址：http://blog.youkuaiyun.com/stalendp/article/details/22221597 这片文章将介绍怎么用Shader来绘制一个跳动的心脏。这里会涉及到一些数学知识。先看效果图： 源代码如下： // Created by inigo quilez - iq/2013 // License Creative Commons Attributi
ShaderJoy —— 用 Shader 绘制酷炫的爱心烟花【GLSL】【详细版】
ShaderJoy 的兴趣技术杂货铺
01-28 2956
ShaderJoy —— Shader 特效乐趣无穷 爱心❤烟花，不仅春节可以放，情人节也可以用来表白~ 效果图 动态图（压缩有质量损失） 运用在 虎年新春 主题 百花齐放 拉开一点时间 再错开一点时间 运用在情人节主题 静态图 设计思路简介 首先，我们实现一个发光的粒子，代码为 vec3 burst(vec2 st, vec2 pos, float r, vec3 col) { st -= pos; r = 0.6 * r * r; /// 发光效果 retur
在unity的scene中画五角星
weixin_34205076的博客
08-13 402
使用Gizmos的DrawLine方法画线。 首先在场景中找到五角星的五个定点的坐标，按照一笔画的顺序命名为1,2,3,4,5，如图所示： 接下来就是编写代码了，代码很少，如下所示： using UnityEngine; using System.Collections; public class fiveStars : MonoBehaviour { ...
如何生成一颗爱心？一次被打经历
qq_23936433的博客
06-20 680
如何生成一颗爱心？ 昨天找到了一个爱心的方程式，想用unity利用方程生成一个3D Texture，然后画在Volume里，做成一颗爱心给女朋友一个惊喜，核心实现如下： if (Mathf.Pow(xf * xf + 9 * yf * yf / 4 + zf * zf - 1, 3) < (xf * xf * zf * zf * zf + 9 * yf * yf * zf * zf * zf / 80))//在爱心内 {
ShaderJoy —— “变换的五角星” 的实现(两种画法)【GLSL】
ShaderJoy 的兴趣技术杂货铺
01-19 3260
效果图 静态图 动态图 图解分析 为啥需要旋转 18 ° vec2 circlePoint(float ang) { // 调整五个点所构成的边的角度 ang -= PIx2 * 0.05; // 18° 正五角星 return vec2(cos(ang), sin(ang)); } // 单位圆上用 5 个点平分 5 个角度...
Unity Shader学习笔记(四) 水气泡 Shader的实现
zjw1349547081的专栏
12-28 8565
大家好，我是Zander。最近正在学习Shader，同时也在研究ShadowGun里面的一些渲染，其中有一个场景中有一个水缸气泡的效果感觉挺好，于是拿来学习一下。如图： 原理很简单，需要2个层，然后通过图的UV动画来实现视觉效果。具体实现如下：Shader "Custom/Scroll2LayersAditive-addtiveBlend" { Properties { _MainTex (
OpenGL绘制完美心形的教程与源码解析
对于初学者而言，通过绘制一个心形图案可以更好地理解和掌握OpenGL的基本操作和图形编程的基本概念。对于更高级的开发者，这可能是一个展示如何利用OpenGL的高级特性来实现复杂图形绘制的教程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

字节流动

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值