Shadertoy 多个buffers 转成Threejs代码

转载来源

如题:

将Shadertoy 多个buffers 转成Threejs代码

比如 https://www.shadertoy.com/view/4sG3WV

转成Threejs的代码

// Port from Shadertoy to THREE.js: https://www.shadertoy.com/view/4sG3WVconst VERTEX_SHADER = `varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);}
`;const BUFFER_A_FRAG = `uniform vec4 iMouse;uniform sampler2D iChannel0;uniform sampler2D iChannel1;uniform vec2 iResolution;uniform float iFrame;varying vec2 vUv;#define mousedata(a,b) texture2D( iChannel1, (0.5+vec2(a,b)) / iResolution.xy, -0.0 )#define backbuffer(uv) texture2D( iChannel0, uv ).xyfloat lineDist(vec2 p, vec2 start, vec2 end, float width) {vec2 dir = start - end;float lngth = length(dir);dir /= lngth;vec2 proj = max(0.0, min(lngth, dot((start - p), dir))) * dir;return length( (start - p) - proj ) - (width / 2.0);}void main() {vec2 uv = vUv;vec2 col = uv;if (iFrame > 2.) {col = texture2D(iChannel0,uv).xy;vec2 mouse = iMouse.xy/iResolution.xy;vec2 p_mouse = mousedata(2.,0.).xy;if (mousedata(4.,0.).x > 0.) {col = backbuffer(uv+((p_mouse-mouse)*clamp(1.-(lineDist(uv,mouse,p_mouse,0.)*20.),0.,1.)*.7));}}gl_FragColor = vec4(col,0.0,1.0);}`;const BUFFER_B_FRAG = `uniform vec4 iMouse;uniform sampler2D iChannel0;uniform vec3 iResolution;varying vec2 vUv;bool pixelAt(vec2 coord, float a, float b) {return (floor(coord.x) == a && floor(coord.y) == b);}vec4 backbuffer(float a,float b) {return texture2D( iChannel0, (0.5+vec2(a,b)) / iResolution.xy, -100.0 );}void main( ) {vec2 uv = vUv;// / iResolution.xy;vec4 color = texture2D(iChannel0,uv);if (pixelAt(gl_FragCoord.xy,0.,0.)) { //Surface positiongl_FragColor = vec4(backbuffer(0.,0.).rg+(backbuffer(4.,0.).r*(backbuffer(2.,0.).rg-backbuffer(1.,0.).rg)),0.,1.);} else if (pixelAt(gl_FragCoord.xy,1.,0.)) { //New mouse positiongl_FragColor = vec4(iMouse.xy/iResolution.xy,0.,1.);} else if (pixelAt(gl_FragCoord.xy,2.,0.)) { //Old mouse positiongl_FragColor = vec4(backbuffer(1.,0.).rg,0.,1.);} else if (pixelAt(gl_FragCoord.xy,3.,0.)) { //New mouse holdedgl_FragColor = vec4(clamp(iMouse.z,0.,1.),0.,0.,1.);} else if (pixelAt(gl_FragCoord.xy,4.,0.)) { //Old mouse holdedgl_FragColor = vec4(backbuffer(3.,0.).r,0.,0.,1.);} else {gl_FragColor = vec4(0.,0.,0.,1.);}}
`;const BUFFER_FINAL_FRAG = `uniform sampler2D iChannel0;uniform sampler2D iChannel1;varying vec2 vUv;void main() {vec2 uv = vUv;vec2 a = texture2D(iChannel1,uv).xy;gl_FragColor = vec4(texture2D(iChannel0,a).rgb,1.0);}
`;class App {constructor() {this.width = 1024;this.height = 512;this.renderer = new THREE.WebGLRenderer();this.loader = new THREE.TextureLoader();this.mousePosition = new THREE.Vector4();this.orthoCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);this.counter = 0;this.renderer.setSize(this.width, this.height);document.body.appendChild(this.renderer.domElement);this.renderer.domElement.addEventListener('mousedown', () => {this.mousePosition.setZ(1);this.counter = 0;});this.renderer.domElement.addEventListener('mouseup', () => {this.mousePosition.setZ(0);});this.renderer.domElement.addEventListener('mousemove', event => {this.mousePosition.setX(event.clientX);this.mousePosition.setY(this.height - event.clientY);});this.targetA = new BufferManager(this.renderer, {width: this.width,height: this.height});this.targetB = new BufferManager(this.renderer, {width: this.width,height: this.height});this.targetC = new BufferManager(this.renderer, {width: this.width,height: this.height});}start() {const resolution = new THREE.Vector3(this.width, this.height, window.devicePixelRatio);const channel0 = this.loader.load('https://res.cloudinary.com/di4jisedp/image/upload/v1523722553/wallpaper.jpg');this.loader.setCrossOrigin('');this.bufferA = new BufferShader(BUFFER_A_FRAG, {iFrame: {value: 0},iResolution: {value: resolution},iMouse: {value: this.mousePosition},iChannel0: {value: null},iChannel1: {value: null}});this.bufferB = new BufferShader(BUFFER_B_FRAG, {iFrame: {value: 0},iResolution: {value: resolution},iMouse: {value: this.mousePosition},iChannel0: {value: null}});this.bufferImage = new BufferShader(BUFFER_FINAL_FRAG, {iResolution: {value: resolution},iMouse: {value: this.mousePosition},iChannel0: {value: channel0},iChannel1: {value: null}});this.animate();}animate() {requestAnimationFrame(() => {this.bufferA.uniforms['iFrame'].value = this.counter++;this.bufferA.uniforms['iChannel0'].value = this.targetA.readBuffer.texture;this.bufferA.uniforms['iChannel1'].value = this.targetB.readBuffer.texture;this.targetA.render(this.bufferA.scene, this.orthoCamera);this.bufferB.uniforms['iChannel0'].value = this.targetB.readBuffer.texture;this.targetB.render(this.bufferB.scene, this.orthoCamera);this.bufferImage.uniforms['iChannel1'].value = this.targetA.readBuffer.texture;this.targetC.render(this.bufferImage.scene, this.orthoCamera, true);this.animate();});}}class BufferShader {constructor(fragmentShader, uniforms = {}) {this.uniforms = uniforms;this.material = new THREE.ShaderMaterial({fragmentShader: fragmentShader,vertexShader: VERTEX_SHADER,uniforms: uniforms});this.scene = new THREE.Scene();this.scene.add(new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), this.material));}}class BufferManager {constructor(renderer, size) {this.renderer = renderer;this.readBuffer = new THREE.WebGLRenderTarget(size.width, size.height, {minFilter: THREE.LinearFilter,magFilter: THREE.LinearFilter,format: THREE.RGBAFormat,type: THREE.FloatType,stencilBuffer: false});this.writeBuffer = this.readBuffer.clone();}swap() {const temp = this.readBuffer;this.readBuffer = this.writeBuffer;this.writeBuffer = temp;}render(scene, camera, toScreen = false) {if (toScreen) {this.renderer.render(scene, camera);} else {this.renderer.setRenderTarget(this.writeBuffer);this.renderer.clear();this.renderer.render(scene, camera)this.renderer.setRenderTarget(null);}this.swap();}}document.addEventListener('DOMContentLoaded', () => {(new App()).start();
});

Shadertoy 多个buffers 转成Threejs代码相关推荐

Python2代码转换成Python3代码
Python2代码转换成Python3代码找到 2to3.py ,一般python安装的都是默认位置的话,位置就在: 文件夹地址栏输入: C:\Users\Administrator\AppData ...
python代码转成java_如何实现Java代码转换成python代码
之前小编告诉大家最初是学Java的,现在转向python,那对于两者之间有什么互通的嘛?其实有,比如可以将Java转成python代码,一起来看下吧. 首先给大家带来一组示例演示. Java代码如下: ...
四十年前的 6502 CPU 指令翻译成 JS 代码会是怎样
去年折腾的一个东西,之前 blog 里也写过,不过那时边琢磨边写,所以比较杂乱,现在简单完整地讲解一下. 前言当时看到一本虚拟机相关的书,正好又在想 JS 混淆相关的事,无意中冒出个想法:能不能把某 ...
真效率神器，UI稿智能转换成前端代码，准确率极高
大家好,我是若川.在这充满网络促销活动的几个月,倍感压力的,除了你的口袋,是否还有程序员的发量呢?每年的双十一.双十二购物狂欢节,各大电商平台都会上线让消费者充满购买欲望的活动页面,而这些活动页面大多 ...
编译原理（四）之解析语言翻译成三地址代码
选择部分C语言的语法成分,设计其词法语法语义分析程序. 设计并实现一个一遍扫描的词法语法语义分析程序,将部分C语言的语法成分翻译成三地址代码,要求有一定的出错提示和错误恢复功能. 例如简单赋值语句: ...
自动将存储过程转成C#代码的过程[转]
自动将存储过程转成C#代码的过程一个国外程序员写的自动将存储过程转成C#源码的存储过程.我没有作任何的更改﹐原版贴在这里﹐希望对有些人能够有所帮助: CREATE PROCEDURE dbo.too ...
c++ class struct同名_如何把C++的源代码改写成C代码？而C改C++只需一步！
★ 如何把C++的源代码改写成C代码? C++解释器比C语言解释器占用的存储空间要大,想要在某些特定场合兼容C++代码,同时为了节省有限的存储空间,降低成本,也为了提高效率,将用C++语言写的源程序用 ...
Variant类型转换成CString代码
在对数据库操作中通常都会用到Variant 和_bstr_t类型,在网上也有很多关于这方面的代码.而在进行MFC等程序中,通常都会用到CString类.从Variant转换成CString代码如下:v ...
将Vba代码转换成Php代码,将这个Excel公式转换成VBA代码（函数）
将这个Excel公式转换成VBA代码(函数) 这是Excel中的公式,我试图转换为VBA代码: =IFERROR(IF(effDate>curDate,0,IF((curDate-effDate ...

Shadertoy 多个buffers 转成Threejs代码

Shadertoy 多个buffers 转成Threejs代码相关推荐

最新文章

热门文章