A Question about WebGL and its Implementation in C3?

  • Hey all,

    So... I've been using C3 for a little while now, and am starting to hit a lot of walls with my goals...

    At this point, my goal is a Pseudo3D engine using billboard sprite and matrix multiplication to simulate 3D space... ( yes I realize C3 is not intended for 3D, but I'm looking for advanced Pseudo3D, which my game is dependent on )

    While researching matrix mathematics for 3D point calculations, I realized that WebGl is inherently 3D capable and actually has a lot of functionality for matrix applications.

    ( see: developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web )

    ( and: developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection )

    So my question is... how accessible/inaccessible is this kind of application within C3? Like can I try writing a shader that will work something like the fiddle's presented in these examples? Is the built-n JS open enough to allow for this sort of thing? I've got a working demo using sprites, events, and string parsing for the matrix math... but its slow, clunky, and while it works as a demo, its not great for the actual game...

    I'm really hoping that what I'm looking for is possible in C3 in an efficient and usable way, as otherwise I'll have to jump ship for something more suitable to my needs... which I'd rather not do, as I love using C3 and anything else will be much slower due to learning curve...

    So please advise... am I trying to jam a square peg into a round hole here? Or is the round hole flexible enough for me to get it in there anyway?

    Feeling pretty defeated and deflated atm tbh...

    Thank you for any advice/responses

  • More like a piece of notebook paper into a cardboard box.

    On this I would say go with Godot, or Unity.

    Both have some forms of visual editor. I believe Unity is getting ready to add an official version.

    Although I imagine it will be a little to al dente for my liking.

  • Thank you for the respose!

    I have explored proper 3D engines already, and while they make this aspect of the game-engine a little easier to achieve, they do NOT get me the desired look without a lot of workarounds...

    The Goals are:

    - Clean and crisp pixel art at low 16:9 resolution ( 480x240 )

    - 3D matrix point calculations for the a 3rd Person, behind the player style camera

    - Billboard sprites that exist at each point to help generate the game world

    - Shaders for special fx, vfx, and stylised depth simulation

    ( The real goal is to explore the way games might have looked if polygons had never taken over... lol )

  • I think you're wasting your time by attempting that stuff in C3. I would personally just move to Unity. It has built in matrix/quaternion class that gives you everything you need for the complicated 3D math stuff. There is a ton of tutorials on how to get crisp pixel art too. It's actually super simple. A billboard is just a plane that is always rotated to face the camera (super easy in Unity), and Unity has a top of the line shader graph / vfx graph for creating visual effects.

    Or if you're interested in doing all the 3D stuff yourself from scratch, just go learn openGL: open.gl

  • Here's a couple things done in C3 that might be interesting / inspiring for you to check out (the FQZ plugin is mine.)

    Raycasting in C3

    uberdroidgames.itch.io/construct-ray-casting-game-kit

    3D Sprites (I have an example which uses glmatrix.net )

    kindeyegames.itch.io/funkyquadz-for-construct

    - An issue from your list: effects not supported in FQZ due to how C3 handles effects.

    I do go back and forth myself, I like using FQZ for relatively simple 3D eye candy, but if I was going to do a full blown 3D game, I think I would look something else that also handled 3D physics, etc. (e.g. Unity, UE, Godot, Babylon, etc.) On the other hand for 2D gameplay with 3D eye candy (e.g. Doom like, my 360 view game, simple 2.5D driving game, etc.) C3 + some 3D tools can be a fun tool to use.

  • I can't say that there's much appealing to me about Unity or Godot... I've attempted both in the past and found them incredibly frustrating and cumbersome... and really have never been able to achieve the results I've wanted...

    Something like...

    youtu.be/QoGaj2HnVUI

    ... is probably closer to what my goal is, though different still beyond this of course!

    Given that WebGl is inherently 3D capable in terms of math, my original question is still... do I have access to that with C3 ( see example fiddles in the original post ), otherwise it seems like C3 took a 3D ready system ( in terms of its math capabilities at least ) and limited it to 2D... so all I'm looking for is a way to get access back to that aspect of WebGl...

    There are far too many reasons for wanting to use C3 for this than there are for me to stop, re-attempt to learn an entirely new piece of software ( to me ), and then start the project all over again, without any of the engine elements that are already in place.

    Is it not possible to use the JS capabilities or create a WebGl shader to attempt any of this? It's literally just about feeding values into a matrix and then doing some math on that matrix. As mentioned I have a working demo for it, but its janky and slow with the event system, and not quite usable for the game itself. So if I had a way to speed up the math, ( and not have to store Matrices as crazy long strings that I have to parse with "tokenAt()" ) then I feel like it would be where I need it to be.

    tl,dr: I don't want any Polygons, Voxel Models, Wolfenstein/Doom clone engines, whatsoever... the goal is to stay as far away from 3D visuals as possible, with the exception of Billboard Sprites to represent a noisemap/level layouts using matrix math

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I am not sure that I understand exactly what you want, but in case it helps, my FQZ plugin is using the 3D webgl aspect of C3 to make quads that could be used as 3D billboard textures.

    It has a mode where you can specify the x,y,z of each vertex of a quad. You could then use glmatrix.js and C3 scripting to do matrix math and set the position of the quad. I have included a mode where you can pull out the current camera P and MV matrices also if needed. Or you can just control the camera directly using camera location and look at.

    Here's an example of it in use (this is with just billboard textures rotated to player view, etc.)

    youtu.be/a-vo5fYRXvo

    I am over on the Construct Community Discord, DM me there and I'll give you a key to try it if you want.

    I don't know of another way to use C3 w/ 3D except for using Z elevation with sprites.

    In your example youtube video, I think most (all?) of that could be done with almost vanilla C3. However it sounds like that still is not what you want?

    Here's an example:

    alcex.itch.io/psuedo-3d-racer-in-construct-3

    Another example of matrix math w/ my plugin is this project (matrix math done in events, etc.):

    mitsu-studios.itch.io/3djs

  • He wants Mode7.

  • No, not Mode7 lol. Specifically not mode7 lol.

    I'll try to give a clearer picture... ( I should prolly just mock up a screenshot lol )

    - I want to take a heightmap and send it to a 2D array

    - then each array element gives me 3D world coords XYZ ( based on the elements XY in the array, and Z being the values stored at the XY )

    - I want to send those coords into the webgl matrix calculations so that I now have my screen space coords for all of my array XYZ values that fall within the "camera" frustum ( clip space )

    - Finally, I want to represent those array elements/points onscreen using scaled sprites ( which would act as billboard sprites by always facing camera )

    Not sure if that helps paint a clearer picture or not... but its literally just the accelerated matrix math that I want. I have a couple leads I'll be trying and will follow up here with any successes/failures/noteworthy discoveries.

    I've always disliked the look of polygons ( though I AM definitely growing a fondness for low-poly! Mega Man Legends 1 and 2 are gorgeous!!) and Mode7 has always been too flat for me... its really only useful if you add billboard sprites to it to give it some verticality, but even then, is still unbearably flat... So this is my attempt to imagine games of the early polygon era, as if polygons were never invented and Sega's Super Scaler arcade tech was the direction things went, so more sprites, larger sprites, more animation frames for rotations, etc.

    This game will, ideally, be entirely handmade pixel art, using 3D Point math to modify sprite scale/z-soting/depth effects to create a pseudo3D world, no 3D physics, just display rendering

  • No that's Mode7, or more precisely 2.5d, the 2d to 3d coordinates, or projection.

    Its just that its difficult to match the graphics in fx to the 2d coordinates.

  • Oh, ok, I've always thought mode7 was a scanline trick with a large texture that simulated a 100% flat image plane with false perspective, so it could look like a large flat ground plane...

    EDIT: after researching, I can see that mode7 does use some matrix math and so is on the right track, but is the 100% opposite visual result I'm after lol

  • Billboard sprites are easy and pretty cheap to do in construct!

    I use 2d sprites coupled with a "3d" billboard sprite in a container.

    On the 2d sprite, have 4 variables. Cx , cy, sprite angle, x pos.

    Cx = player.x - 2d sprite.x

    Cy = player.y - 2d sprite.y

    Sprite angle = angle(0,0,2d sprite.cx, 2d sprite.cy)-player.angle

    X pos = (half the screenwidth)+tan(2d sprite.sprite angle)*full screen width

    Set the x position on the billboard sprite, the other sprite in the container to the 2d sprite.x pos var.

    Set height value on the billboard sprite to ex: 64/distance(player.x,player.y,2d sprite.x, 2d sprite.y)/cos(anglediff(player.angle, angle(player.x,player.y,2d sprite.x, 2d sprite.y)*some value.

    Set y to either the height value, or half the screen height...

    Set the billboard sprite width to height.

    To fix the x position: if billboard height is less than 0, set to zero

    Done!

  • You can sort the billboard sprites "z" ordering in system. Z sort by something...and just set a variable to the height of the billboard, sort by that.

  • Ormus sounds really interesting, do you have a visual example?

  • Sure! But how do i share a construct 3 file here?

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)