如何将shadertoy代码实现为three.js-阐明细节 [英] How to implemen shadertoy code into three.js - clarifying the details
问题描述
所以这是上一个问题: 如何在three.js中实现ShaderToy着色器
So here is a previous question: How to implement a ShaderToy shader in three.js
尝试将上述链接中的步骤成功地实现为以下代码: three.js/blob/master/examples/webgl_shader.html
Tried to implement the steps from the link above into this code unsucessfully: three.js/blob/master/examples/webgl_shader.html
所以我替换了原始的顶点着色器和origianl片段着色器，所以得到了以下代码:
So I replaced the original vertex shader and the origianl fragment shader so I got this code:
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform float iGlobalTime;
uniform sampler2D iChannel0;
uniform sampler2D iChannel1;
varying vec2 vUv;
void main(void)
{
vec2 p = -1.0 + 2.0 *vUv;
vec2 q = p - vec2(0.5, 0.5);
q.x += sin(iGlobalTime* 0.6) * 0.2;
q.y += cos(iGlobalTime* 0.4) * 0.3;
float len = length(q);
float a = atan(q.y, q.x) + iGlobalTime * 0.3;
float b = atan(q.y, q.x) + iGlobalTime * 0.3;
float r1 = 0.3 / len + iGlobalTime * 0.5;
float r2 = 0.2 / len + iGlobalTime * 0.5;
float m = (1.0 + sin(iGlobalTime * 0.5)) / 2.0;
vec4 tex1 = texture2D(iChannel0, vec2(a + 0.1 / len, r1 ));
vec4 tex2 = texture2D(iChannel1, vec2(b + 0.1 / len, r2 ));
vec3 col = vec3(mix(tex1, tex2, m));
gl_FragColor = vec4(col * len * 1.5, 1.0);
}
</script>
这很清楚，但是如何以及在何处实施统一格式:
This is clear but how and Where to implement the tuniform:
var tuniform = {
iGlobalTime: { type: 'f', value: 0.1 },
iChannel0: { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/tex07.jpg') },
iChannel1: { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/infi.jpg' ) },
};
和iGlobalTime部分?
and the iGlobalTime parts?
tuniform.iChannel0.value.wrapS = tuniform.iChannel0.value.wrapT = THREE.RepeatWrapping;
tuniform.iChannel1.value.wrapS = tuniform.iChannel1.value.wrapT = THREE.RepeatWrapping;
所以我的问题是:如何修改此代码(或任何thrre.js代码): three.js/blob/master/examples/webgl_shader.html
So my question is: how to modify this code (or any thrre.js code): three.js/blob/master/examples/webgl_shader.html
显示一个包含iGlobalTime的有效阴影示例吗?
to display a working shadertoy example which includes iGlobalTime as well?
=====================零件从这里开始======================= ==
==================== EITED PART STARTS HERE =========================
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - shader [Monjori]</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #ffffff;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #ffffff;
}
#oldie a { color:#da0 }
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - shader demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div>
<script src="../build/three.min.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform float iGlobalTime;
uniform sampler2D iChannel0;
uniform sampler2D iChannel1;
varying vec2 vUv;
void main(void)
{
vec2 p = -1.0 + 2.0 *vUv;
vec2 q = p - vec2(0.5, 0.5);
q.x += sin(iGlobalTime* 0.6) * 0.2;
q.y += cos(iGlobalTime* 0.4) * 0.3;
float len = length(q);
float a = atan(q.y, q.x) + iGlobalTime * 0.3;
float b = atan(q.y, q.x) + iGlobalTime * 0.3;
float r1 = 0.3 / len + iGlobalTime * 0.5;
float r2 = 0.2 / len + iGlobalTime * 0.5;
float m = (1.0 + sin(iGlobalTime * 0.5)) / 2.0;
vec4 tex1 = texture2D(iChannel0, vec2(a + 0.1 / len, r1 ));
vec4 tex2 = texture2D(iChannel1, vec2(b + 0.1 / len, r2 ));
vec3 col = vec3(mix(tex1, tex2, m));
gl_FragColor = vec4(col * len * 1.5, 1.0);
}
</script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var uniforms;
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.Camera();
camera.position.z = 1;
scene = new THREE.Scene();
var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
uniforms = {
time: { type: "f", value: 1.0 },
resolution: { type: "v2", value: new THREE.Vector2() }
};
var material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
onWindowResize();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize( event ) {
renderer.setSize( window.innerWidth, window.innerHeight );
uniforms.resolution.value.x = renderer.domElement.width;
uniforms.resolution.value.y = renderer.domElement.height;
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var tuniform = {
iGlobalTime: { type: 'f', value: 0.1 },
iChannel0: { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/brick_bump.jpg') },
iChannel1: { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/brick_bump.jpg' ) },
};
tuniform.iChannel0.value.wrapS = tuniform.iChannel0.value.wrapT = THREE.RepeatWrapping;
tuniform.iChannel1.value.wrapS = tuniform.iChannel1.value.wrapT = THREE.RepeatWrapping;
delta=clock.getDelta();
tuniform.iGlobalTime.value += delta;
uniforms.time.value += 0.05;
renderer.render( scene, camera );
}
</script>
</body>
</html>
推荐答案
要将任何着色器从shadertoy转换为three.js着色器，您只需要具有正确的变量/均匀性即可. Shadertoy具有可用的制服，默认情况下Three.js着色器不提供这些制服.例如，Shadertoy具有iResolution制服，因为Shadertoy用于在平面画布上而不是在3d对象上进行渲染，因此您在Three.js着色器中将没有该制服.默认情况下，iGlobalTime也是这些制服之一，该制服不在Three.js着色器中.
To convert any shader from shadertoy to a three.js shader, you just have to have the correct variables/uniforms. Shadertoy has uniforms available that three.js shaders do not by default. Shadertoy has the iResolution uniform for example, which you will not have in a three.js shader as Shadertoy is for rendering on a flat canvas rather than a 3d object. iGlobalTime is also one of these uniforms that is not in a three.js shader by default.
在发布的代码中，您正确地定义了iGlobalTime统一体，只需要在代码首次运行时创建一次THREE.Clock，然后就需要在render函数中更新统一体.
In the code you posted, you have defined the iGlobalTime uniform corrrectly, you just need create a THREE.Clock once when you code first runs, then you need to update the uniform in your render function.
uniforms.iGlobalTime.value = clock.getElapsedTime();
我已经实现了矩阵样式着色器，它在three.js中使用iGlobalTime. ="https://2pha.com/blog/demos/threejs/shaders/matrix.html" rel ="nofollow noreferrer">此处
I have implemented this matrix style shader which uses iGlobalTime in three.js here
这篇关于如何将shadertoy代码实现为three.js-阐明细节的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
