嗯,其实渲染球体,可以看做就是一个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. python3 购物车 增改查终极版~

    还是先来条NLP再说,快没了,以后想抄还没有... 十一,没有挫败,只有回应讯息 “挫败”只是指出过去的做法得不到预期的效果,是给我们需要改变的信号. “挫败”只是在事情画上句号时才能用上,欲想事情解 ...

  2. #035 大数阶乘 PTA题目6-10 阶乘计算升级版 (20 分)

    实际题目 本题要求实现一个打印非负整数阶乘的函数. 函数接口定义: void Print_Factorial ( const int N ); 其中N是用户传入的参数,其值不超过1000.如果N是非负 ...

  3. 软工+C(9): 助教指南,持续更新...

    上一篇:提问与回复 下一篇:从命令行开始逐步培养编程能力(Java) 目录: ** 0x00 Handshake ** 0x01 点评 ** 0x02 评分 ** 0x03 知识储备 ** 0x04 ...

  4. 基于 docker 的redis 主从+哨兵(快速部署)

    很简单(字多的步骤见:http://www.cnblogs.com/vipzhou/p/8580495.html) 1.直接启动3个容器 docker network create --subnet ...

  5. JavaScript的数据结构和算法

    所有JavaScript对象都有hasOwnProperty(value)的方法,用来返回一个表明对象是不是具有这个value Key值属性的布尔值. javaScript的方法 具有delete的方 ...

  6. CodeForces 1151D Stas and the Queue at the Buffet

    题目链接:http://codeforces.com/contest/1151/problem/D 题目大意: 有n个学生排成一队(序号从1到n),每个学生有2个评定标准(a, b),设每个学生的位置 ...

  7. Webstorm的一些常用快捷键

    ctrl+/ 单行注释ctrl+shift+/块注释Ctrl+X 删除行Ctrl+D 复制行Ctrl+B 快速打开光标处的类或方法Ctrl+F 查找文本Ctrl+R 替换文本ctrl+shift+ + ...

  8. js 解决两值交换

    总结七种办法来交换a和b的变量值 交换变量值方案一 最最最简单的办法就是使用一个临时变量了 不过使用临时变量的方法实在是太low了 var t; t = a; a = b; b = t;   首先把a ...

  9. C语言博客作业06--结构体&文件

    1.本章学习总结 1.1思维导图 1.2.本章学习体会 这是这学期最后一次博客园作业,文件和结构体感觉比指针还难,一直搞不是很懂,大作业没有方向感,现在还在搞,大作业没有成品,只能先去借鉴舍友的优秀代 ...

  10. [LOJ3087][GXOI/GZOI2019]旅行者——堆优化dijkstra

    题目链接: [GXOI/GZOI2019]旅行者 我们考虑每条边的贡献,对每个点求出能到达它的最近的感兴趣的城市(设为$f[i]$,最短距离设为$a[i]$)和它能到达的离它最近的感兴趣的城市(设为$ ...