# Render to smaller texture then take that to screen quad **URL:** \ **Category:** Questions\ **Created:** [December 13, 2021, 9:57pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041 "2021-12-13T21:57:43Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 13, 2021, 9:57pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/1 "2021-12-13T21:57:43Z")
Basically I am working on a sphereTracing Renderer. However when a lot of objects are added obviously it slows down. I am considering different methods to speed things up, as selected by the user. One is to render to a smaller view then use that as a texture for a larger screen quad. However I can’t seem to find any examples of what should be fairly straight forward. I am obviously missing something. The engine is assosciated with a particular context. So I have been looking at textureCanvas and RenderTargets. Basically I want to render my scene to a texture Use said texture to render to a different scene which is larger. I have two scenes, one with all the objects, one with a single screen quad. Just need an example of where to begin with this, as all the renderTarget examples also render the original scene, not just to the target. Is there anyway to turn this off? ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [December 13, 2021, 10:30pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/2 "2021-12-13T22:30:15Z")
> [@Depth Sorted Ray Marching PostProccess](https://forum.babylonjs.com/t/depth-sorted-ray-marching-postproccess/7030): > > Thanks to a little help from @Evgeni_Popov with my math and depth calculations, we were able to create a depth sorted post effect that will allow raymarched scenes to be rendered with your normal scene. [https://playground.babylonjs.com/#6Z7SIZ#16](https://playground.babylonjs.com/#6Z7SIZ#16) Lots of work to go into it still, but here eventually I plan on passing all of BJS standard material stuff to the ray marched surfaces and you will be able to hopefully not tell the difference for general purposes. -TODO: Volumetric Absorption Ref… Just look up Pryme8 and Ray marching on the forum and playground search, I’ve got quite a few playgrounds and different marching setups. There are procedural texture examples, render target examples, post process examples. I’ve done multiples of each you will just have to do some code diving. You might have to rollback what version of BJS you are on too for some of them to work. ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 13, 2021, 10:43pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/3 "2021-12-13T22:43:16Z")
Thanks for this. Ironically the raymarching I am fairly happy with. As it is a program to create raymarched models and is a lot of fun to play with. Just can’t figure out how to NOT render to a full sized quad. Obviously it will be a lot faster rendering to a texture 0.25 the size, though you lose detail. But ultimately I want to use that texture and display at full size. Figure a little fuzziness is an ok trade off for speed if you can turn it on and off. Trouble is I cant seem to turn off the full sized render even if my rendertargets are much smaller which defeats the whole purpose. I can render to a separate canvas, but this needs a separate context (smaller and therefore a new engine). There must be a better way. ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [December 13, 2021, 10:55pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/4 "2021-12-13T22:55:30Z")
Use a custom procedural texture then you can set it’s size directly. If your not sure how drop your RTT setup and ill convert it for you when I get a chance. ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 13, 2021, 11:02pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/5 "2021-12-13T23:02:03Z")
Agreed. I can produce a smaller texture and it is nice. But it still draws the large one at the same time it is producing it. Which defeats the purpose of drawing a smaller texture. However, just discovered the engine.setsize. so hopefully by setting that to the size of the smaller texture before the first pass, then back to full size at second the problem will be solved. Hopefully I can do that 😃 ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 13, 2021, 11:04pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/6 "2021-12-13T23:04:49Z")
Either that or hot swap the engine contexts. So that it points to a texture and its context. But think you need to have 2 engines going for that. ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 13, 2021, 11:06pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/7 "2021-12-13T23:06:39Z")
In all the examples I can find the original objects are drawn to the main scene (as they are in it) not just to the texture. ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [December 13, 2021, 11:11pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/8 "2021-12-13T23:11:12Z")
Scaling the texture up is little to no impact, I’m confused about your concern? ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 13, 2021, 11:27pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/9 "2021-12-13T23:27:22Z")
Basically the problem is I want it to not do the raymarched scene at full size. but to a smaller texture. But although I can do it to a smaller texture which works fine. I cannot find a way to stop it simultaneously drawing the full size scene as well, as this creates it ready for the next phase of processing. The point it if it does this then the raymarched scene is rendered at full size it just produces on full sized output and 1 smaller one simultaneously. I am trying to prevent the full size generation as this is what takes the time. ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 13, 2021, 11:30pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/10 "2021-12-13T23:30:18Z")
So I am basically trying to render my scene to a small texture ONLY. And then use that texture to project it onto a larger full screen quad. But all the examples I can find draw the initial scene at the full size of its context while producing smaller/larger textures. ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 13, 2021, 11:39pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/11 "2021-12-13T23:39:39Z")
Just discovered the engine can now have multiple canvases assigned. That should solve the problem. As I can draw to a smaller canvas then use the rendertarget from that as the texture for the larger canvas. ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [December 14, 2021, 5:14am UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/12 "2021-12-14T05:14:12Z")
If you just do a procedural texture its the same thing. I’m confused? If you use a PT you could set it to 1x1 and it would only ever worry about doing 1 pixel in the raymarch pass. Im not too sure what you are trying to accomplish now or why you would do it that way, but kudos if you figured it out. Sounds like you might not being doing something different then I understand, you are composing the entire scene in a shader right? If so then it sounds like you are taking extra steps to accomplish the same thing, all you need is a PT and a postPass and you can render whatever to fullscreen from a texture ezpz with no (minimalistic) impact. Maybe pm me your playground and I could give you a better rundown. \<3 ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 14, 2021, 11:35am UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/13 "2021-12-14T11:35:03Z")
Thanks very much. I have figured out a way to do it but it is more of a work around. Would be nice to know how to do it properly. This is where I have been experimenting. Tried a preProcess most recently. [https://playground.babylonjs.com/#4V2MG8#9](https://playground.babylonjs.com/#4V2MG8#9) I am having a few probs with it. a) The texture on the box does not show up until you get close. So obviously the preprocess is using some different camera settings. Not sure why. b) The bigger you make the texture the more of the scene gets put onto it. Whereas I am trying to project the entire scene onto the texture regardless of the texture size. c) I do not want the objects in the scene displayed anywhere other than the textured box. Unfortunately my understanding of Babylon is still insufficient. Thanks for you help and understanding. ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 14, 2021, 11:37am UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/14 "2021-12-14T11:37:06Z")
The box atm appears blank until very close because of the small texture size. Putting it up to 1024 helps. ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 14, 2021, 11:55am UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/15 "2021-12-14T11:55:49Z")
The way I am currently getting around this is by rendering to a texture the same size as the main canvas. But using a viewport to generate the texture the size I want. With the inverse of the scaling applied to the FragCoords to scale the SphereTrace scene down to the same size. Then I use this section of the renderTexture to render full size onto the canvas. But it is a bit of a trashy way of doing it as most of the rendertexture is unused if doing a large reduction. But it does work 😃 ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [December 14, 2021, 5:13pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/16 "2021-12-14T17:13:29Z")
Cool, Ill check this out as soon as I get a chance here! ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 14, 2021, 7:45pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/17 "2021-12-14T19:45:17Z")
Have it working a bit better now. a) and b) solved by having the texture the same size as the canvas at the start (i.e when the engine is created). [https://playground.babylonjs.com/#4V2MG8#12](https://playground.babylonjs.com/#4V2MG8#12) So now have to figure out how to exclude the raymarch scene from the main pass. As you can see it sticking out around the box 😛 ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 14, 2021, 7:47pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/18 "2021-12-14T19:47:06Z")
Obviously having the rendertexture a different size (and probably more importantly aspect ratio different) throws the raymarcher out which makes sense as it use gl.fragCoords to work out the ray origin. ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 14, 2021, 9:09pm UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/19 "2021-12-14T21:09:40Z")
Another Oddity I don’t understand is as soon as I uncomment the viewport. Which currently is the same size as the canvas it stops displaying properly. The only reason for this would be an upset to the gl\_fragCoords? Best Working so far [https://playground.babylonjs.com/#4V2MG8#13](https://playground.babylonjs.com/#4V2MG8#13) Weird with ViewPort (currently commented) [https://playground.babylonjs.com/#4V2MG8#16](https://playground.babylonjs.com/#4V2MG8#16) ---
**Author:** ![SarkyKeshy](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@SarkyKeshy](https://forum.babylonjs.com/u/SarkyKeshy)\ **Post date:** [December 15, 2021, 4:31am UTC](https://forum.babylonjs.com/t/render-to-smaller-texture-then-take-that-to-screen-quad/26041/20 "2021-12-15T04:31:29Z")
[RayMarching to three separate bounding boxes with surface displacement | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#4V2MG8#20) Viewport problem solved. Always helps to fully read the spec. Sizes 0-1 not # pixels. Also needed to update the resolution in the raymarcher to reflect the view size. So almost there.