嗯,其实渲染球体,可以看做就是一个2d圆形图案+渲染光泽的函数。

定义球体结构——半径,球心坐标

struct Sphere {
vec3 center;
float radius;
};edzx-

定义光线——光源坐标,方向

struct Ray {
vec3 origin;
vec3 direction;
};

检测“光线”与“球体”是否相交,若未相交返回false,相交返回从光源到球面的距离

数学解释如下

图中红色线条即光线,重要线段已标注变量,光照方向记作向量Dir

首先,需要判断光线是否照射到球面,转化为数学问题,即光线所在直线是否与球相交。

在一个平面内,一条线与一个球形的关系有三种——相交相切相离

其中相切作为一个中间状态是很好判断的,当光线与球面相切,必然存在:

R = d

t1² = OC² - R²

如此,余下的两种状态也很好判断了。

假若线段t1的长度小于从光源出发到球形的切线段长,则光线必然与球形相交;反之,则与球形相离。

接下来,计算从光源到球面相交点的距离。

如图中所示,最终所求距离即线段t0长度:

                                  t1 = OC·Dir  (此处用到点乘)

d² = OC² - t1²

t3² = R² - d²

t0 = t1 - sqrt (t3)

代码表示如下:

float intersectSphere(in Ray ray, in Sphere sphere) {
vec3 co = ray.origin - sphere.center; float discriminant = dot(co, ray.direction) * dot(co, ray.direction)
- (dot(co, co) - sphere.radius * sphere.radius); if (discriminant >= 0.0) //相交或相切
return -dot(co, ray.direction)-sqrt(discriminant); //返回光源到球面距离
else //相离返回-1
return -.;

最后,是光照漫反射的方程,这里用到物理学上的兰伯特余弦定律Lambert Cosine's Law),即光照漫反射时的强度,遵循光线向量与法线向量间夹角余弦值的变化。

如下图,即随着光线向量与法线夹角增大,漫反射光的强度越弱。

漫反射代码如下:

vec4 diffuse(in vec3 surface, in vec3 center, in vec4 color, in vec3 litePos) {
// Surface normal
vec3 n = normalize(surface - center); // Light direction from surface
vec3 l = normalize(litePos - surface); // The diffuse equation
return color * max(0.0, dot(n, l));
}

最终返回反射光的颜色。

最终绘制阶段。

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
float x = fragCoord.x / iResolution.x;
float y = fragCoord.y*. / iResolution.y;
vec4 m = iMouse / iResolution.xyxy; x = x * 3.0 ;
y = y * 3.0 - .; vec3 pixelPos = vec3(x, y, ); vec3 eyePos = vec3(, , -); vec3 rayDir = normalize(pixelPos - eyePos)*(.); Sphere sphere = Sphere(vec3(3.5, ., 5.0), 1.0); float eyeToSphere = intersectSphere(Ray(eyePos, rayDir), sphere); fragColor = vec4(0.1, 0.1, 0.1, ); if (eyeToSphere >= .)
{
//漫射颜色
vec4 diffuseColour = vec4(0.4,0.4,0.4,.); //周边颜色
vec4 ambientColour = vec4(0.8,0.1,0.1,.); //光亮位置
vec3 litePos = vec3(m.x*., m.y*., .); fragColor = ambientColour + diffuse(eyePos + eyeToSphere * rayDir, sphere.center, diffuseColour, litePos); }

→示例:https://www.shadertoy.com/view/MsffW4

【ShaderToy】画一个球体的更多相关文章

  1. Directx11教程(5) 画一个简单的三角形(1)

    原文:Directx11教程(5) 画一个简单的三角形(1)       在本篇教程中,我们将通过D3D11画一个简单的三角形.在D3D11中,GPU的渲染主要通过shader来操作(当然还有一些操作 ...

  2. Effective前端3:用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  3. canvas游戏小试:画一个按方向键移动的圆点

    canvas游戏小试:画一个按方向键移动的圆点   自己对canvas,但又有一颗做游戏的心TT.然后记录一下对canvas的学习吧,用一个按方向键控制的小圆点来做练习.(编程时用了一些es6的语法) ...

  4. PostScript的简单例子-用粗线画一个圆

    一 近期需要用到PostScript,查询资料学习PS的语法 简单的画一个圆的例子 %!PS-Adobe-3.0 /inch{72 mul} def 4.25 inch 5.5 inch 1.5 in ...

  5. 自己画一个ActivityIndicatorView-b

    苹果的UI控件中有一个UIActivityIndicatorView,俗称菊花.→_→现在我们仿照它来制作一个其它样式的指示器,如下: ActivityView.png 自定义指示器 首先画一个白色的 ...

  6. Android画一个随意拖动的圆形

    import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactor ...

  7. 用PS画一个齿轮

    以前只会画圆画方,这没技术含量.今天学了一个稍难一点的,画一个齿轮.图形有圆也有方.以下描述如何画出来的. 一.打开PS准备一画布,画一矩形并且填充颜色. 二.编辑->自由变换(CTRL+T), ...

  8. 深夜,用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  9. Directx11学习笔记【十二】 画一个旋转的彩色立方体

    上一次我们学习了如何画一个2D三角形,现在让我们进一步学习如何画一个旋转的彩色立方体吧. 具体流程同画三角形类似,因此不再给出完整代码了,不同的部分会再说明. 由于我们要画彩色的立方体,所以顶点结构体 ...

随机推荐

  1. 《你必须掌握的Entity Framework 6.x与Core 2.0》勘误

    第5章 5.1.1----致谢网友[宪煌] public virtual ICollection Post {get;set;} 修改为 public virtual ICollection<P ...

  2. selenium跳过webdriver检测并模拟登录淘宝

    目录 简介 编写思路 使用教程 演示图片 源代码 @(文章目录) 简介 模拟登录淘宝已经不是一件新鲜的事情了,过去我曾经使用get/post方式进行爬虫,同时也加入IP代理池进行跳过检验,但随着大型网 ...

  3. 随心测试_数据库_002 <数据库系统组成>

    软测工程师:作为综合运用多学科知识,保障软件质量的重要岗位.需要我们学以致用,在工作中不断学习提升.以下:软测人员必备_数据库核心技能学习点,供大家学习参考. 数据库系统组成_必备 1. 简介:数据库 ...

  4. git客户端的安装及使用

    1.git提交全部文件的基本步骤: 1)git status:查看修改内容 2)git add XX :添加XX文件到暂存区,如果修改内容比较多,可以使用git add -A .来一次性添加所有文件( ...

  5. ORM简介

    ORM就是object relational mapping,对象关系映射. 将关系型数据库转化为对象来进行处理. 数据表就是一个类,表的一行就是一个对象,一行的每个字段就是属性. 忽然想到了在MVC ...

  6. Add AI feature to Xamarin.Forms app

    Now, AI is one of important technologies.Almost all platforms have API sets of AI. Following list is ...

  7. ftp服务器安装与配置

    ftp服务器安装与配置 1. ftp服务端的安装 1 如果之前配置过ftp服务器的还是之后配置的服务器,无法启动服务,那么基本是配置出现了错误,那么可先完全卸载后再进行安装.如果无法定位多半是镜像源的 ...

  8. Mint-UI Picker 三级联动

    Mint-UI Picker组件的三级联动 HTML: <mt-picker :slots="slots" value-key="name" @chang ...

  9. 洛谷 P1903 [国家集训队]数颜色 / 维护队列

    墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会向你发布如下指令: 1. \(Q\) \(L\) \(R\) 代表询问你从第L支画笔到第R支画笔中共有几种不同 ...

  10. django rest framework pagination

    REST framework 包含对可定制分页样式的支持.这使你可以将较大的结果集分成单独的数据页面. 分页 API 支持: 以分页链接的形式作为响应内容的一部分. 以分页链接的形式包含在响应的 he ...