玩转Qml(16)-移植ShaderToy

简介
源码
效果预览
关于ShaderToy
关于ShaderEffect
ShaderToy原理
TaoShaderToy

简介

这次涛哥将会教大家移植ShaderToy的特效到Qml

源码

《玩转Qml》系列文章，配套了一个优秀的开源项目:TaoQuick

github https://github.com/jaredtao/TaoQuick

访问不了或者速度太慢，可以用国内的镜像网站gitee

https://gitee.com/jaredtao/TaoQuick

效果预览

先看几个效果图

穿云洞

星球之光

蜗牛

超级马里奥

gif录制质量较低，可编译运行TaoQuick源码或使用涛哥打包好的可执行程序，查看实际运行效果。

可执行程序下载链接(包括windows 和 MacOS平台) https://github.com/jaredtao/TaoQuick/releases

关于ShaderToy

学习过计算机图形学的人，都应该知道大名鼎鼎的ShaderToy网站

用一些Shader代码和简单的纹理，就可以输出各种酷炫的图形效果和音频效果。

如果你还不知道，赶紧去看看吧https://www.shadertoy.com

顺便提一下，该网站的作者是IQ大神，这里有他的博客：

http://www.iquilezles.org/www/articles/raymarchingdf/raymarchingdf.htm

本文主要讨论图形效果，音频效果以后再实现。

关于ShaderEffect

Qml中实现ShaderToy，最快的途径就是ShaderEffect了。

上一篇文章《Qml特效-着色器效果ShaderEffect》已经介绍过ShaderEffect了, 本文重点是移植ShaderToy。

在涛哥写这篇文章之前，已经有两位前辈做过相关的研究。

陈锦明： https://zhuanlan.zhihu.com/p/38942460

qyvlik: https://zhuanlan.zhihu.com/p/44417680

涛哥参考了他们的实现，做了一些改进、完善。

在此感谢两位前辈。

下面正文开始

ShaderToy原理

OpenGL的可编程渲染管线中，着色器代码是可以动态编译、加载到GPU运行的。

而OpenGL又包括了桌面版(OpenGL Desktop)、嵌入式版(OpenGL ES)以及网页版(WebGL)

ShaderToy网站是以WebGL 2.0为基础，提供内置函数、变量，并约定了一些输入变量，由用户按照约定编写着色器代码。

只要不是太老的OpenGL版本，内置函数、变量基本都是通用的。

约定的变量

ShaderToy网站约定的变量如下：

vec3        iResolution             image/buffer        The viewport resolution (z is pixel aspect ratio, usually 1.0)
float       iTime                   image/sound/bufferCurrent time in seconds
float       iTimeDelta              image/buffer        Time it takes to render a frame, in seconds
int         iFrame                  image/buffer        Current frame
float       iFrameRate              image/buffer        Number of frames rendered per second
float       iChannelTime[4]         image/buffer        Time for channel (if video or sound), in seconds
vec3        iChannelResolution[4]image/buffer/soundInput texture resolution for each channel
vec4        iMouse                  image/buffer        xy = current pixel coords (if LMB is down). zw = click pixel
sample...剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章
🍊
柑橘 RSS
订阅源浏览器信息
涛哥的博客
Qt进阶之路-涛哥的博客
马上订阅 涛哥的博客 RSS 更新: https://jaredtao.github.io/atom.xml
玩转Qml(16)-移植ShaderToy
2019年7月4日 13:44
简介
源码
效果预览穿云洞
星球之光
蜗牛
超级马里奥
关于ShaderToy
关于ShaderEffect
ShaderToy原理约定的变量
glsl版本号
glsl版本兼容
ShaderToy适配
TaoShaderToy
简介
这次涛哥将会教大家移植ShaderToy的特效到Qml
源码
《玩转Qml》系列文章，配套了一个优秀的开源项目:TaoQuick
github https://github.com/jaredtao/TaoQuick
访问不了或者速度太慢，可以用国内的镜像网站gitee
https://gitee.com/jaredtao/TaoQuick
效果预览
先看几个效果图
穿云洞
星球之光
蜗牛
超级马里奥
gif录制质量较低，可编译运行TaoQuick源码或使用涛哥打包好的可执行程序，查看实际运行效果。
可执行程序下载链接(包括windows 和 MacOS平台) https://github.com/jaredtao/TaoQuick/releases  
关于ShaderToy
学习过计算机图形学的人，都应该知道大名鼎鼎的ShaderToy网站 
用一些Shader代码和简单的纹理，就可以输出各种酷炫的图形效果和音频效果。
如果你还不知道，赶紧去看看吧https://www.shadertoy.com
顺便提一下，该网站的作者是IQ大神，这里有他的博客：
http://www.iquilezles.org/www/articles/raymarchingdf/raymarchingdf.htm
本文主要讨论图形效果，音频效果以后再实现。
关于ShaderEffect
Qml中实现ShaderToy，最快的途径就是ShaderEffect了。
上一篇文章《Qml特效-着色器效果ShaderEffect》已经介绍过ShaderEffect了, 本文重点是移植ShaderToy。
在涛哥写这篇文章之前，已经有两位前辈做过相关的研究。
陈锦明： https://zhuanlan.zhihu.com/p/38942460
qyvlik: https://zhuanlan.zhihu.com/p/44417680
涛哥参考了他们的实现，做了一些改进、完善。
在此感谢两位前辈。
下面正文开始
ShaderToy原理
OpenGL的可编程渲染管线中，着色器代码是可以动态编译、加载到GPU运行的。
而OpenGL又包括了桌面版(OpenGL Desktop)、嵌入式版(OpenGL ES)以及网页版(WebGL)
ShaderToy网站是以WebGL 2.0为基础，提供内置函数、变量，并约定了一些输入变量，由用户按照约定编写着色器代码。
只要不是太老的OpenGL版本，内置函数、变量基本都是通用的。
约定的变量
ShaderToy网站约定的变量如下：
1
2
3
4
5
6
7
8
9
10
11
vec3        iResolution             image/buffer        The viewport resolution (z is pixel aspect ratio, usually 1.0)
float       iTime                   image/sound/bufferCurrent time in seconds
float       iTimeDelta              image/buffer        Time it takes to render a frame, in seconds
int         iFrame                  image/buffer        Current frame
float       iFrameRate              image/buffer        Number of frames rendered per second
float       iChannelTime[4]         image/buffer        Time for channel (if video or sound), in seconds
vec3        iChannelResolution[4]image/buffer/soundInput texture resolution for each channel
vec4        iMouse                  image/buffer        xy = current pixel coords (if LMB is down). zw = click pixel
sample...剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章
🍊
柑橘 RSS
订阅源浏览器信息
涛哥的博客
Qt进阶之路-涛哥的博客
马上订阅 涛哥的博客 RSS 更新: https://jaredtao.github.io/atom.xml
玩转Qml(16)-移植ShaderToy
2019年7月4日 13:44
简介
源码
效果预览穿云洞
星球之光
蜗牛
超级马里奥
关于ShaderToy
关于ShaderEffect
ShaderToy原理约定的变量
glsl版本号
glsl版本兼容
ShaderToy适配
TaoShaderToy
简介
这次涛哥将会教大家移植ShaderToy的特效到Qml
源码
《玩转Qml》系列文章，配套了一个优秀的开源项目:TaoQuick
github https://github.com/jaredtao/TaoQuick
访问不了或者速度太慢，可以用国内的镜像网站gitee
https://gitee.com/jaredtao/TaoQuick
效果预览
先看几个效果图
穿云洞
星球之光
蜗牛
超级马里奥
gif录制质量较低，可编译运行TaoQuick源码或使用涛哥打包好的可执行程序，查看实际运行效果。
可执行程序下载链接(包括windows 和 MacOS平台) https://github.com/jaredtao/TaoQuick/releases  
关于ShaderToy
学习过计算机图形学的人，都应该知道大名鼎鼎的ShaderToy网站 
用一些Shader代码和简单的纹理，就可以输出各种酷炫的图形效果和音频效果。
如果你还不知道，赶紧去看看吧https://www.shadertoy.com
顺便提一下，该网站的作者是IQ大神，这里有他的博客：
http://www.iquilezles.org/www/articles/raymarchingdf/raymarchingdf.htm
本文主要讨论图形效果，音频效果以后再实现。
关于ShaderEffect
Qml中实现ShaderToy，最快的途径就是ShaderEffect了。
上一篇文章《Qml特效-着色器效果ShaderEffect》已经介绍过ShaderEffect了, 本文重点是移植ShaderToy。
在涛哥写这篇文章之前，已经有两位前辈做过相关的研究。
陈锦明： https://zhuanlan.zhihu.com/p/38942460
qyvlik: https://zhuanlan.zhihu.com/p/44417680
涛哥参考了他们的实现，做了一些改进、完善。
在此感谢两位前辈。
下面正文开始
ShaderToy原理
OpenGL的可编程渲染管线中，着色器代码是可以动态编译、加载到GPU运行的。
而OpenGL又包括了桌面版(OpenGL Desktop)、嵌入式版(OpenGL ES)以及网页版(WebGL)
ShaderToy网站是以WebGL 2.0为基础，提供内置函数、变量，并约定了一些输入变量，由用户按照约定编写着色器代码。
只要不是太老的OpenGL版本，内置函数、变量基本都是通用的。
约定的变量
ShaderToy网站约定的变量如下：
1
2
3
4
5
6
7
8
9
10
11
vec3        iResolution             image/buffer        The viewport resolution (z is pixel aspect ratio, usually 1.0)
float       iTime                   image/sound/bufferCurrent time in seconds
float       iTimeDelta              image/buffer        Time it takes to render a frame, in seconds
int         iFrame                  image/buffer        Current frame
float       iFrameRate              image/buffer        Number of frames rendered per second
float       iChannelTime[4]         image/buffer        Time for channel (if video or sound), in seconds
vec3        iChannelResolution[4]image/buffer/soundInput texture resolution for each channel
vec4        iMouse                  image/buffer        xy = current pixel coords (if LMB is down). zw = click pixel
sample...剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章