How to use renderTargets method in Cypress

Best JavaScript code snippet using cypress

FlowFieldMap.js

Source:FlowFieldMap.js Github

copy

Full Screen

1import * as THREE from 'three'2import FlowFieldMapMaterial from './Materials/FlowFieldMapMaterial'3export default class FlowFieldMap4{5 constructor(_options)6 {7 // Options8 this.debug = _options.debug9 this.renderer = _options.renderer10 this.time = _options.time11 this.positions = _options.positions12 // Debug13 if(this.debug)14 {15 this.debug.Register({16 type: 'folder',17 label: 'flowField',18 open: false19 })20 }21 // Set up22 this.width = 2048 // iOS limit (use 4096 for Android and 8192 otherwise)23 this.height = Math.ceil(this.positions.length / 3 / this.width)24 this.size = this.width * this.height25 this.setSpace()26 this.setBaseTexture()27 this.setRenderTargets()28 this.setEnvironment()29 // First render30 this.renderer.instance.setRenderTarget(this.renderTargets.primary)31 this.renderer.instance.render(this.scene, this.camera)32 this.renderer.instance.setRenderTarget(null)33 // Debug34 if(this.debug)35 {36 this.debug.Register({37 folder: 'flowField',38 type: 'range',39 label: 'uStrengthFrequency',40 min: 0,41 max: 3,42 step: 0.001,43 object: this.material.uniforms.uStrengthFrequency,44 property: 'value'45 })46 this.debug.Register({47 folder: 'flowField',48 type: 'range',49 label: 'uStrengthOffset',50 min: - 1.5,51 max: 1.5,52 step: 0.001,53 object: this.material.uniforms.uStrengthOffset,54 property: 'value'55 })56 this.debug.Register({57 folder: 'flowField',58 type: 'range',59 label: 'uStrengthPower',60 min: 1,61 max: 3,62 step: 0.001,63 object: this.material.uniforms.uStrengthPower,64 property: 'value'65 })66 this.debug.Register({67 folder: 'flowField',68 type: 'range',69 label: 'uLifeSpeed',70 min: 0.00001,71 max: 0.02,72 step: 0.00001,73 object: this.material.uniforms.uLifeSpeed,74 property: 'value'75 })76 this.debug.Register({77 folder: 'flowField',78 type: 'range',79 label: 'uTurbulencesTimeFrequency',80 min: 0,81 max: 0.001,82 step: 0.0000001,83 object: this.material.uniforms.uTurbulencesTimeFrequency,84 property: 'value'85 })86 this.debug.Register({87 folder: 'flowField',88 type: 'range',89 label: 'uTurbulencesFrequency',90 min: 0.0001,91 max: 4,92 step: 0.0001,93 object: this.material.uniforms.uTurbulencesFrequency,94 property: 'value'95 })96 this.debug.Register({97 folder: 'flowField',98 type: 'range',99 label: 'uTurbulencesSpeed',100 min: 0.0001,101 max: 0.01,102 step: 0.0001,103 object: this.material.uniforms.uTurbulencesSpeed,104 property: 'value'105 })106 this.debug.Register({107 folder: 'flowField',108 type: 'range',109 label: 'uTurbulencesDirectionX',110 min: - 3,111 max: 3,112 step: 0.001,113 object: this.material.uniforms.uTurbulencesDirection.value,114 property: 'x'115 })116 this.debug.Register({117 folder: 'flowField',118 type: 'range',119 label: 'uTurbulencesDirectionY',120 min: - 3,121 max: 3,122 step: 0.001,123 object: this.material.uniforms.uTurbulencesDirection.value,124 property: 'y'125 })126 this.debug.Register({127 folder: 'flowField',128 type: 'range',129 label: 'uTurbulencesDirectionZ',130 min: - 3,131 max: 3,132 step: 0.001,133 object: this.material.uniforms.uTurbulencesDirection.value,134 property: 'z'135 })136 this.debug.Register({137 folder: 'flowField',138 type: 'button',139 label: 'reset',140 action: () =>141 {142 this.reset()143 }144 })145 }146 }147 setSpace()148 {149 this.space = {}150 this.space.min = {}151 this.space.min.x = Infinity152 this.space.min.y = Infinity153 this.space.min.z = Infinity154 this.space.max = {}155 this.space.max.x = - Infinity156 this.space.max.y = - Infinity157 this.space.max.z = - Infinity158 for(let i = 0; i < this.positions.length; i += 3)159 {160 if(this.positions[i + 0] < this.space.min.x)161 {162 this.space.min.x = this.positions[i + 0]163 }164 if(this.positions[i + 1] < this.space.min.y)165 {166 this.space.min.y = this.positions[i + 1]167 }168 if(this.positions[i + 2] < this.space.min.z)169 {170 this.space.min.z = this.positions[i + 2]171 }172 if(this.positions[i + 0] > this.space.max.x)173 {174 this.space.max.x = this.positions[i + 0]175 }176 if(this.positions[i + 1] > this.space.max.y)177 {178 this.space.max.y = this.positions[i + 1]179 }180 if(this.positions[i + 2] > this.space.max.z)181 {182 this.space.max.z = this.positions[i + 2]183 }184 }185 this.space.amplitude = {}186 this.space.amplitude.x = this.space.max.x - this.space.min.x187 this.space.amplitude.y = this.space.max.y - this.space.min.y188 this.space.amplitude.z = this.space.max.z - this.space.min.z189 this.space.matrix = new THREE.Matrix4()190 this.space.matrix.makeTranslation(this.space.min.x, this.space.min.y, this.space.min.z)191 this.space.matrix.scale(new THREE.Vector3(this.space.amplitude.x, this.space.amplitude.y, this.space.amplitude.z))192 }193 setBaseTexture()194 {195 // Base texture196 const data = new Float32Array(4 * this.size)197 // From positions198 for(let i = 0; i < this.positions.length / 3; i++)199 {200 const positionIndex = i * 3201 const pixelIndex = i * 4202 data[pixelIndex + 0] = (this.positions[positionIndex + 0] - this.space.min.x) / this.space.amplitude.x203 data[pixelIndex + 1] = (this.positions[positionIndex + 1] - this.space.min.y) / this.space.amplitude.y204 data[pixelIndex + 2] = (this.positions[positionIndex + 2] - this.space.min.z) / this.space.amplitude.z205 data[pixelIndex + 3] = Math.random()206 }207 // From random208 // for(let i = 0; i < this.size; i++)209 // {210 // const pixelIndex = i * 4211 // data[pixelIndex + 0] = Math.random()212 // data[pixelIndex + 1] = Math.random()213 // data[pixelIndex + 2] = Math.random()214 // data[pixelIndex + 3] = Math.random()215 // }216 this.baseTexture = new THREE.DataTexture(data, this.width, this.height, THREE.RGBAFormat, THREE.FloatType)217 this.baseTexture.minFilter = THREE.NearestFilter218 this.baseTexture.magFilter = THREE.NearestFilter219 this.baseTexture.generateMipmaps = false220 this.baseTexture.needsUpdate = true221 this.baseTexture.flipY = false222 }223 setRenderTargets()224 {225 this.renderTargets = {}226 this.renderTargets.a = new THREE.WebGLRenderTarget(227 this.width,228 this.height,229 {230 wrapS: THREE.ClampToEdgeWrapping,231 wrapT: THREE.ClampToEdgeWrapping,232 minFilter: THREE.NearestFilter,233 magFilter: THREE.NearestFilter,234 format: THREE.RGBAFormat,235 type: THREE.FloatType,236 depthWrite: false,237 depthBuffer: false,238 stencilBuffer: false239 }240 )241 this.renderTargets.b = this.renderTargets.a.clone()242 this.renderTargets.primary = this.renderTargets.a243 this.renderTargets.secondary = this.renderTargets.b244 }245 setEnvironment()246 {247 // Scene248 this.scene = new THREE.Scene()249 // Orthographic camera250 this.camera = new THREE.OrthographicCamera(- 1, 1, 1, - 1, 0.5, 1.5)251 this.camera.position.z = 1252 // Plane geometry253 this.geometry = new THREE.PlaneBufferGeometry(1, 1, 1, 1)254 // Plane material255 this.material = new FlowFieldMapMaterial()256 this.material.uniforms.uBaseTexture.value = this.baseTexture257 this.material.uniforms.uTexture.value = this.baseTexture258 this.material.uniforms.uTime.value = 0.0259 this.material.uniforms.uStrengthFrequency.value = 2.0260 this.material.uniforms.uStrengthOffset.value = - 0.35261 this.material.uniforms.uStrengthPower.value = 1.5262 this.material.uniforms.uLifeSpeed.value = 0.004263 this.material.uniforms.uTurbulencesTimeFrequency.value = 0.0001264 this.material.uniforms.uTurbulencesFrequency.value = 0.6265 this.material.uniforms.uTurbulencesSpeed.value = 0.001266 this.material.uniforms.uTurbulencesDirection.value = new THREE.Vector3(0, 1, 0)267 this.material.uniforms.uSpaceMatrix.value = this.space.matrix268 // Mesh in front of camera269 this.mesh = new THREE.Mesh(this.geometry, this.material)270 this.scene.add(this.mesh)271 }272 render()273 {274 // Update material texture275 this.material.uniforms.uTexture.value = this.renderTargets.primary.texture276 this.material.uniforms.uTime.value = this.time.elapsed277 // Render in secondary renderTarget278 this.renderer.instance.setRenderTarget(this.renderTargets.secondary)279 this.renderer.instance.render(this.scene, this.camera)280 this.renderer.instance.setRenderTarget(null)281 this.renderTargets.primary.needsUpdate = true282 // Swap283 const temp = this.renderTargets.primary284 this.renderTargets.primary = this.renderTargets.secondary285 this.renderTargets.secondary = temp286 }287 reset()288 {289 const tempMaterial = new THREE.ShaderMaterial({290 uniforms:291 {292 uTexture: { value: this.baseTexture }293 },294 vertexShader: `295varying vec2 vUv;296void main()297{298 vUv = uv;299 gl_Position = vec4(position * 2.0, 1.0);300}301 `,302 fragmentShader: `303uniform sampler2D uTexture;304varying vec2 vUv;305void main()306{307 gl_FragColor = texture2D(uTexture, vUv);308}309 `310 })311 this.mesh.material = tempMaterial312 window.requestAnimationFrame(() =>313 {314 window.requestAnimationFrame(() =>315 {316 this.mesh.material = this.material317 })318 })319 }...

Full Screen

Full Screen

GPUComputationRenderer.js

Source:GPUComputationRenderer.js Github

copy

Full Screen

1/**2 * @author yomboprime https://github.com/yomboprime3 *4 * GPUComputationRenderer, based on SimulationRenderer by zz855 *6 * The GPUComputationRenderer uses the concept of variables. These variables are RGBA float textures that hold 4 floats7 * for each compute element (texel)8 *9 * Each variable has a fragment shader that defines the computation made to obtain the variable in question.10 * You can use as many variables you need, and make dependencies so you can use textures of other variables in the shader11 * (the sampler uniforms are added automatically) Most of the variables will need themselves as dependency.12 *13 * The renderer has actually two render targets per variable, to make ping-pong. Textures from the current frame are used14 * as inputs to render the textures of the next frame.15 *16 * The render targets of the variables can be used as input textures for your visualization shaders.17 *18 * Variable names should be valid identifiers and should not collide with THREE GLSL used identifiers.19 * a common approach could be to use 'texture' prefixing the variable name; i.e texturePosition, textureVelocity...20 *21 * The size of the computation (sizeX * sizeY) is defined as 'resolution' automatically in the shader. For example:22 * #DEFINE resolution vec2( 1024.0, 1024.0 )23 *24 * -------------25 *26 * Basic use:27 *28 * // Initialization...29 *30 * // Create computation renderer31 * var gpuCompute = new GPUComputationRenderer( 1024, 1024, renderer );32 *33 * // Create initial state float textures34 * var pos0 = gpuCompute.createTexture();35 * var vel0 = gpuCompute.createTexture();36 * // and fill in here the texture data...37 *38 * // Add texture variables39 * var velVar = gpuCompute.addVariable( "textureVelocity", fragmentShaderVel, pos0 );40 * var posVar = gpuCompute.addVariable( "texturePosition", fragmentShaderPos, vel0 );41 *42 * // Add variable dependencies43 * gpuCompute.setVariableDependencies( velVar, [ velVar, posVar ] );44 * gpuCompute.setVariableDependencies( posVar, [ velVar, posVar ] );45 *46 * // Add custom uniforms47 * velVar.material.uniforms.time = { value: 0.0 };48 *49 * // Check for completeness50 * var error = gpuCompute.init();51 * if ( error !== null ) {52 * console.error( error );53 * }54 *55 *56 * // In each frame...57 *58 * // Compute!59 * gpuCompute.compute();60 *61 * // Update texture uniforms in your visualization materials with the gpu renderer output62 * myMaterial.uniforms.myTexture.value = gpuCompute.getCurrentRenderTarget( posVar ).texture;63 *64 * // Do your rendering65 * renderer.render( myScene, myCamera );66 *67 * -------------68 *69 * Also, you can use utility functions to create ShaderMaterial and perform computations (rendering between textures)70 * Note that the shaders can have multiple input textures.71 *72 * var myFilter1 = gpuCompute.createShaderMaterial( myFilterFragmentShader1, { theTexture: { value: null } } );73 * var myFilter2 = gpuCompute.createShaderMaterial( myFilterFragmentShader2, { theTexture: { value: null } } );74 *75 * var inputTexture = gpuCompute.createTexture();76 *77 * // Fill in here inputTexture...78 *79 * myFilter1.uniforms.theTexture.value = inputTexture;80 *81 * var myRenderTarget = gpuCompute.createRenderTarget();82 * myFilter2.uniforms.theTexture.value = myRenderTarget.texture;83 *84 * var outputRenderTarget = gpuCompute.createRenderTarget();85 *86 * // Now use the output texture where you want:87 * myMaterial.uniforms.map.value = outputRenderTarget.texture;88 *89 * // And compute each frame, before rendering to screen:90 * gpuCompute.doRenderTarget( myFilter1, myRenderTarget );91 * gpuCompute.doRenderTarget( myFilter2, outputRenderTarget );92 * 93 *94 *95 * @param {int} sizeX Computation problem size is always 2d: sizeX * sizeY elements.96 * @param {int} sizeY Computation problem size is always 2d: sizeX * sizeY elements.97 * @param {WebGLRenderer} renderer The renderer98 */99function GPUComputationRenderer( sizeX, sizeY, renderer ) {100 this.variables = [];101 this.currentTextureIndex = 0;102 var scene = new THREE.Scene();103 var camera = new THREE.Camera();104 camera.position.z = 1;105 var passThruUniforms = {106 texture: { value: null }107 };108 var passThruShader = createShaderMaterial( getPassThroughFragmentShader(), passThruUniforms );109 var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), passThruShader );110 scene.add( mesh );111 this.addVariable = function( variableName, computeFragmentShader, initialValueTexture ) {112 var material = this.createShaderMaterial( computeFragmentShader );113 var variable = {114 name: variableName,115 initialValueTexture: initialValueTexture,116 material: material,117 dependencies: null,118 renderTargets: [],119 wrapS: null,120 wrapT: null,121 minFilter: THREE.NearestFilter,122 magFilter: THREE.NearestFilter123 };124 this.variables.push( variable );125 return variable;126 127 };128 this.setVariableDependencies = function( variable, dependencies ) {129 variable.dependencies = dependencies;130 };131 this.init = function() {132 if ( ! renderer.extensions.get( "OES_texture_float" ) ) {133 return "No OES_texture_float support for float textures.";134 }135 if ( renderer.capabilities.maxVertexTextures === 0 ) {136 return "No support for vertex shader textures.";137 }138 for ( var i = 0; i < this.variables.length; i++ ) {139 var variable = this.variables[ i ];140 // Creates rendertargets and initialize them with input texture141 variable.renderTargets[ 0 ] = this.createRenderTarget( sizeX, sizeY, variable.wrapS, variable.wrapT, variable.minFilter, variable.magFilter );142 variable.renderTargets[ 1 ] = this.createRenderTarget( sizeX, sizeY, variable.wrapS, variable.wrapT, variable.minFilter, variable.magFilter );143 this.renderTexture( variable.initialValueTexture, variable.renderTargets[ 0 ] );144 this.renderTexture( variable.initialValueTexture, variable.renderTargets[ 1 ] );145 // Adds dependencies uniforms to the ShaderMaterial146 var material = variable.material;147 var uniforms = material.uniforms;148 if ( variable.dependencies !== null ) {149 for ( var d = 0; d < variable.dependencies.length; d++ ) {150 var depVar = variable.dependencies[ d ];151 if ( depVar.name !== variable.name ) {152 // Checks if variable exists153 var found = false;154 for ( var j = 0; j < this.variables.length; j++ ) {155 if ( depVar.name === this.variables[ j ].name ) {156 found = true;157 break;158 }159 }160 if ( ! found ) {161 return "Variable dependency not found. Variable=" + variable.name + ", dependency=" + depVar.name;162 }163 }164 uniforms[ depVar.name ] = { value: null };165 material.fragmentShader = "\nuniform sampler2D " + depVar.name + ";\n" + material.fragmentShader;166 }167 }168 }169 this.currentTextureIndex = 0;170 return null;171 };172 this.compute = function() {173 var currentTextureIndex = this.currentTextureIndex;174 var nextTextureIndex = this.currentTextureIndex === 0 ? 1 : 0;175 for ( var i = 0, il = this.variables.length; i < il; i++ ) {176 var variable = this.variables[ i ];177 // Sets texture dependencies uniforms178 if ( variable.dependencies !== null ) {179 var uniforms = variable.material.uniforms;180 for ( var d = 0, dl = variable.dependencies.length; d < dl; d++ ) {181 var depVar = variable.dependencies[ d ];182 uniforms[ depVar.name ].value = depVar.renderTargets[ currentTextureIndex ].texture;183 }184 }185 // Performs the computation for this variable186 this.doRenderTarget( variable.material, variable.renderTargets[ nextTextureIndex ] );187 }188 this.currentTextureIndex = nextTextureIndex;189 };190 this.getCurrentRenderTarget = function( variable ) {191 return variable.renderTargets[ this.currentTextureIndex ];192 };193 this.getAlternateRenderTarget = function( variable ) {194 return variable.renderTargets[ this.currentTextureIndex === 0 ? 1 : 0 ];195 };196 function addResolutionDefine( materialShader ) {197 materialShader.defines.resolution = 'vec2( ' + sizeX.toFixed( 1 ) + ', ' + sizeY.toFixed( 1 ) + " )";198 }199 this.addResolutionDefine = addResolutionDefine;200 // The following functions can be used to compute things manually201 function createShaderMaterial( computeFragmentShader, uniforms ) {202 uniforms = uniforms || {};203 var material = new THREE.ShaderMaterial( {204 uniforms: uniforms,205 vertexShader: getPassThroughVertexShader(),206 fragmentShader: computeFragmentShader207 } );208 addResolutionDefine( material );209 return material;210 }211 this.createShaderMaterial = createShaderMaterial;212 this.createRenderTarget = function( sizeXTexture, sizeYTexture, wrapS, wrapT, minFilter, magFilter ) {213 sizeXTexture = sizeXTexture || sizeX;214 sizeYTexture = sizeYTexture || sizeY;215 wrapS = wrapS || THREE.ClampToEdgeWrapping;216 wrapT = wrapT || THREE.ClampToEdgeWrapping;217 minFilter = minFilter || THREE.NearestFilter;218 magFilter = magFilter || THREE.NearestFilter;219 var renderTarget = new THREE.WebGLRenderTarget( sizeXTexture, sizeYTexture, {220 wrapS: wrapS,221 wrapT: wrapT,222 minFilter: minFilter,223 magFilter: magFilter,224 format: THREE.RGBAFormat,225 type: ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) ? THREE.HalfFloatType : THREE.FloatType,226 stencilBuffer: false,227 depthBuffer: false228 } );229 return renderTarget;230 };231 this.createTexture = function() {232 var a = new Float32Array( sizeX * sizeY * 4 );233 var texture = new THREE.DataTexture( a, sizeX, sizeY, THREE.RGBAFormat, THREE.FloatType );234 texture.needsUpdate = true;235 return texture;236 };237 this.renderTexture = function( input, output ) {238 // Takes a texture, and render out in rendertarget239 // input = Texture240 // output = RenderTarget241 passThruUniforms.texture.value = input;242 this.doRenderTarget( passThruShader, output);243 passThruUniforms.texture.value = null;244 };245 this.doRenderTarget = function( material, output ) {246 mesh.material = material;247 renderer.render( scene, camera, output );248 mesh.material = passThruShader;249 };250 // Shaders251 function getPassThroughVertexShader() {252 return "void main() {\n" +253 "\n" +254 " gl_Position = vec4( position, 1.0 );\n" +255 "\n" +256 "}\n";257 }258 function getPassThroughFragmentShader() {259 return "uniform sampler2D texture;\n" +260 "\n" +261 "void main() {\n" +262 "\n" +263 " vec2 uv = gl_FragCoord.xy / resolution.xy;\n" +264 "\n" +265 " gl_FragColor = texture2D( texture, uv );\n" +266 "\n" +267 "}\n";268 }...

Full Screen

Full Screen

TonemapGenerator.js

Source:TonemapGenerator.js Github

copy

Full Screen

1function TonemapGenerator(renderer, originalTonemap, initialRenderTarget) {2 3 this.renderer = renderer;4 var textureWidth = initialRenderTarget.width;5 var textureHeight = initialRenderTarget.height;6 var size = textureWidth * textureHeight;7 var renderTarget2 = new THREE.WebGLRenderTarget(textureWidth, textureHeight);8 renderTarget2.flipY = false;9 renderTarget2.generateMipMaps = false;10 renderTarget2.minFilter = THREE.NearestFilter;11 renderTarget2.magFilter = THREE.NearestFilter;12 var renderTargets = [initialRenderTarget, renderTarget2];13 this.renderTargets = renderTargets;14 var scene = new THREE.Scene();15 var camera = new THREE.OrthographicCamera( -1, 1, 1, -1, -1, 1 );16 this.scene = scene;17 this.camera = camera;18 this.material = new THREE.ShaderMaterial({19 side: THREE.DoubleSide,20 uniforms: {21 pixelSize: { type: 'v2', value: new THREE.Vector2(1.0 / textureWidth, 1.0 / textureHeight) },22 data: {type: 't', value: initialRenderTarget},23 originalTonemap: {type: 't', value: originalTonemap}24 },25 vertexShader: 26 [27 'varying vec2 vUv;',28 'void main() {',29 ' vUv = uv;',30 ' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); ',31 '}'32 ].join('\n'),33 fragmentShader: 34 [35 'uniform sampler2D data;',36 'uniform sampler2D originalTonemap;',37 'uniform vec2 pixelSize; ',38 'varying vec2 vUv; ',39 '#define LUT_FLIP_Y',40 'vec4 lookup(in vec4 textureColor, in sampler2D lookupTable1) {',41 ' textureColor = clamp(textureColor, 0.0, 1.0);', 42 43 ' textureColor.b = textureColor.b - 0.5;',44 ' textureColor.b = textureColor.b * 63.0 / 64.0;',45 ' textureColor.b = textureColor.b + 0.5;',46 ' float blueColor = floor(textureColor.b * 64.0);',47 48 ' vec2 quad1;',49 ' quad1.y = floor(blueColor / 8.0) / 8.0;',50 ' quad1.x = mod(blueColor, 8.0) / 8.0;',51 ' textureColor.g = textureColor.g - 0.5;',52 ' textureColor.g = textureColor.g * 63.0 / 64.0;',53 ' textureColor.g = textureColor.g + 0.5 + 1.01 / 128.0;',54 55 ' vec2 texPos1;',56 ' texPos1.x = quad1.x + textureColor.r * (1.0 / 8.0 - 1.0 / 512.0) ;',57 ' texPos1.y = quad1.y + textureColor.g * (1.0 / 8.0 - 1.0 / 512.0) ;',58 59 ' #ifdef LUT_FLIP_Y',60 ' texPos1.y = 1.0-texPos1.y;',61 ' #endif',62 63 ' lowp vec4 newColor1 = texture2D(lookupTable1, texPos1);',64 ' return newColor1;',65 '}',66 'void main() {',67 ' vec4 vacant = vec4(0.0, 1.0, 0.0, 1.0); ',68 69 ' float voxelSize = 1.0 / 128.0;',70 ' vec4 pos = texture2D(originalTonemap, vUv);',71 ' vec4 posUp = vec4(pos.x + 0.5 * voxelSize, pos.y + voxelSize * 2.0, pos.z, pos.w);',72 ' vec4 posDown = vec4(pos.x + 0.5 * voxelSize, pos.y - voxelSize * 2.0, pos.z, pos.w);',73 ' vec4 posRight = vec4(pos.x - voxelSize, pos.y, pos.z, pos.w);',74 ' vec4 posLeft = vec4(pos.x + voxelSize * 2.4, pos.y, pos.z, pos.w);',75 ' vec4 posFront = vec4(pos.x + voxelSize * 0.5, pos.y, pos.z + voxelSize * 2.4, pos.w);',76 ' vec4 posBack = vec4(pos.x + voxelSize * 0.5, pos.y, pos.z - voxelSize * 2.0, pos.w);',77 78 ' if (texture2D(data, vUv) == vacant) {',79 ' vec4 sample = lookup(posUp, data);',80 ' if (sample != vacant) {',81 ' gl_FragColor = sample;',82 ' } else {',83 ' sample = lookup(posDown, data);',84 ' if (sample != vacant) {',85 ' gl_FragColor = sample;',86 ' } else {',87 ' sample = lookup(posLeft, data);',88 ' if (sample != vacant) {',89 ' gl_FragColor = sample;',90 ' } else {',91 ' sample = lookup(posRight, data);',92 ' if (sample != vacant) {',93 ' gl_FragColor = sample;',94 ' } else {',95 ' sample = lookup(posFront, data);',96 ' if (sample != vacant) {',97 ' gl_FragColor = sample;',98 ' } else {',99 ' sample = lookup(posBack, data);',100 ' if (sample != vacant) {',101 ' gl_FragColor = sample;',102 ' } else {',103 ' gl_FragColor = texture2D(data, vUv);', 104 ' }',105 ' }',106 ' }',107 ' }',108 ' }',109 ' }',110 ' } else {',111 ' gl_FragColor = texture2D(data, vUv);',112 ' }',113 '}'114 ].join('\n')115 });116 var quad = new THREE.Mesh(117 new THREE.PlaneBufferGeometry( 2, 2 ),118 this.material119 );120 this.quad = quad;121 scene.add(quad); 122}123TonemapGenerator.prototype.update = function() {124 var renderTargets = this.renderTargets;125 for (var i = 0, iterations = 64; i < iterations; i++) {126 renderTargets.push(renderTargets.shift());127 this.material.uniforms.data.value = renderTargets[1];128 this.renderer.render(this.scene, this.camera, renderTargets[0]);129 }130 this.finalRenderTarget = renderTargets[0];131};132TonemapGenerator.prototype.dispose = function() {133 delete this.finalRenderTarget;134 for (var i = 0, l = this.renderTargets.length; i < l; i++) {135 this.renderTargets[i].dispose();136 delete this.renderTargets[i];137 }138 if (this.material.uniforms.data) {139 this.material.uniforms.data.value.dispose();140 delete this.material.uniforms.data.value; 141 }142 // if (this.material.uniforms.originalTonemap) {143 // this.material.uniforms.originalTonemap.value.dispose();144 // delete this.material.uniforms.originalTonemap.value; 145 // }146 this.scene.remove(this.quad);147 this.quad.geometry.dispose();148 this.quad.material.dispose();149 delete this.quad.geometry;150 delete this.quad.material;151 delete this.quad;152 delete this.scene;153 delete this.camera;154 delete this.material;155};...

Full Screen

Full Screen

SkinMaterial.js

Source:SkinMaterial.js Github

copy

Full Screen

1import {2 Color,3 LinearFilter,4 LinearMipmapLinearFilter,5 RGBFormat,6 ShaderMaterial,7 UniformsUtils,8 Vector2,9 WebGLRenderTarget10} from 'three'11import {12 BeckmannShader,13 SkinShader14} from '../shaders/SkinShader'15import { extendShaderMaterial } from '../utils/material'16import { BloomPass } from '../post-processing/BloomPass'17import { EffectComposer } from '../post-processing/EffectComposer'18import { RenderPass } from '../post-processing/RenderPass'19import { ShaderPass } from '../post-processing/ShaderPass'20import { TexturePass } from '../post-processing/TexturePass'21export function SkinMaterial (params = {}) {22 ShaderMaterial.call(this)23 this.type = 'SkinMaterial'24 this.color = new Color(0xffffff)25 this.map = null26 this.normalMap = null27 this.normalScale = new Vector2(1, 1)28 this.roughness = 0.1529 this.specular = new Color(0xffffff)30 this.specularBrightness = 131 this.renderTargetSize = 51232 this.passID = 133 this.materialUV = null34 this.renderTargets = null35 this.hasRenderedBeckmann = false36 this.extensions.derivatives = true37 this.setValues({38 fragmentShader: SkinShader.fragmentShader,39 vertexShader: SkinShader.vertexShader,40 uniforms: UniformsUtils.clone(SkinShader.uniforms),41 lights: true,42 fog: true,43 ...params44 })45 this.refreshUniforms()46}47extendShaderMaterial(SkinMaterial, {48 _uniformKeys: [49 'color',50 'map',51 'normalMap',52 'normalScale',53 'roughness',54 'specular',55 'specularBrightness',56 'passID'57 ],58 createMaterialUV (params) {59 return new SkinMaterial({60 ...params,61 vertexShader: SkinShader.vertexShaderUV,62 passID: 0,63 fog: false64 })65 },66 createRenderTargets (renderer, scene, camera, params) {67 const { renderTargetSize } = this68 function createRenderTarget () {69 const size = renderTargetSize70 return new WebGLRenderTarget(size, size, {71 minFilter: LinearMipmapLinearFilter,72 magFilter: LinearFilter,73 format: RGBFormat,74 stencilBuffer: false75 })76 }77 function createEffectComposer () {78 return new EffectComposer(renderer, createRenderTarget())79 }80 function createBloomPass (...args) {81 const pass = new BloomPass(...args)82 pass.clear = true83 return pass84 }85 const passes = {86 writeTexture: new RenderPass(scene, camera, this.materialUV, new Color(0x575757)),87 bloom1: createBloomPass(1, 15, 2, 512),88 bloom2: createBloomPass(1, 25, 3, 512),89 bloom3: createBloomPass(1, 25, 4, 512),90 beckmann: new ShaderPass(BeckmannShader)91 }92 const renderTargets = {93 beckmann: createEffectComposer(),94 material: createEffectComposer(),95 blur2: createEffectComposer(),96 blur3: createEffectComposer(),97 blur4: createEffectComposer()98 }99 renderTargets.material.addPass(passes.writeTexture)100 passes.readTexture = new TexturePass(renderTargets.material.getReadTexture())101 renderTargets.blur2.addPasses(passes.readTexture, passes.bloom1)102 renderTargets.blur3.addPasses(passes.readTexture, passes.bloom2)103 renderTargets.blur4.addPasses(passes.readTexture, passes.bloom3)104 renderTargets.beckmann.addPasses(passes.beckmann)105 this.uniforms.tBeckmann.value = renderTargets.beckmann.getWriteTexture()106 this.uniforms.tBlur1.value = renderTargets.material.getReadTexture()107 this.uniforms.tBlur2.value = renderTargets.blur2.getReadTexture()108 this.uniforms.tBlur3.value = renderTargets.blur3.getReadTexture()109 this.uniforms.tBlur4.value = renderTargets.blur4.getReadTexture()110 return renderTargets111 },112 refreshUniforms () {113 this._uniformKeys.forEach((key) => {114 this.uniforms[key].value = this[key]115 })116 },117 render (renderer, scene, camera) {118 const currentShadowMapEnabled = renderer.shadowMap.enabled119 renderer.shadowMap.enabled = false120 if (!this.renderTargets) {121 this.materialUV = this.createMaterialUV({122 color: this.color,123 map: this.map,124 normalMap: this.normalMap,125 normalScale: this.normalScale,126 roughness: this.roughness,127 specular: this.specular,128 specularBrightness: this.specularBrightness129 })130 this.renderTargets = this.createRenderTargets(renderer, scene, camera)131 }132 // TODO: Better way to refresh uniforms?133 this.refreshUniforms()134 this.materialUV.refreshUniforms()135 if (!this.hasRenderedBeckmann) {136 this.renderTargets.beckmann.render()137 this.hasRenderedBeckmann = true138 }139 this.renderTargets.material.render()140 this.renderTargets.blur2.render()141 this.renderTargets.blur3.render()142 this.renderTargets.blur4.render()143 renderer.shadowMap.enabled = currentShadowMapEnabled144 }...

Full Screen

Full Screen

FlowField.js

Source:FlowField.js Github

copy

Full Screen

1import * as THREE from 'three'2import Experience from '../Experience'3import vertexShader from '../shaders/flowField/vertex.glsl'4import fragmentShader from '../shaders/flowField/fragment.glsl'5export default class FlowField6{7 constructor(_count) 8 {9 this.experience = new Experience()10 this.renderer = this.experience.renderer11 this.scene = this.experience.scene12 this.count = _count13 this.width = 25614 this.height = Math.ceil(this.count / this.width)15 this.texture = null16 this.setBaseTexture()17 this.setRenderTargets()18 this.setEnvironment()19 this.setPlane()20 this.setDebugPlane()21 this.setFBOUv()22 }23 setBaseTexture()24 {25 // create a buffer with color data26 const size = this.width * this.height27 const data = new Float32Array(size * 4)28 for ( let i = 0; i < size; i ++ ) 29 {30 data[i * 3 + 0 ] = Math.random()31 data[i * 3 + 1 ] = Math.random()32 data[i * 3 + 2 ] = Math.random()33 data[i * 3 + 4 ] = Math.random()34 }35 this.baseTexture = new THREE.DataTexture( 36 data,37 this.width, 38 this.height, 39 THREE.RGBAFormat, 40 THREE.FloatType 41 )42 this.baseTexture.minFilter = THREE.NearestFilter43 this.baseTexture.magFilter = THREE.NearestFilter44 this.baseTexture.generateMipmaps = false45 }46 setRenderTargets()47 {48 this.renderTargets = {}49 this.renderTargets.a = new THREE.WebGLRenderTarget(50 this.width,51 this.height,52 {53 minFilter: THREE.NearestFilter,54 magFilter: THREE.NearestFilter,55 generateMipmaps: false,56 format: THREE.RGBAFormat,57 type: THREE.FloatType,58 encoding: THREE.LinearEncoding,59 depthBuffer: false,60 stencilBuffer: false61 }62 )63 this.renderTargets.b = this.renderTargets.a.clone()64 this.renderTargets.primary = this.renderTargets.a65 this.renderTargets.secondary = this.renderTargets.b66 }67 setEnvironment()68 {69 this.environment = {}70 this.environment.scene = new THREE.Scene()71 this.environment.camera = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5, 0.1, 10)72 this.environment.camera.position.z = 173 }74 setPlane()75 {76 this.plane = {}77 this.plane.geometry = new THREE.PlaneGeometry(1, 1, 1, 1)78 this.plane.material = new THREE.ShaderMaterial({79 uniforms: {80 uBaseTexture: { value: this.baseTexture },81 uTexture: { value: null }82 },83 vertexShader: vertexShader,84 fragmentShader: fragmentShader85 })86 this.plane.mesh = new THREE.Mesh(this.plane.geometry, this.plane.material)87 this.environment.scene.add(this.plane.mesh)88 }89 setDebugPlane()90 {91 this.debugPlane = {}92 this.debugPlane.geometry = new THREE.PlaneGeometry(1, this.height / this.width, 1, 1)93 this.debugPlane.material = new THREE.MeshBasicMaterial({transparent: true})94 this.debugPlane.mesh = new THREE.Mesh(this.debugPlane.geometry, this.debugPlane.material)95 this.scene.add(this.debugPlane.mesh)96 }97 setFBOUv()98 { 99 this.fboUv = {}100 101 this.fboUv.data = new Float32Array(this.count * 2)102 const halfExtentx = 1 / this.width / 2103 const halfExtentY = 1 / this.height / 2104 for(let i = 0; i < this.count; i++)105 {106 const x = (i % this.width) / this.width + halfExtentx107 const y = Math.floor(i / this.width) / this.height + halfExtentY108 this.fboUv.data[ i * 2 + 0] = x109 this.fboUv.data[ i * 2 + 1] = y110 }111 this.fboUv.attribute = new THREE.BufferAttribute(this.fboUv.data, 2)112 }113 update()114 {115 // Update material116 this.plane.material.uniforms.uTexture.value = this.renderTargets.secondary.texture117 this.renderer.instance.setRenderTarget(this.renderTargets.primary)118 this.renderer.instance.render(this.environment.scene, this.environment.camera)119 this.renderer.instance.setRenderTarget(null)120 // Swap121 const temp = this.renderTargets.primary122 this.renderTargets.primary = this.renderTargets.secondary123 this.renderTargets.secondary = temp124 // Update texture125 this.texture = this.renderTargets.secondary.texture126 // Update debug plane127 this.debugPlane.material.map = this.renderTargets.secondary.texture128 }...

Full Screen

Full Screen

ShaderMaterial.js

Source:ShaderMaterial.js Github

copy

Full Screen

1/**2 * Helper for making ShaderMaterials that read from textures and write out processed fragments.3 */4ThreeRTT.ShaderMaterial = function (renderTargets, vertexShader, fragmentShader, textures, uniforms) {5 // Autoname texture uniforms as texture1, texture2, ...6 function textureName(j) {7 return 'texture' + (j + 1);8 }9 // Allow for array of textures.10 if (textures instanceof Array) {11 var object = {};12 _.each(textures, function (texture, j) {13 object[textureName(i)] = texture;14 });15 textures = object;16 }17 // Allow passing single texture/object18 else if (textures instanceof THREE.Texture19 || textures instanceof ThreeRTT.World20 || textures instanceof THREE.WebGLRenderTarget) {21 textures = { texture1: textures };22 }23 // Accept one or more render targets as input for reading.24 if (!(renderTargets instanceof Array)) {25 renderTargets = [renderTargets];26 }27 // Accept World/Stage/RenderTarget classes28 renderTargets = _.map(renderTargets, function (target) {29 return ThreeRTT.toTarget(target);30 });31 // Add sample step uniform.32 uniforms = _.extend(uniforms || {}, {33 sampleStep: {34 type: 'v2',35 value: new THREE.Vector2()//,36 }//,37 });38 // Make uniforms for input textures.39 _.each(textures, function (texture, key) {40 uniforms[key] = {41 type: 't',42 value: ThreeRTT.toTexture(texture)//,43 };44 });45 // Use render targets as input textures unless overridden.46 _.each(renderTargets, function (target, j) {47 // Create texture1, texture2, ... uniforms.48 var key = textureName(j);49 if (target.read && !uniforms[key]) {50 uniforms[key] = {51 type: 't',52 value: target.read()//,53 };54 }55 });56 // Alias 'texture1' to 'texture'.57 if (uniforms.texture1 && !uniforms.texture) {58 uniforms.texture = uniforms.texture1;59 }60 // Update sampleStep uniform on render of source.61 var callback;62 renderTargets[0].on('render', callback = function () {63 var texture = renderTargets[0].options.texture;64 var wrapS = texture.wrapS;65 var wrapT = texture.wrapT;66 var offset = {67 1000: 0, // repeat68 1001: 1, // clamp69 1002: 0, // mirrored70 };71 var value = uniforms.sampleStep.value;72 value.x = 1 / (renderTargets[0].width - (offset[wrapS]||0));73 value.y = 1 / (renderTargets[0].height - (offset[wrapT]||0));74 });75 // Lookup shaders and build material76 var material = new THREE.ShaderMaterial({77 uniforms: uniforms,78 vertexShader: ThreeRTT.getShader(vertexShader || 'generic-vertex'),79 fragmentShader: ThreeRTT.getShader(fragmentShader || 'generic-fragment-texture')//,80 });81 return material;...

Full Screen

Full Screen

main.js

Source:main.js Github

copy

Full Screen

1var THREE = require('Three');2// Scene3var Camera = require('./scene/camera');4var Lighting = require('./scene/lighting');5var Renderer = require('./scene/renderer');6// Elements7var BunchOfCubes = require('./elements/bunch-of-cubes');8var Main = function() {9 this.renderTargets = [];10 this.setupScene();11 this.setupElements();12 this.animationLoop();13};14Main.constructor = Main;15Main.prototype.animationLoop = function() {16 requestAnimationFrame(this.animationLoop.bind(this));17 this.render();18};19Main.prototype.setupScene = function() {20 this.scene = new THREE.Scene();21 this.container = new THREE.Object3D();22 this.container.z = -300;23 this.scene.add(this.container);24 this.camera = new Camera();25 this.container.add(this.camera);26 this.renderTargets.push(this.camera);27 this.lighting = new Lighting();28 this.container.add(this.lighting);29 this.renderer = new Renderer({30 alpha: true,31 antialias: true,32 devicePixelRatio: window.devicePixelRatio || 133 });34};35Main.prototype.setupElements = function() {36 let bunchOfCubes = new BunchOfCubes();37 this.addRenderTarget(bunchOfCubes);38 this.container.add(bunchOfCubes);39};40/**41 * Our main render loop.42 **/43Main.prototype.render = function() {44 for (var i = 0; i < this.renderTargets.length; i++) {45 this.renderTargets[i].render();46 }47 this.renderer.render(this.scene, this.camera)48};49/**50 * Adds a target to be called during the render loop. The target object MUST51 * have a public render method to call.52 * @param {object} target Target object to call during render53 */54Main.prototype.addRenderTarget = function(target) {55 this.renderTargets.push(target);56};57/**58 * Removes a target from being called during the render loop.59 * @param {object} target Target object to call during render60 */61Main.prototype.removeRenderTarget = function(target) {62 this.renderTargets.pop(target);63};...

Full Screen

Full Screen

Renderer.js

Source:Renderer.js Github

copy

Full Screen

1import { assertInstance } from '../Util/Assertions.js';2import { RenderTarget } from './RenderTarget.js';3class RendererOptions {4 constructor() {5 this.renderTargets = new Set();6 }7 /**8 * renderTargets: Set[RenderTarget]9 * All render targets are rendered when the Renderer receives data through render()10 */11 withRenderTarget(renderTarget) {12 assertInstance(renderTarget, RenderTarget);13 this.renderTargets.add(renderTarget);14 return this;15 }16 build() {17 return new Renderer(this);18 }19}20class Renderer {21 constructor(options) {22 assertInstance(options, RendererOptions);23 this._renderTargets = options.renderTargets;24 }25 /**26 * deregister(renderTarget) => bool27 * Removes renderTarget (an instance of RenderTarget) from renderTargets to28 * no longer be updated when new data is received29 * Returns true if renderTarget was successfully removed, false otherwise30 */31 deregister(renderTarget) {32 return this._renderTargets.delete(renderTarget);33 }34 /**35 * register(renderTarget)36 * Adds renderTarget (an instance of RenderTarget) to renderTargets to be37 * updated when new data is received38 */39 register(renderTarget) {40 assertInstance(renderTarget, RenderTarget);41 this._renderTargets.add(renderTarget);42 }43 /**44 * render(data)45 * Renders each renderTarget in renderTargets with data (response object from the Oracle)46 * If render returns a non-null value, calls onLoad() on it (assuming the value is a DOMNode)47 */48 render(data) {49 this._renderTargets.forEach(renderTarget => {50 renderTarget.render(data)51 .catch(err => {52 console.error(`Failed to render ${renderTarget.constructor.name}: ${err}`);53 });54 });55 }56}57export {58 Renderer,59 RendererOptions...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import {renderTargets} from 'cypress-visual-regression';2describe('My First Test', () => {3 it('Does not do much!', () => {4 cy.get('input[type="text"]').type('Cypress');5 renderTargets(['input[type="submit"]', 'input[type="text"]'], {6 });7 });8});9const {addMatchImageSnapshotPlugin} = require('cypress-image-snapshot/plugin');10module.exports = (on, config) => {11 addMatchImageSnapshotPlugin(on, config);12};13import {addMatchImageSnapshotCommand} from 'cypress-image-snapshot/command';14addMatchImageSnapshotCommand();15{16 "env": {17 },18 "reporterOptions": {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('Test', () => {2 it('renders', () => {3 cy.get('input[type="text"]').type('Hello')4 cy.get('input[type="text"]').type('{enter}')5 cy.get('input[type="text"]').type('World')6 cy.get('input[type="text"]').type('{enter}')7 })8})9import './commands'10Cypress.Commands.add('getRenderedText', { prevSubject: true }, (subject) => {11 return cy.window().then((win) => {12 return win.renderTargets(subject)13 })14})15it('renders', () => {16 cy.get('input[type="text"]').type('Hello')17 cy.get('input[type="text"]').type('{enter}')18 cy.get('input[type="text"]').type('World')19 cy.get('input[type="text"]').type('{enter}')20 cy.get('input[type="text"]').getRenderedText()21})22module.exports = (on, config) => {23 on('task', {24 log(message) {25 console.log(message)26 }27 })28}29{30}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('test', function() {2 it('renders', function() {3 cy.renderTargets('test.html', {4 })5 })6})7const renderTargets = require('cypress-visual-regression/dist/plugin')8module.exports = (on, config) => {9 on('task', {10 })11}12import 'cypress-visual-regression/dist/commands'

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe("renderTargets", () => {2 it("renders targets", () => {3 cy.renderTargets(["#target", "#target2"]);4 });5});6describe("renderTargets", () => {7 it("renders targets", () => {8 cy.renderTargets(["#target", "#target2"]);9 });10});11describe("renderTargets", () => {12 it("renders targets", () => {13 cy.renderTargets(["#target", "#target2"]);14 });15});16describe("renderTargets", () => {17 it("renders targets", () => {18 cy.renderTargets(["#target", "#target2"]);19 });20});21describe("renderTargets", () => {22 it("renders targets", () => {23 cy.renderTargets(["#target", "#target2"]);24 });25});26describe("renderTargets", () => {27 it("renders targets", () => {28 cy.renderTargets(["#target", "#target2"]);29 });30});31describe("renderTargets", () => {32 it("renders targets", () => {33 cy.renderTargets(["#target", "#target2"]);34 });35});36describe("renderTargets", () => {37 it("renders targets", () => {38 cy.renderTargets(["#target", "#target2"]);39 });40});41describe("renderTargets", () => {42 it("renders targets", () => {43 cy.renderTargets(["#target", "#target2"]);44 });45});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1it('should test renderTargets', () => {2 cy.get('.navbar').renderTargets()3})4Cypress.Commands.add('renderTargets', () => {5 cy.get('h1').then($h1 => {6 cy.wrap($h1).should('contain', 'Cypress')7 cy.wrap($h1).should('have.css', 'color', 'rgb(255, 255, 255)')8 cy.wrap($h1).should('have.css', 'font-size', '50px')9 })10})11module.exports = (on, config) => {12 on('task', {13 log (message) {14 console.log(message)15 },16 })17}18Cypress.Commands.add('renderTargets', () => {19 cy.get('h1').then($h1 => {20 cy.wrap($h1).should('contain', 'Cypress')21 cy.wrap($h1).should('have.css', 'color', 'rgb(255, 255, 255)')22 cy.wrap($h1).should('have.css', 'font-size', '50px')23 })24})25import './commands'26{27 "compilerOptions": {28 },29}30{31 "reporterOptions": {32 }33}34{

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import React from 'react';2import { render } from 'react-dom';3import App from './App';4render(<App />, document.getElementById('root'));5describe('App', () => {6 it('renders', () => {7 cy.contains('h1', 'Hello, world!');8 });9});10import React, { Component } from 'react';11import './App.css';12class App extends Component {13 constructor(props) {14 super(props);15 this.state = { time: new Date().toLocaleTimeString() };16 }17 render() {18 return (19 <h1>Hello, world! It is now {this.state.time}.</h1>20 <button onClick={() => this.setState({ time: new Date().toLocaleTimeString() })}>Change time</button>21 );22 }23}24export default App;25describe('App', () => {26 it('renders', () => {27 cy.contains('h1', 'Hello, world! It is now 13:00.');28 cy.get('button').click();29 cy.contains('h1', 'Hello, world! It is now 13:01.');30 });31});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1cy.get('input').type('Amit')2cy.get('#submit').click()3cy.get('#myDiv').should('have.text','Amit')4cy.get('input').clear().type('Amit2')5cy.get('#submit').click()6cy.get('#myDiv').should('have.text','Amit2')7cy.get('input').type('Amit')8cy.get('#submit').click()9cy.get('#myDiv').should('have.text','Amit')10cy.get('input').clear().type('Amit2')11cy.get('#submit').click()12cy.get('#myDiv').should('have.text','Amit2')

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('Render test', () => {2 it('renders', () => {3 cy.renderTargets(4 {5 }6 })7})8import React from 'react';9import {renderTargets} from 'cypress-react-unit-test';10const App = () => {11 return (12 );13}14export default renderTargets(App);15describe('Render test', () => {16 it('renders', () => {17 cy.renderTargets(18 {19 }20 })21})22import React from 'react';23import {renderTargets} from 'cypress-react-unit-test';24const App = () => {25 return (26 );27}28export default renderTargets(App);29describe('Render test', () => {30 it('renders', () => {31 cy.renderTargets(32 {33 }34 })35})36import React from 'react';37import {renderTargets} from 'cypress-react-unit-test';38const App = () => {39 return (40 );41}42export default renderTargets(App);

Full Screen

Full Screen

Cypress Tutorial

Cypress is a renowned Javascript-based open-source, easy-to-use end-to-end testing framework primarily used for testing web applications. Cypress is a relatively new player in the automation testing space and has been gaining much traction lately, as evidenced by the number of Forks (2.7K) and Stars (42.1K) for the project. LambdaTest’s Cypress Tutorial covers step-by-step guides that will help you learn from the basics till you run automation tests on LambdaTest.

Chapters:

  1. What is Cypress? -
  2. Why Cypress? - Learn why Cypress might be a good choice for testing your web applications.
  3. Features of Cypress Testing - Learn about features that make Cypress a powerful and flexible tool for testing web applications.
  4. Cypress Drawbacks - Although Cypress has many strengths, it has a few limitations that you should be aware of.
  5. Cypress Architecture - Learn more about Cypress architecture and how it is designed to be run directly in the browser, i.e., it does not have any additional servers.
  6. Browsers Supported by Cypress - Cypress is built on top of the Electron browser, supporting all modern web browsers. Learn browsers that support Cypress.
  7. Selenium vs Cypress: A Detailed Comparison - Compare and explore some key differences in terms of their design and features.
  8. Cypress Learning: Best Practices - Take a deep dive into some of the best practices you should use to avoid anti-patterns in your automation tests.
  9. How To Run Cypress Tests on LambdaTest? - Set up a LambdaTest account, and now you are all set to learn how to run Cypress tests.

Certification

You can elevate your expertise with end-to-end testing using the Cypress automation framework and stay one step ahead in your career by earning a Cypress certification. Check out our Cypress 101 Certification.

YouTube

Watch this 3 hours of complete tutorial to learn the basics of Cypress and various Cypress commands with the Cypress testing at LambdaTest.

Run Cypress automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful