# Eye Texture Raytracing demo

**URL:** <https://discourse.threejs.org/t/eye-texture-raytracing-demo/27034>\
**Category:** Questions\
**Tags:** upgrading\
**Created:** [June 8, 2021, 11:03am UTC](https://discourse.threejs.org/t/eye-texture-raytracing-demo/27034 "2021-06-08T11:03:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shange](https://avatars.discourse-cdn.com/v4/letter/s/46a35a/32.png) [@Shange](https://discourse.threejs.org/u/Shange)\
**Post date:** [June 8, 2021, 11:03am UTC](https://discourse.threejs.org/t/eye-texture-raytracing-demo/27034/1 "2021-06-08T11:03:34Z")

</div>

I want to replicate the effect from [Eye texture raytracing demo (vill.ee)](http://www.vill.ee/eye/) I have done everything exactly the same but when I run the program it says:

“THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog invalid shaders THREE.WebGLShader: gl.getShaderInfoLog() fragment  
ERROR: 0:154: ’  
’ : extension directive must occur before any non-preprocessor tokens in ESSL3”

I have no idea what this means, can anybody help? feel free to inspect element to look at my code here: [Three js (neocities.org)](https://shange-fagan.neocities.org/EyeTextureRaytracing.html)

 ![Screenshot 2021-06-08 at 12.02.18](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/d/5ddea52fe2f8b930a7c88f22d73d6534ce153050.jpeg)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 8, 2021, 11:59am UTC](https://discourse.threejs.org/t/eye-texture-raytracing-demo/27034/2 "2021-06-08T11:59:54Z")

</div>

The original demo uses a `three.js` version of `r65`. Porting such old code is normally only possible by applying migration tasks.

For now I suggest you are using [WebGL1Renderer](https://threejs.org/docs/index.html?q=webgl1#api/en/renderers/WebGL1Renderer) and then manage WebGL extensions via the [extensions](https://threejs.org/docs/index.html?q=shaderma#api/en/materials/ShaderMaterial.extensions) property of `ShaderMaterial`. Just set the respective entries to `true` if you need certain extensions (like `derivatives`).

---

<div class="post-metadata">

**Author:** ![Shange](https://avatars.discourse-cdn.com/v4/letter/s/46a35a/32.png) [@Shange](https://discourse.threejs.org/u/Shange)\
**Post date:** [June 8, 2021, 2:33pm UTC](https://discourse.threejs.org/t/eye-texture-raytracing-demo/27034/3 "2021-06-08T14:33:17Z")

</div>

How do I use [WebGL1Renderer](https://threejs.org/docs/index.html?q=webgl1#api/en/renderers/WebGL1Renderer)?

so all I need to do is add

this.extensions = {  
derivatives: true, // set to use derivatives  
fragDepth: false, // set to use fragment depth values  
drawBuffers: false, // set to use draw buffers  
shaderTextureLOD: false // set to use shader texture LOD  
};

to my code and it will work?

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [June 8, 2021, 2:42pm UTC](https://discourse.threejs.org/t/eye-texture-raytracing-demo/27034/4 "2021-06-08T14:42:34Z")

</div>

No, not quite. Go to [Migration Guide · mrdoob/three.js Wiki · GitHub](https://github.com/mrdoob/three.js/wiki/Migration-Guide)

scroll aaaaaall the way down to r65-\>r66, and work up from there. Then, if you have any issues - we might be able to help.