ShaderJoy —— 多物体 Raymarching （图形拼接 + 地面投影）入门 【GLSL】

已于 2024-07-26 13:29:07 修改
阅读量4.1k 收藏 2
点赞数 1
分类专栏： ShaderJoy —— Shader 实例详解 文章标签： shader raymarch 光线步进
于 2016-09-13 10:31:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panda1234lee/article/details/52518549
版权
ShaderJoy —— Shader 实例详解 同时被 2 个专栏收录
158 篇文章 337 订阅 ¥119.90 ¥299.90
订阅专栏
Shader
48 篇文章 8 订阅
订阅专栏
本文介绍了使用ShaderJoy进行Raymarching（光线步进）技术的入门教程，包括五个基础的SDF函数、图形拼接、法线计算和光线步进方法。通过GLSL实现三维效果，并展示了地面投影的实现原理和代码示例。
摘要由CSDN通过智能技术生成

引言

Raymarch （光线步进）是十分有趣的技术，通过 SDF 结合交并集操作，能让仅仅一个片元着色器就实现三维立体的效果，是实现复杂酷炫效果的基础。

Raymarching 实例：切割开的空心立方体

Raymarching 实例：镂空的立方体

 下面进入正文

分为两部分，第一部分是

了解本专栏 订阅专栏 解锁全文
ShaderJoy
关注
专栏目录
订阅专栏
ShaderJoy —— 多物体 Raymarching（多图形 + 抗锯齿 + 软阴影）效果【GLSL】
ShaderJoy 的兴趣技术杂货铺
02-25 5472
参考自： iq 的https://www.shadertoy.com/view/Xds3zN http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm http://ogl...
URP学习第四章 使用raymarch
最新发布
webgpu
04-02 262
接下来打算实现一下raymarch云的效果，这个需要raymarch技术的话，首先看一下怎么在URP里搞出raymarch基本框架。首先创建一个cube,给他一个材质，一个shader，shader就主要计算一个origin 一个ray direction。然后查询如何获取世界坐标的时候，发现varying的变量不知道怎么传递，最后虽然能用了，但结论很诡异。官网文档说texcoord竟然是用来传递高精度数据的，比如position，好吧。
raymarching:使用GLSL片段着色器进行实验
05-21
GLSL中的Raymarching实验。 程序树，仅在片段着色器中渲染。 在查看详细信息。
shader编程-RayMarching与SDF结合开始三维探索（WebGL-Shader开发基础07）
点燃火柴的博客
11-30 4731
RayMarching与SDF结合开始三维探索1. 单色背景颜色 1. 单色背景颜色 人们之所以可以看到物体，是因为光线从光源发出照射到物体，之后反射进入人们的眼睛，这样就看到了物体，在三维模型中使模型呈现在场景中，光线从光源出发，照射到物体，反射后到达相机，反之，同样可以从相机出发光线摄像物体之后反射到光源，RayMarching 算法就是从相机发射光线，具体请看下图 从相机出发，向屏幕中的每一个像素发射一条光线，以其中一条光线为例，光线开始以一定的步长前进，每前进一步判断是否达到物体表面，如果没有继续
shader编程-RayMarching与SDF搭建三维场景实现Blinn-Phong光照（WebGL-Shader开发基础08）
点燃火柴的博客
12-11 1136
RayMarching与Blinn-Phong光照模型搭建三维场景1. demo概述与效果2. Blinn-Phong光照模型介绍3. demo实现3.1 场景物体准备3.2 rayMarching调整3.3 Blinn-Phong光照计算4. demo代码 1. demo概述与效果 上一篇文章学习了RayMarching，但是做出的场景的效果是黑白，这一篇在上一篇内容的基础上，进行改进，使用Blinn-Phong光照模型渲染出不同色彩的物体，下面是demo的最终效果，不同的物体有了属于自己的色彩
shader 和 ray marching
07-27 88
shader toy 玩具
一个拼接对称图片的小shader
LevinYY的博客
01-24 453
这是一个通过uv变换，用一张上下左右对称图片的左下角四分之一，拼接成一张完整图片的shader。 // Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt) Shader "UI_Default_Splice" { Properties ...
ShaderJoy —— “透视投影” 的实现 【GLSL】
ShaderJoy 的兴趣技术杂货铺
02-15 2230
效果视频 Shader 特效——左右透视投影 Shader 特效——上下透视投影 更进一步可以实现 Shader 特效——立方体透视投影 代码和注释： float persp = 0.7; ///< 控制透视的角度 #define PI 3.141592653589 #define PI_HALF (PI/2.) //#define ANT...
ShaderJoy —— ❤の霓虹【GLSL】
ShaderJoy 的兴趣技术杂货铺
06-14 1457
效果视频 ShaderJoy －－♡ 的霓虹 效果图 核心算法解析 第一步，我们来看看心形线是怎么绘制的：由于最终的效果是曲线随着时间绕中心进行旋转，所以很自然得会想到极坐标，通过查找心形线的公式，我们选择极坐标形式的公式： 其结果如下图所示 心形线 第二步，有了心形线，我们就可以在它上面选取若干点生成一条 bezier 曲线线段，为了同时显示两条曲线，需要将第二条曲线段和第一条曲线段选取的点的位置进行错开（offset）；为了实现曲线运动的效果...
uRaymarching：Unity中的Raymarching Shader Generator
02-06
uRaymarching uRaymarching是使用 （此资产中包含的最新版本）的raymarching着色器模板。 实现了以下功能： 仅通过编写距离函数来创建光线行进对象 支持旧版（转发/延迟）和UniversalRP 将来将支持HDRP 与多边形对象混合 VR就绪 标准/不亮/透明 定向/点光源/点光源的阴影 对象空间和全屏（全屏仅在旧版管道中） 屏幕截图 以下形状以12多边形立方体呈现。 在此处查看更多示例： 安装 请从“页面下载最新版本的.unitypackage并将其解压缩到您的项目中。 如何使用 在项目视图中选择创建>着色器> uShaderTemplate>生成器。
raymarch:使用webgl的简单Raymarch
04-29
雷玛奇 使用WebGL的简单距离场Raymarcher（） 特征 可重载着色器代码 鼠标和键盘进行太空运动
Raymarch-Engine：具有受重力影响的光线的最小光线追踪游戏引擎
02-04
Raymarch-Engine：具有受重力影响的光线的最小光线追踪游戏引擎
使用webgl和raymarching以3d方式可视化神经网络
08-10
使用webgl和raymarching以3d方式可视化神经网络。 ​​​​
outline-shader:GLSL Shader为图像添加轮廓
04-05
轮廓着色器 您只需要一个文件。 只需通读注释，也许删除顶部的示例位，将其放入您的游戏中并按照建议使用即可。 使用Ren'Py 7.4着色器勾勒可显示对象的轮廓。 这是一个非常简单的着色器方法，用于向任何可显示对象添加轮廓。 使用mesh布尔（在转换中设置为True）时，它可以在LayeredImages，Composites甚至Live2D模型以及普通图像和文字字形上使用。 它还允许设置一个mesh_pad布尔值，如果为True，它将填充表面以增加额外的空间来绘制轮廓（因此，您不必创建周围具有额外透明度的新图像）。 它使用GPU并行执行计算负荷，每个非透明像素对应一个，并计算出到最近的不透明像素的距离。 一旦达到该距离，便可以使用多种设置来计算颜色以绘制像素。 如果所有这些都处于并行状态，则只需花费一小部分时间（如果在CPU上完成这种方法）就可以了。 这使其在运行时使用非常可接受，因
ShaderJoy —— 漫画 sketch 效果【GLSL】
ShaderJoy 的兴趣技术杂货铺
08-14 1647
效果图 原图 核心算法思路 该效果的核心思路一共分为以下几步【参考 Photoshop 中的图层操作】 先根据图像的亮度，人为设定阈值，分为（6个）不同等级的灰度图； 然后构造（6个）不同旋转方向的 “木刻纹” 图像，如下图所示； 该核心的 “木刻纹” 是由以下正弦和取模函数搭配实现的 float dist = mod(rotuv.y - sin(rotuv.x * frecuencia) * amplitud, divisor); 函数示意图如下所示 等高线图如下所示 接着，将 “木刻
3D纹理展示方式之RayMarch(光线投射)(glsl源码说明)
vily_lei的专栏
02-14 1492
Demo:http://www.artvily.com/renderCase?sample=tex3DRayMarch 3D纹理在基于volume rendering的渲染机制的相关应用中有着广泛的应用。应用的领域非常广泛,例如考古、医学、材料科学，游戏等等。 一般来说3D纹理，可以理解为具有三个维度(width,height,depth)的数据类似于三维数组。一般的2D纹理我们可以认为它就...
使用Ray Marching进行3D渲染
01-10 442
要使用Ray Marching渲染 3D 场景，我们需要为每个像素发射一条光线。通过选择屏幕上的一个点（一个像素），并从视点绘制一条射线，我们可以确定它是否击中一个对象，并决定应该在该像素上绘制什么。使用着色器，我们可以并行处理所有像素以完成整个图像。下面的例子演示了这个想法。光线的起始位置和方向由视点（眼睛）和当前像素（crd）的位置确定。函数是此次演示的主要函数。我们沿光线射线移动一个点并使用 SDF（有符号距离函数）检查它是否足够接近表面。如果距离低于阈值，该函数将返回距离，否则返回 -1.0。
虚幻4简易RayMarch
Clatterrr
07-08 216
float4 Col = 0; float3 pos = WorldPosition; float3 Normal = 0; for(int i = 0;i<MaxSteps;i++) { if(SceneDepth < length(pos - CameraPosition)) break; float distance = length(pos - ObjectPosition) - 50; if(distance < 0.01) { Co.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

ShaderJoy

您的打赏是我继续写博客的动力

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

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

打赏作者

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

抵扣说明：

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

余额充值